https://github.com/ryzmdn/digital-clock

The Digital Clock is a web-based application built with HTML, CSS, and JavaScript.
https://github.com/ryzmdn/digital-clock

css digital-clock front-end html javascript

Last synced: 2 days ago
JSON representation

The Digital Clock is a web-based application built with HTML, CSS, and JavaScript.

• Host: GitHub
• URL: https://github.com/ryzmdn/digital-clock
• Owner: ryzmdn
• Created: 2024-12-12T15:05:08.000Z (15 days ago)
• Default Branch: main
• Last Pushed: 2024-12-12T15:07:32.000Z (15 days ago)
• Last Synced: 2024-12-12T16:20:28.257Z (15 days ago)
• Topics: css, digital-clock, front-end, html, javascript
• Language: HTML
• Homepage: https://ryzmdn.github.io/digital-clock/
• Size: 127 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Digital Clock

The Digital Clock is a web-based application built with HTML, CSS, and JavaScript. It displays real-time dynamic information such as the current time (hours, minutes, and seconds), AM/PM status, date, month, year, and simulated environmental data like fake temperature and humidity.

## Features

- **Dynamic Time Display**: Shows current hours, minutes, and seconds, updated in real time.

- **AM/PM Indicator**: Displays whether the current time is AM or PM.

- **Date Information**: Provides the current date, month, and year.

- **Fake Temperature and Humidity**: Simulates and displays environmental data for a fun and interactive experience.

- **Responsive Design**: Optimized for seamless use across desktop and mobile devices.

- **Visually Appealing Interface**: Styled with CSS to deliver a clean and modern look.

## How It Works

1. **Dynamic Time Updates**: JavaScript fetches and updates the current time every second.

2. **AM/PM Display**: The application determines and displays the appropriate period (AM or PM).

3. **Date and Environment**: The app calculates the current date and displays fake temperature and humidity values, adding an engaging layer of interactivity.

4. **Responsive Styling**: CSS ensures the UI is adaptable to any screen size, offering an optimal viewing experience.

## Screenshot

![preview](https://github.com/user-attachments/assets/aa3f62b9-f599-41c2-a166-8af28536a988)

## Installation

Follow these steps to set up the Digital Clock application locally:

```bash

# Clone the repository

git clone https://github.com/ryzmdn/digital-clock.git

# Navigate to the project directory

cd digital-clock

# Open the project in your code editor

code .

```

## Usage

1. Open the index.html file in a web browser.

2. View the real-time clock displaying the current hours, minutes, and seconds.

3. Observe the dynamically updated date (day, month, year) along with simulated temperature and humidity values.

4. Enjoy the clean, responsive design optimized for all device types.

## Dependencies

This project uses the following technologies:

- HTML5: Structures the layout of the application.

- CSS3: Provides styling and responsive design elements.

- JavaScript: Handles real-time clock updates, date calculations, and fake environmental data generation.

- No external libraries or frameworks are required.

## Support

For support, feel free to contact us at `[email protected]`.

## Feedback

We value your feedback! If you have suggestions for improvement or additional features, please reach out to us at `[email protected]`.

## License

No License.