https://github.com/seandadonntech/timeshock

A simple web page that allows users to select a city from a dropdown list and displays the current local time for the selected city. Built using HTML, CSS, and JavaScript, this project demonstrates dynamic time zone handling in the browser using the Intl.DateTimeFormat API.
https://github.com/seandadonntech/timeshock

and begin css date dynamic-content html javascript time

Last synced: about 7 hours ago
JSON representation

A simple web page that allows users to select a city from a dropdown list and displays the current local time for the selected city. Built using HTML, CSS, and JavaScript, this project demonstrates dynamic time zone handling in the browser using the Intl.DateTimeFormat API.

• Host: GitHub
• URL: https://github.com/seandadonntech/timeshock
• Owner: seandadonntech
• Created: 2024-09-11T18:04:28.000Z (2 months ago)
• Default Branch: master
• Last Pushed: 2024-09-12T15:51:18.000Z (2 months ago)
• Last Synced: 2024-09-13T06:02:01.567Z (2 months ago)
• Topics: and, begin, css, date, dynamic-content, html, javascript, time
• Language: HTML
• Homepage:
• Size: 5.33 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# City Time Zones

A simple HTML page that displays the current time in different cities based on the user's selection from a dropdown list. The time is automatically updated whenever a new city is selected.

## Features

- **City Selector**: Choose from a list of major cities (New York, Los Angeles, Chicago, London, Paris, Tokyo, Sydney).

- **Current Time Display**: Shows the current local time for the selected city.

- **Automatic Updates**: The time is updated immediately when a new city is selected.

## Technologies Used

- **HTML**: Structure of the web page.

- **CSS**: Styling for centering elements and providing a clean, minimalistic design.

- **JavaScript**: Used to dynamically update the time display based on the selected city and its corresponding time zone.

## How to Use

1. **Open the HTML File**: Open `index.html` in any modern web browser (e.g., Chrome, Firefox, Edge).

2. **Select a City**: Use the dropdown menu to select a city.

3. **View the Time**: The current local time for the selected city will be displayed below the dropdown.

## Code Explanation

- **HTML Structure**: Contains a header (`
`), a dropdown `` menu for city selection, and a `
` to display the time.

- **CSS Styles**:

  - Centers all elements using CSS Grid.

  - Provides basic styling for the dropdown and text display.

- **JavaScript**:

  - Adds an event listener to the dropdown menu to detect changes.

  - Uses `Intl.DateTimeFormat` to format and display the current time based on the selected city's time zone.

  - Automatically updates the time display when the page loads and whenever a different city is selected.


## Setup

No installation or additional setup is required. Simply open the `index.html` file in a web browser.

## Contributing

If you would like to contribute to this project, feel free to fork the repository and submit a pull request with your changes.

## License

This project is open source and available under the MIT License.

---

**Enjoy using the City Time Zones page!**