🌦️ Weather App — JavaScript (Async/Await + Fetch API)

The Weather App is a simple but powerful project built to strengthen JavaScript fundamentals such as API calling, async/await, DOM manipulation, error handling, and event handling. It allows users to search for any city and view real-time weather details fetched from a public weather API.

🚀 Features 🌤 1. Real-Time Weather Data

Displays temperature, humidity, wind speed, weather condition, etc.

Fetches live data from an external API.

⚡ 2. Fetch API + Async/Await

Fully asynchronous API calls.

Clean and modern JavaScript async code.

🧭 3. Search Any City

User enters a city name.

App shows weather instantly.

🛡 4. Proper Error Handling

Invalid city → shows an error message.

Handles network/API errors gracefully.

🎨 5. Beautiful UI

Clean layout with icons and background colors.

Fully responsive.

📁 Folder Structure Weather-App/ │ ├── css/ │ └── style.css │ ├── js/ │ └── script.js │ ├── images/ │ └── weather icons │ ├── index.html └── README.md

🛠️ Technologies Used

HTML5 → UI Structure

CSS3 → Styling & Responsive UI

JavaScript (Vanilla JS) → Fetch API, async/await, DOM updates

OpenWeather / Any Weather API

📌 What This Project Demonstrates (Important for Resume)

This project strengthened my JavaScript fundamentals, including:

✔ Async/Await ✔ Promises & Fetch API ✔ API Integration ✔ Handling JSON Response ✔ DOM Manipulation ✔ Event Handling ✔ Error Handling

This is why Weather App is considered one of the best beginner JavaScript projects — it touches almost all core concepts of JS used in real-world apps.

⚙️ How to Use

Clone the repository:

git clone https://github.com/your-username/weather-app.git

Open the folder:

cd weather-app

Start the app:

Simply open index.html in any browser or

Use VS Code → Open with Live Server

Enter your API key inside script.js:

const apiKey = "YOUR_API_KEY";

🖥️ Working

User enters a city name.

JavaScript calls the weather API using fetch() and async/await.

API sends a JSON response.

App extracts:

Temperature

Weather description

Wind speed

Humidity

Icon

All data is inserted into the DOM dynamically.

📸 Screenshot

Here is how the Weather App looks:

🔥 Future Enhancements

Add a 5-day weather forecast

Add geo-location weather (auto detect current city)

Add dark/light mode

Save previous searches