This project demonstrates how to create a web-based analog and digital clock using HTML, CSS, and JavaScript. The clock displays both analog and digital time, updating every second.
CLICK HERE TO SUBSCRIBE MY YOUTUBE CHANNEL
You can see a live demo of the project here.
- Analog Clock: Displays time with moving hour, minute, and second hands.
- Digital Clock: Displays time in digital format.
- Real-Time Update: Both clocks update every second to show the current time.
- Responsive Design: Adjusts to different screen sizes.
To use this project, simply download or clone the repository:
git clone https://github.com/logusivam/web-based_clock.git
Alternatively, you can directly copy the HTML, CSS, and JavaScript code into your project files.
- Include the CSS and JavaScript files in your HTML file:
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="clock.js" defer></script>
- Add the following HTML structure:
<div id="time">
<div id="hours" style="--clr:#ff2972;">00</div>
<div id="minutes" style="--clr:#fee800;">00</div>
<div id="seconds" style="--clr:#04fc43;">00</div>
<div id="ampm" style="--clr:#d320bb;">AM</div>
</div>
- Customize the design and functionality in the
style.css
andclock.js
files as needed.
Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.