- 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, second hands & for the pin.
- Create a CSS file for styling our web-page and for assigning different lengths to the different hands.
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
- 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, second hands & for the pin.
- At the end of our body add <script> tag which links the JS file with our HTML file.
Code Explanation: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users. In CSS, we have to include the following points:
- Restore all the browser effects.
- Use classes and id’s to give effects to HTML elements.
- The setInterval() function is used for the execution of function for a specific period of time. For more details click here.
- The Date() function is used for returning today date, current time(hours, minutes, seconds).
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.