https://github.com/furkan-dogu/analog-saat
This project includes a design for an analog clock created using HTML, CSS, and JavaScript. The clock features a colorful rotation animation along with indicators for seconds, minutes, and hours.
https://github.com/furkan-dogu/analog-saat
analog-clock css dom-manipulation html javascript setinterval
Last synced: about 1 month ago
JSON representation
This project includes a design for an analog clock created using HTML, CSS, and JavaScript. The clock features a colorful rotation animation along with indicators for seconds, minutes, and hours.
- Host: GitHub
- URL: https://github.com/furkan-dogu/analog-saat
- Owner: furkan-dogu
- Created: 2023-11-27T14:39:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-30T11:41:35.000Z (over 2 years ago)
- Last Synced: 2025-09-03T09:45:21.516Z (9 months ago)
- Topics: analog-clock, css, dom-manipulation, html, javascript, setinterval
- Language: CSS
- Homepage: https://analog-saat-alpha.vercel.app
- Size: 2.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Preview
# Analog Clock Project
This project includes a design for an analog clock created using HTML, CSS, and JavaScript. The clock features a colorful rotation animation along with indicators for seconds, minutes, and hours.
## Live Project Link
You can access the live version of the project [here](https://analog-saat-alpha.vercel.app/).
## How to Use
To use the project, follow these steps:
1. Open the `index.html` file in your browser.
2. Enjoy the clock!
## Design Details
- The clock is designed as a turquoise-colored rotating circular shape.
- The seconds bar is represented with a separate bar for each second.
- Hour numbers are positioned around the hour indicator bar.
- Hour and minute indicators are updated in real-time.
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.
## Development
If you want to contribute or customize the project, follow these steps:
1. Download the project folder to your computer.
2. Make your code edits.
3. Open the `index.html` file in your browser to check the changes.