https://github.com/utsavpatel562/css-javascript

Nixie Tube Clock
https://github.com/utsavpatel562/css-javascript

github-config html-css-javascript javascript scss-framework

Last synced: about 23 hours ago
JSON representation

Nixie Tube Clock

• Host: GitHub
• URL: https://github.com/utsavpatel562/css-javascript
• Owner: utsavpatel562
• Created: 2024-04-22T18:35:15.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-04-30T00:55:49.000Z (5 months ago)
• Last Synced: 2024-09-26T00:40:55.538Z (about 23 hours ago)
• Topics: github-config, html-css-javascript, javascript, scss-framework
• Language: CSS
• Homepage: https://utsavpatel562.github.io/CSS-JavaScript/
• Size: 3.14 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#

JavaScript Digital Clock

Welcome to the JavaScript Digital Clock repository! This project implements a digital clock that displays the current time and date in a 12-hour format with AM/PM indication, as well as the current date in MM/DD/YY format. The clock automatically updates every minute to keep the time accurate.

Table of Contents



  
Features

  
Getting Started

  
Usage

  
Customization

  
Contributing

  
License



Features



  
Displays current time in a 12-hour format with AM/PM indication.

  
Automatically updates every minute.

  
Shows the current date in MM/DD/YY format.

  
Easy-to-read and customizable layout.



Getting Started

To run the clock on your local system, follow these steps:


1. Clone this repository:


git clone 

2. Open the index.html file in a web browser to view the clock.


Usage

Once you open the clock in a web browser, it will display the current time and date. The clock updates every minute, ensuring that the displayed time is accurate.


Customization

You can customize the appearance of the clock by modifying the accompanying CSS and HTML files. This can include changing fonts, colors, and layout to match your preferences.


Changing Time Display

To modify the way time is displayed, you can adjust the following JavaScript function:




  function updateTimeAndDate() {

    const now = new Date();

    let hours = now.getHours();

    const minutes = now.getMinutes().toString().padStart(2, '0');

    let amPm = hours >= 12 ? 'PM' : 'AM';

    if (hours > 12) {

        hours -= 12;

    } else if (hours === 0) {

        hours = 12;

    }

    let timeStr = hours.toString().padStart(2, '0') + minutes;

    if (timeStr.startsWith('0')) {

        timeStr = ' ' + timeStr.slice(1);

    }

    let month = (now.getMonth() + 1).toString().padStart(2, '0');

    let day = now.getDate().toString().padStart(2, '0');

    const year = now.getFullYear().toString().slice(-2);

    if (month.startsWith('0')) {

        month = ' ' + month.slice(1);

    }

    if (day.startsWith('0')) {

        day = ' ' + day.slice(1);

    }

    const displayStr = timeStr + amPm + month + day + year;

    for (let i = 0; i < 12; i++) {

        document.getElementById('char' + i + '1').textContent = displayStr[i];

        document.getElementById('char' + i + '2').textContent = displayStr[i];

    }

}



      

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request. Make sure to follow the existing code style and write clear, concise commit messages.


License

This project is licensed under the MIT License - see the LICENSE file for details.