https://github.com/sagnik-coder24/analog-clock
Responsive analog clock using vanilla JS
https://github.com/sagnik-coder24/analog-clock
analog-clock css html javascript web-development
Last synced: 2 months ago
JSON representation
Responsive analog clock using vanilla JS
- Host: GitHub
- URL: https://github.com/sagnik-coder24/analog-clock
- Owner: Sagnik-Coder24
- Created: 2021-08-17T13:33:03.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-01T17:33:31.000Z (about 1 year ago)
- Last Synced: 2024-12-27T09:16:57.479Z (about 1 year ago)
- Topics: analog-clock, css, html, javascript, web-development
- Language: CSS
- Homepage: https://analogclock2407.netlify.app/
- Size: 3.27 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Analog Clock
This is a simple web-based clock that displays the current time in both analog and digital formats. It is built using HTML, CSS, and JavaScript.
## Features
- **Analog Clock:** A visual representation of the current time with hour, minute, and second hands.
- **Digital Clock:** A straightforward display of the current time in a digital format.
## Demo
You can view a live demo [here](https://analogclock2407.netlify.app/).
## Usage
To use the clock, simply open the `index.html` file in your preferred web browser. The clock will automatically start displaying the current time.
### File Structure
```
/clock-website
├── index.html
├── styles.css
└── script.js
```
- `index.html`: The main HTML file that structures the clock layout.
- `styles.css`: The CSS file that styles the clock and its components.
- `script.js`: The JavaScript file that contains the logic for updating the clock.
## Features Walkthrough
### Analog Clock
- The analog clock is rendered using HTML and styled with CSS.
- JavaScript is used to calculate the current time and position the clock hands accordingly.
### Digital Clock
- The digital clock updates every second using JavaScript to display the current time in hours, minutes, and seconds.
## Customization
Feel free to customize the styles in `styles.css` to change the appearance of the clock to fit your preferences.
## Acknowledgments
- This project was inspired by the desire to create a simple yet functional clock for web users.