Modern Weather App

A simple and modern Weather Application built using HTML, CSS, and JavaScript that allows users to check real-time weather information for any city using the OpenWeatherMap API.

This project demonstrates how to fetch data from an API and dynamically display it on a webpage with a clean and responsive UI.

Project Overview

The Weather App allows users to enter the name of a city and instantly view the current weather details including:

• Temperature
• Humidity
• Weather Condition
• Weather Icon

The application uses JavaScript Fetch API to retrieve weather data and update the interface dynamically.

Features

• 🔎 Search weather by city name
• 🌡️ Displays current temperature
• 💧 Shows humidity level
• 🌥️ Displays weather condition with icon
• ⌨️ Enter key support for quick search
• 🎨 Clean modern UI with gradient background
• 📱 Responsive design for mobile, tablet and desktop devices.

Technologies Used

• HTML5 – Structure of the application
• CSS3 – Styling and layout design
• JavaScript (ES6) – API integration and dynamic functionality
• OpenWeatherMap API – Real-time weather data source

Project Structure

Weather-App/
│
├── index.html      # Main HTML file
├── style.css       # Styling and layout
├── script.js       # Weather API logic
└── README.md       # Project documentation

How It Works

1. User enters a city name in the search input.
2. JavaScript sends a request to the OpenWeatherMap API.
3. The API returns weather data in JSON format.
4. JavaScript extracts:
   • Temperature
   • Humidity
   • Weather description
   • Weather icon
5. The data is displayed dynamically on the webpage.

How to Run the Project

1. Clone this repository:

git clone https://github.com/Sehrish-web209/weather-app.git

2. Open the project folder.

3. Replace the API key in script.js:

const apiKey = "YOUR_API_KEY_HERE";

4. Open index.html in your browser.

🌐 Live Demo

Check out the live version of the Weather App here:
https://sehrish-web209.github.io/Weather-app/

Project Demo

You can record a short screen recording showing:

• Opening the Weather App
• Searching for different cities
• Displaying weather results
• Showing temperature, humidity, and weather condition

Learning Outcomes

Through this project, I practiced:

• Working with APIs
• Using JavaScript Fetch API
• Handling JSON data
• Creating a responsive UI
• Building an interactive web application

👩‍💻 Author

Sehrish Maqbool BSIT Student at University of Chakwal Project created as part of SyntecxHub Internship.