Project: Digital Clock

This project implements a simple digital clock using HTML, CSS, and JavaScript. It displays the current time in 12-hour format with AM/PM indicators.

---

💻  Preview

Before

After

• 📫 How to reach me:  

---

🛠  Languages and Tools

 

 

---

Structure:

• index.html: Contains the HTML structure of the clock, including the title, heading, and a placeholder element (div) where the time will be displayed.
• style.css: Defines the visual styling of the clock (optional).
• script.js: Implements the JavaScript logic to update the time dynamically.

Functionality:

1. Retrieving Time:

   • The showTime() function creates a new Date object to access the current time.
   • It extracts the hours, minutes, and seconds values.

2. Formatting Time:

   • For hours:
     • If hours is 0, it's set to 12 (midnight).
     • If hours is greater than 12, it's adjusted to the 12-hour format and the session is set to "PM".
   • For minutes and seconds:
     • If a value is less than 10, a leading "0" is added for consistent two-digit display.

3. Displaying Time:

   • The formatted time string is constructed using string concatenation.
   • The document.getElementById("MyClockDisplay").innerText property is used to update the content of the placeholder element with the current time.

4. Continuous Update:

   • The setTimeout() function calls showTime() repeatedly every 1 second (1000 milliseconds) to ensure the clock updates dynamically.

Running the Project:

1. Save the HTML, CSS, and JavaScript files in the same directory.
2. Open the index.html file in a web browser to view the digital clock.

Customization:

• You can modify the HTML structure and CSS styles to customize the appearance of the clock.
• While the current code uses a basic 12-hour format, you could potentially extend it to include additional features like 24-hour format, date display, or alarm functionality.

Additional Notes:

• The provided code assumes you have basic HTML, CSS, and JavaScript knowledge.
• For more advanced features, consider using JavaScript libraries or frameworks.