https://github.com/nipuna-lakruwan/digital-clock
Digital Clock with Stopwatch and Timer This repository contains a responsive and visually appealing HTML, CSS, and JavaScript implementation of a digital clock with additional features like stopwatch and timer. The project is designed and created by Code With Nipuna.
https://github.com/nipuna-lakruwan/digital-clock
Last synced: 2 months ago
JSON representation
Digital Clock with Stopwatch and Timer This repository contains a responsive and visually appealing HTML, CSS, and JavaScript implementation of a digital clock with additional features like stopwatch and timer. The project is designed and created by Code With Nipuna.
- Host: GitHub
- URL: https://github.com/nipuna-lakruwan/digital-clock
- Owner: Nipuna-Lakruwan
- License: apache-2.0
- Created: 2024-02-06T10:45:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-06T10:57:38.000Z (about 1 year ago)
- Last Synced: 2025-01-02T00:15:51.853Z (4 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Digital-Clock
https://nipuna-lakruwan.github.io/Digital-Clock/
**Digital Clock with Stopwatch and Timer**
This repository contains a responsive and visually appealing HTML, CSS, and JavaScript implementation of a digital clock with additional features like stopwatch and timer. The project is designed and created by Code With Nipuna.
# Features:
- **Digital Clock:** Displays the current time in hours, minutes, seconds, and AM/PM format.
- **Stopwatch:** Allows users to measure elapsed time with precision, including hours, minutes, seconds, and milliseconds. Users can start, stop, lap, and reset the stopwatch.
- **Timer:** Enables users to set a countdown timer by entering the desired time in minutes. The timer displays hours, minutes, seconds, and milliseconds and provides functionalities to start, stop, and reset the timer.
# Structure:
- The HTML file (`index.html`) structures the content, including the clock, stopwatch, timer, and additional elements like background animations.
- The CSS file (`style.css`) provides styles for the entire layout, making use of the Poppins font and ensuring a visually pleasing and responsive design.
- The JavaScript file (`script.js`) contains the logic for updating the clock in real-time, managing the stopwatch and timer functionalities, and handling user interactions.
# Responsive Design:
- The layout is designed to be responsive, with adjustments for different screen sizes. Media queries are used to ensure a seamless experience on devices of various resolutions.
# Background Animation:
- The background features animated elements (`bg-elem`) that add a dynamic and visually appealing touch to the overall design.
# Credits:
- The project gives credit to its creator, Code With Nipuna, with a link to their profile.
# Dependencies:
- The project utilizes the jQuery library (version 3.6.3) for enhanced JavaScript functionality.
Feel free to explore, use, and contribute to this repository to enhance or customize the digital clock, stopwatch, and timer implementation. Happy coding!