In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript.
Approach:
- Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.
- Create a CSS file for styling our web page and for assigning different lengths to the different hands.
- Create a JavaScript file for creating a brief logic for the rotation of different clock hands.
The logic for rotation of clock hands:
1. Hour Hand
For Achieving 12hrs,
hour hand moves 360deg.
i.e. 12hrs ⇢ 360degs
so, 1hr ⇢ 30degs
and, 60mins ⇢ 30degs
so, 1min ⇢ 0.5degs
Total Rotation of hour hand:
(30deg * hrs) + (0.5deg * mins)
2. Minute Hand
For Achieving 60mins,
hour hand moves 360deg.
i.e. 60mins ⇢ 360degs
so, 1min ⇢ 6degs
Total Rotation of minute hand:
6deg * mins
3. Second Hand
For Achieving 60secs,
hour hand moves 360deg.
i.e. 60secs ⇢ 360degs
so, 1sec ⇢ 6degs
Total Rotation of minute hand:
6deg * secs
Example:
Code Explanation:
- First, create an HTML file (index.html).
- Now after the creation of our HTML file, we are going to give a title to our webpage using <title> tag. It should be placed inside the <head> section.
- Then we link the CSS file that provides all the styles to our HTML. This is also placed in between the <head> tag.
- Coming to the body section of our HTML code.
- Firstly, create a main div as a clock.
- In that div add 4divs for an hour, minute, and second hands & for the pin.
- At the end of our body add <script> tag which links the JS file with our HTML file.
- The setInterval() function is used for the execution of a function for a specific period of time. For more details click here.
- The Date() function is used for returning today’s date, and current time(hours, minutes, seconds).
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Analog Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <div class="hr"></div> <div class="min"></div> <div class="sec"></div> <div class="pin"></div> </div> <script src="index.js"></script> </body> </html> |
CSS
/* Restoring browser effects */* { margin: 0; padding: 0; box-sizing: border-box; ; } /* All of the same styling to the body */body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; background-image: linear-gradient( 70deg, black, white); } /* Sizing, positioning of main dial of the clock */.clock { width: 40vw; height: 40vw; background-image: linear-gradient( 70deg, black, white); background-size: cover; box-shadow: 0 3em 5.8em; border-radius: 50%; position: relative; } .hr, .min, .sec { width: 1%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); transform-origin: bottom; z-index: 2; border-radius: 2em; } .pin { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 1em; height: 1em; background: rgb(38, 0, 255); border: 2px solid #ffffff; border-radius: 10em; margin: auto; z-index: 10; } /* Different length of different hands of clock */.hr { height: 25%; background-color: #ff0000; } .min { height: 30%; background-color: #ff9900; } .sec { height: 40%; background-color: #99ff00; transform-origin: 50% 85%; } |
Javascript
// Selecting all of the css classes on which // we want to apply functionalities const hr = document.querySelector('.hr') const min = document.querySelector('.min') const sec = document.querySelector('.sec') // Setting up the period of working setInterval(() => { // Extracting the current time // from DATE() function let day = new Date() let hour = day.getHours() let minutes = day.getMinutes() let seconds = day.getSeconds() // Formula that is explained above for // the rotation of different hands let hrrotation = (30 * hour) + (0.5 * minutes); let minrotation = 6 * minutes; let secrotation = 6 * seconds; hr.style.transform = `translate(-50%,-100%) rotate(${hrrotation}deg)` min.style.transform = `translate(-50%,-100%) rotate(${minrotation}deg)` sec.style.transform = `translate(-50%,-85%) rotate(${secrotation}deg)` }); |
Output: Click here to see live code output
Responsive analog clock using HTML, CSS and Vanilla JavaScript
