https://github.com/vishwas567917/digital-clock
Digital Clock is a simple project built with HTML, CSS, and JavaScript. It displays the current time with digital styling and can update in real-time. Ideal for learning DOM manipulation and basic animation techniques.
https://github.com/vishwas567917/digital-clock
circular-clock correct-timing html-css-javascript svg-animations unique
Last synced: 5 months ago
JSON representation
Digital Clock is a simple project built with HTML, CSS, and JavaScript. It displays the current time with digital styling and can update in real-time. Ideal for learning DOM manipulation and basic animation techniques.
- Host: GitHub
- URL: https://github.com/vishwas567917/digital-clock
- Owner: Vishwas567917
- Created: 2024-05-10T08:55:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T09:01:01.000Z (about 2 years ago)
- Last Synced: 2024-12-30T20:14:46.229Z (over 1 year ago)
- Topics: circular-clock, correct-timing, html-css-javascript, svg-animations, unique
- Language: CSS
- Homepage:
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Circular Clock
**Circular Clock** is a stylish web-based clock that visually represents the current time with a unique circular design. This clock uses SVG and JavaScript to create a dynamic and attractive display that updates every second to show the current hours, minutes, and seconds.
## Features
- **Dynamic Time Display**: Updates every second to reflect the current time.
- **Circular Design**: Uses SVG circles and animations to represent hours, minutes, and seconds.
- **AM/PM Indicator**: Displays AM/PM based on the 12-hour format.
- **Visual Indicators**: Dot markers and rotating hands for visual time representation.
- **Responsive Design**: Adapts to different screen sizes and devices.
## Installation
To run this project locally, follow these steps:
1. **Clone the Repository**: Clone or download this repository to your local environment.
2. **Open the HTML File**: Open the `index.html` file in a web browser.
3. **Observe the Clock**: The clock should automatically start displaying the current time.
### Clone the Repository
```bash
git clone https://github.com/your-username/your-repo.git
Open the HTML File
1. Navigate to the cloned repository.
2.Open the index.html file in a web browser to view the clock.
Usage
1. Check the Time: The clock will display the current time with hour, minute, and second indicators.
2. AM/PM Indicator: The clock automatically switches between AM and PM based on the 12-hour format.
Contribution
Contributions are welcome! If you'd like to contribute, please follow these steps:
1. Fork the Repository: Click the "Fork" button on GitHub to create your own copy of the repository.
2. Create a Branch: Create a new branch for your feature or bug fix.
3. Commit Your Changes: Make your changes and commit them to your branch.
4. Open a Pull Request: Once your changes are ready, open a pull request with a detailed description of your changes.
Acknowledgments
Thanks to the creators of Font Awesome for the icons used in this project and to the Poppins font from Google Fonts for providing the stylish typography.
This README template provides an overview of the project, installation instructions, usage details, contribution guidelines, and other useful information to help users and contributors understand and work with your code. Adjust it as needed to reflect your repository's specific requirements and context.