Create an Analog Clock using HTML, CSS, and JavaScript
Objective: The objective of this task is to design and develop an analog clock using HTML, CSS, and JavaScript. The clock should accurately display the current time, with the hour, minute, and second hands moving smoothly and synchronously, simulating a real clock.
- Fork this Repository. Clone it to your machine.
- Use HTML, CSS, and JavaScript to build the analog clock.
- The clock should be displayed on a webpage.
- Use HTML to structure the elements of the clock, including the clock face and the hour, minute, and second hands.
- Apply CSS to style the clock, including the clock face, hands, and any additional visual elements you wish to include.
- Use JavaScript to handle the functionality of the clock, including retrieving the current time and updating the position of the hands accordingly.
- The hour, minute, and second hands should move smoothly and continuously, without any noticeable jumps or delays.
- Ensure that the clock accurately reflects the current time, updating automatically as time passes.
- Feel free to experiment with different styles, colors, and additional features to make your clock unique and visually appealing.
- Test your clock in different web browsers to ensure cross-browser compatibility.
- Aim for clean and readable code. Use proper indentation, comments, and naming conventions to enhance code clarity.
- Submit your completed clock as a single HTML file, including any associated CSS or JavaScript code.
- Create Pull Request/ Merge Request to my Repository
The deadline for submitting your completed analog clock is 12/06/2023. Late submissions may not be accepted.
Your analog clock will be evaluated based on the following criteria:
The clock should accurately display the current time.
The hour, minute, and second hands should move smoothly and continuously, reflecting the current time.
The clock should be visually appealing and demonstrate creativity in its design.
The code should be well-structured, readable, and follow best practices.
The clock should function correctly across different web browsers.
Note: If you encounter any difficulties or have questions during the task, feel free to ask for assistance. Good luck, and have fun creating your analog clock!
- Light/dark mode toggle
- Live previews
- Fullscreen mode
- Cross platform