Web-Based Analog and Digital Clock

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.

Demo

CLICK HERE TO SUBSCRIBE MY YOUTUBE CHANNEL

You can see a live demo of the project here.

Features

• 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.

Installation

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.

Usage

1. 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>

2. 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>

3. Customize the design and functionality in the style.css and clock.js files as needed.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.