Skip to content

Latest commit

 

History

History
52 lines (31 loc) · 1.98 KB

Readme.md

File metadata and controls

52 lines (31 loc) · 1.98 KB
Raw

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 (<h1>), a dropdown <select> menu for city selection, and a <div> 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!