Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xensen008/analog-clock

This project presents a sleek and functional analog clock created with HTML, CSS, and JavaScript
https://github.com/xensen008/analog-clock

analog analog-clock clock html-css-javascript live themes time web

Last synced: 19 days ago
JSON representation

This project presents a sleek and functional analog clock created with HTML, CSS, and JavaScript

Awesome Lists containing this project

README

        

# Analog Clock Project

This project presents a sleek and functional analog clock created with HTML, CSS, and JavaScript. The clock not only provides real-time updates for hours, minutes, and seconds but also offers a dynamic user experience with a unique light and dark mode switch.

![Clock Demo](./demo%20clock.png)(https://xensen008.github.io/Analog-clock/)

## Demo
The code is hosted for demo purpose
https://xensen008.github.io/Analog-clock/

## Authors

- [@Arnabjk008](https://www.github.com/xensen008)

## Features

- Real-time Updates: Witness the accurate tracking of time with live updates for hours, minutes, and seconds.
- Light and Dark Mode: Customize your viewing experience by toggling between a light and dark theme using the intuitive switch button.

## Usage/Examples

1.Clone the repository to your local machine.

2.Open the index.html file in your preferred web browser.

3.Interact with the clock interface and toggle the theme using the provided switch button.

## Installation

Just run the code in Any ide (Vscode if git is installed!)

**Installation in bash or git/cloud shell**
```bash
git clone https://github.com/Xensen008/Analog-clock
```
```bash
cd Analog-clock
```
```
open the index.html file or activate live server in vscode
```
## Technologies Used

- HTML: Structured the content and layout.
- CSS: Styled the clock and implemented the light/dark theme.
- JavaScript: Provided functionality for real-time clock updates and theme switching.
- Font Awesome: Integrated for stylish icons.

## File Structure

- `index.html`: Contains the structure of the clock.
- `style.css`: Manages the visual presentation and theming.
- `app.js`: Implements the clock functionality and theme switching.

## Contributing

Contributions are always welcome!

Feel free to contribute by opening issues, suggesting enhancements, or submitting pull requests. Your input is valuable!

## How to Contribute

If you're interested in contributing to this project, follow these steps:

1. Fork the project.
2. Create a new branch for your feature: `git checkout -b feature-name`.
3. Commit your changes: `git commit -m 'Add new feature'`.
4. Push to the branch: `git push origin feature-name`.
5. Submit a pull request.

Let's code together! 💻🚀

## Acknowledgements

- Special thanks to [Font Awesome](https://fontawesome.com/) for providing the icons used in this project.
- I thank this [video](https://youtu.be/weZFfrjF-k4?si=d3mtCJHQ4UkljgG7) for helping me build this Project

## Support

For support, email [email protected] or join our [Telegram channel](https://t.me/ihackit08)