Xensen008 / Analog-clock

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

Home Page:https://xensen008.github.io/Analog-clock/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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(https://xensen008.github.io/Analog-clock/)

Demo

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

Authors

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

  git clone https://github.com/Xensen008/Analog-clock
  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 for providing the icons used in this project.
  • I thank this video for helping me build this Project

Support

For support, email sagespeak008@cyberdude.com or join our Telegram channel

About

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

https://xensen008.github.io/Analog-clock/


Languages

Language:CSS 52.9%Language:JavaScript 28.5%Language:HTML 18.6%