Digital and Analog Clock using HTML CSS and JavaScript
Introduction :
This project is a digital clock and stopwatch system, which allows the user to view the time in both 12-hour and 24-hour formats, as well as operate a stopwatch and set alarms. The system is powered by a combination of HTML, CSS, and JavaScript, making it dynamic and interactive. The JavaScript code controls all the main functionalities, including switching between different time formats, updating the time every second, and running the stopwatch or alarm.
You can build this project to enchance your web development skills. So lets discuss this project in the terms of structure, code explanation etc.
Explanation :
Key Components
Clock (12-hour and 24-hour formats) :
- The main feature of the project is a digital clock that displays time in either a 12-hour or 24-hour format.
- The clock updates every second to reflect the current hour, minute, and second.
- In 12-hour mode, the clock includes an AM/PM indicator, showing whether the time is before noon (AM) or after noon (PM).
Stopwatch :
The stopwatch allows users to start, stop, and reset a timer that counts up from 00:00:00. It is used to measure specific time intervals, and the interface updates every second.
Alarm :
- The alarm mode allows the user to set a countdown timer. Once the time reaches zero, the system triggers a notification, simulating an alarm.
- The alarm functionality is more complex as it involves both setting the time and monitoring its countdown.
Code Structure :
HTML :
The HTML structure is primarily responsible for displaying the interface elements, such as the digits of the clock, buttons to switch between modes, and any interactive elements. The main structure for displaying the time consists of several div elements that represent each digit of the hour, minute, and second. These div elements are updated dynamically by JavaScript to display the correct digits at every second.
CSS :
- Number Display: Each digit is styled using classes like
.show0,.show1, etc., to display the appropriate number from 0 to 9. The CSS changes dynamically based on the current time, so for instance, when the hour is 12, the class.show1and.show2would be applied to the respective hour digits. - Transitions: CSS also manages any transitions or animations, such as when switching between 12-hour and 24-hour formats or when digits change smoothly every second.
- Visual Layout: The clock, stopwatch, and alarm modes are visually distinct from one another, and CSS ensures that the active mode is highlighted, while others are hidden or minimized.
JavaScript Logic :
JavaScript is the engine that powers the dynamic behavior of this project. It manages how and when the time is updated, responds to user interactions, and handles the switching between different modes (clock, stopwatch, and alarm).
Purpose of Each Function :
Main Time Update Function: The function that updates the time every second is the heart of the system. It continuously fetches the current time, splits it into individual digits, and updates the screen accordingly. This ensures that the clock stays accurate and responsive, regardless of the mode.
Mode Switching Functions: These functions handle switching between different modes (clock, stopwatch, and alarm). They monitor the
Formatvariable and trigger the appropriate behavior for each mode.Stopwatch and Alarm Logic:
- The stopwatch function is responsible for incrementing the
TimeHoldervariable every second and updating the display to show the elapsed time. - The alarm function handles decrementing the countdown and triggering the alarm when the countdown reaches zero.
- The stopwatch function is responsible for incrementing the
Day Setting Function: In addition to hours, minutes, and seconds, the clock also displays the current day of the week. A separate function calculates the current day (e.g., Sunday, Monday) based on the
Date()object and highlights the corresponding day on the display.
Source Code for Digital Clock 1 :
See the Pen Untitled by Just Faustineh (@Just-Faustineh) on CodePen.
Source Code for Digital Clock 2 :
See the Pen Digital Clock w/ Animation ⏰ by Anna Pawl (@annampawl) on CodePen.
Source Code for Digital Clock 3 :
See the Pen Digital Clock by Kevin (@kevinnadar22) on CodePen.
Source Code for Analog Clock 1:
See the Pen CSS Clock Animation by Yudiz Solutions Limited (@yudizsolutions) on CodePen.
Source Code for Analog Clock 2:
See the Pen Working accurate wall clock by Sean Farley (@Sean-Farley) on CodePen.
Source Code for Analog Clock 3:
See the Pen Pure CSS Analog Clock (No Images) by Cam Parry (@camparry) on CodePen.
Analog Cum Digital clock source code:
See the Pen Analog cum digital working clock by Nikhil Sutar (@ProgrammedAI) on CodePen.
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
Find More Projects
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Digital and Analog Clock using HTML CSS and JavaScript Introduction : This project is a digital clock and stopwatch system, which allows …
Coffee Shop Website using HTML, CSS & JavaScript Introduction : This project is a website for coffee house business. It uses HTML …
