https://github.com/mohit-rajak/analog-clock
Analog Clock
https://github.com/mohit-rajak/analog-clock
Last synced: about 13 hours ago
JSON representation
Analog Clock
- Host: GitHub
- URL: https://github.com/mohit-rajak/analog-clock
- Owner: Mohit-Rajak
- Created: 2025-01-27T16:14:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T16:29:21.000Z (over 1 year ago)
- Last Synced: 2025-11-12T03:31:54.202Z (7 months ago)
- Language: CSS
- Homepage: https://analog-clock-rho-sooty.vercel.app
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Analog Clock
This project is a simple yet functional Analog Clock built using HTML, CSS, and JavaScript. The clock displays the current time with an interactive analog-style interface, showcasing the use of basic web development technologies to simulate a real-world clock mechanism.
## Features:
Real-Time Update: The clock continuously updates to show the current time with an accurate display of hours, minutes, and seconds.
Smooth Movement: The clock hands (hour, minute, and second) move smoothly, mimicking the behavior of a real analog clock.
Responsive Design: The clock adapts to different screen sizes, ensuring a clean layout across devices such as mobile, tablet, and desktop.
## Technologies Used :
- **HTML**: Provides the basic structure for the clock, including the elements representing the clock face and the hands.
- **CSS**: Used for styling and positioning the clock hands, as well as creating the circular face of the clock.
- **JavaScript**: Responsible for dynamically updating the position of the clock hands based on the current time.
## Installation & Usage:
**Clone the Repository:**
git clone : https://github.com/Mohit-Rajak/Analog-Clock.git
You can either clone the repository using Git or download the zip file.
## Open the Project:
Navigate to the folder where you downloaded or cloned the project.
Open the index.html file in your preferred browser.
Enjoy the Analog Clock:
Once the page is loaded, the analog clock will display, and the hands will move according to the current time.
Code Breakdown:
**HTML**:
A container div element wraps the entire clock.
Inside the container, there are additional div elements representing the clock's face, and the hour, minute, and second hands.
We use a basic structure to hold all the elements and ensure proper positioning.
**CSS**:
We style the clock's face to be circular using border-radius.
The clock hands are positioned at the center of the clock face, and the transform property is used to rotate the hands according to the current time.
Keyframes are used for smooth animation of the second hand.
**JavaScript**:
The JavaScript code grabs the current time using the Date() object.
The positions of the hour, minute, and second hands are updated based on the current time, ensuring the hands rotate accordingly.
setInterval() is used to update the time every second, making the clock interactive.
Demo:
You can see a live demo of this Analog Clock in action by visiting the following link https://analog-clock-rho-sooty.vercel.app
## Customization:
You can easily modify the colors, sizes, and style of the clock by editing the CSS.
You can adjust the speed of the clock hands or the clock size to suit your needs.
Feel free to add additional features, such as a digital clock display or custom background.
## Author
Mohit Rajak \
Email: contact.mohitrajak022004@gmail.com \
LinkedIn : https://www.linkedin.com/in/mohit-rajak/
## Thank You
Thank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊