Description: Displays a working clock showing current local time in 12-Hrs routine
Phase: Frontend
Tech used: Html, Css, Javascript
Files
- index.html
- clockScript.js
- clockStyle.css
Implementation
- All the HTML structures are created and inserted using javascript to the root element of the design.
- Challenge: Displaying the timing number (from 1 to 12) in a circular design and correct order and position. Solution: Implemented using individual "div" tags for each number and then rotating each with corresponding calculated angle.
- Challenge: Changing the clock hands with respect to the time Solution: Getting local time at every 1000ms interval from "Date()" object and then updating the rotation angle of each clock hand.
Future
- Dark mode design
- 3D Analog Clock
- Implementing day and night effect dynamically