https://github.com/shivlalsharma/digital-clock
A simple, responsive digital clock built using HTML, CSS, and JavaScript that updates every second and displays the current time in 12-hour format with AM/PM.
https://github.com/shivlalsharma/digital-clock
clock css digital-clock frontend html javascript responsive-design web-development
Last synced: about 2 months ago
JSON representation
A simple, responsive digital clock built using HTML, CSS, and JavaScript that updates every second and displays the current time in 12-hour format with AM/PM.
- Host: GitHub
- URL: https://github.com/shivlalsharma/digital-clock
- Owner: shivlalsharma
- License: mit
- Created: 2024-12-01T14:18:47.000Z (over 1 year ago)
- Default Branch: javascript
- Last Pushed: 2024-12-01T14:19:16.000Z (over 1 year ago)
- Last Synced: 2025-02-13T22:29:15.962Z (over 1 year ago)
- Topics: clock, css, digital-clock, frontend, html, javascript, responsive-design, web-development
- Language: JavaScript
- Homepage:
- Size: 190 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Digital Clock
This is a simple yet elegant digital clock built using HTML, CSS, and JavaScript. It displays the current time in a 12-hour format with AM/PM, updating every second.
## Features
- Displays the current time in the format `HH : MM : SS AM/PM`.
- Automatically updates every second using JavaScript.
- Uses a background image for a visually appealing design.
- Fully responsive for mobile and desktop views.
- Lightweight and easy to use.
## Technology Used
- **HTML**: Structure of the page.
- **CSS**: Styling for the clock and layout.
- **JavaScript**: Used to dynamically update the time every second.
- **Responsive Design**: The clock adjusts its size based on screen width.
- **Background Image**: Adds a professional touch to the design.
## How It Works
1. The HTML file contains a `div` element that holds the clock (`#time`).
2. The JavaScript function `displayTime()` fetches the current time using the `Date` object and formats it to 12-hour format.
3. The time is displayed in the `#time` element, and the `setInterval()` method ensures the time is updated every second.
4. The CSS styles the clock, centers it on the screen, and makes it responsive for smaller screens.
5. The clock’s background is set with an image for a visually appealing design.
## Installation
follow these steps to run the project locally:
1. **Clone the repository**:
```bash
git clone https://github.com/shivlalsharma/digital-clock.git
cd digital-clock
```
2. **Open the `index.html` file in your browser**.
Alternatively, you can set up a local server (e.g., using **VS Code Live Server**) to view the project in your browser.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Created and deployed by **Shivlal Sharma**.
- **GitHub**: [Shivlal Sharma's GitHub](https://github.com/shivlalsharma)
- **LinkedIn**: [Shivlal Sharma's LinkedIn](https://www.linkedin.com/in/shivlal-sharma-56ba5a284/)