World Clock & Weather

A responsive web application that displays the current local time and weather information for multiple cities around the world. The application combines real-time time zone conversion with live weather data using the OpenWeatherMap API.

Features

• Displays the current local time for multiple cities.
• Provides real-time weather information.
• Displays temperature in Celsius.
• Shows weather conditions and weather icons.
• Supports multiple international cities.
• Responsive design for desktop, tablet, and mobile devices.
• Interactive navigation between different sections.
• Dynamic content updates using JavaScript.
• Error handling for unavailable weather data.
• Clean and modern user interface.

Technologies Used

• HTML5
• CSS3
• JavaScript
• OpenWeatherMap API
• JavaScript Intl API
• IANA Time Zones
• FlagCDN
• Google Fonts
• SVG

How It Works

The application uses JavaScript to determine the current time for each city based on its respective time zone. When the user requests weather information, the application sends the city's coordinates to the OpenWeatherMap API.

The API returns the current weather data, including temperature, weather description, and weather icon. JavaScript then dynamically displays this information on the corresponding city card.

Cities Covered

• India
• New York, USA
• London, UK
• Saudi Arabia
• Japan
• South Korea
• Qatar
• China

Project Structure

World-Clock-Weather/
│
├── index.html
├── style.css
├── script.js
├── README.md
└── World_Clock_Weather_Project_Overview.pdf

How to Run

1. Clone the repository.
2. Open the project folder.
3. Configure your OpenWeatherMap API key in script.js.
4. Open index.html in a web browser.
5. Use the World Clock section to view local time and weather information.

Project Objective

The objective of this project is to develop a simple and responsive web application that helps users check the current time and weather conditions of different cities in one place.

Future Improvements

• Add more cities and countries.
• Add hourly and weekly weather forecasts.
• Add a city search feature.
• Add automatic location detection.
• Add favorite cities.
• Add dark and light mode.
• Improve API security.
• Add additional weather information such as humidity, wind speed, and pressure.

Author

Khushnoor Patel

Computer Engineering Student Interested in Data Science, Machine Learning, and Artificial Intelligence.