Weather App Using HTML, CSS and JavaScript (Live API Project)
Create a real-time Weather App using HTML, CSS, JavaScript, and OpenWeather API. Learn API integration, async JS, and build a practical frontend project with source code.
This Weather App project is a modern beginner-friendly web application built using HTML, CSS, and JavaScript. It demonstrates how real-world applications fetch live data from APIs and display it dynamically in the browser.
Using the OpenWeather API, the app retrieves real-time weather information such as temperature, humidity, wind speed, and location details, all displayed inside a clean responsive interface.
Info!
This project is perfect for developers who want hands-on practice with API calls, async JavaScript, and real-time UI updates.
Project Features
| Feature | Description |
|---|---|
| City Search | Get weather data instantly by entering city name |
| Live Temperature | Displays real-time temperature in Celsius |
| Weather Stats | Shows humidity and wind speed |
| Country Flag | Automatically detects country flag |
| Icons | Dynamic weather condition icons |
| Error Handling | Shows message for invalid cities |
Technologies Used
- HTML5 – Layout structure
- CSS3 – Styling and responsiveness
- JavaScript (ES6) – Logic and API calls
- OpenWeather API – Real-time weather data source
Project Preview
View Live Demo Download Source Code
How This Weather App Works
Folder Structure
weather-app/
├── index.html
├── style.css
├── script.js
└── images/
Working Logic
The application uses the JavaScript fetch() method to request data from the weather API. When a user enters a city name, the app sends a request and updates the UI with live weather results.
Main Function Example
async function checkWeather(city){
const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
const data = await response.json();
document.querySelector(".temp").innerHTML =
Math.round(data.main.temp) + "°C";
}
How to Run This Project
- Download source code
- Open folder in VS Code
- Insert your API key
- Run index.html in browser
- Search any city
Warning!
Without adding your API key, the weather data will not load.
Explore More Projects
Conclusion
Building this project strengthens your understanding of API integration, asynchronous JavaScript, and real-world frontend logic. It is an excellent practice project for portfolios and interviews.
FAQs
Is this project beginner friendly?
Yes. It is designed for beginners who already understand basic HTML, CSS, and JavaScript fundamentals.
Do I need an API key?
Yes. You must create a free OpenWeather API key and paste it inside the script file.
What can I add next to improve this app?
You can add forecast data, dark mode toggle, geolocation detection, and hourly weather charts.
