๐ Project 3: Weather Application Beginner to Intermediate
A Weather Application is one of the best projects to learn how websites communicate with external services. It introduces you to APIs, asynchronous JavaScript, and working with JSON data.
By the end of this project, you'll build a responsive weather app that displays real-time weather information for any city.
๐ฏ Project Goal
Build a weather application where users can:
โข ๐ Search weather by city
โข ๐ก๏ธ View current temperature
โข ๐ง View humidity
โข ๐ฌ๏ธ View wind speed
โข โ๏ธ View weather condition
โข ๐ View a 5-day forecast
โข ๐ View local date and time
โข ๐ฑ Use the app on mobile devices
๐ Technologies Used
Frontend:
โข HTML5
โข CSS3
โข JavaScript ES6
API:
โข OpenWeather API or any free weather API
๐ Project Folder Structure
weather-app/
โโโ index.html
โโโ style.css
โโโ script.js
โโโ assets/
โ โโโ clear.png
โ โโโ cloudy.png
โ โโโ rain.png
โ โโโ snow.png
โโโ README.md
๐จ Application Layout
Weather App
+--------------------------+
| Search City |
+--------------------------+
[ Search ]
๐ City Name
๐ก๏ธ Temperature
โ๏ธ Weather
๐ง Humidity
๐ฌ๏ธ Wind Speed
5-Day Forecast
Mon โ๏ธ 30ยฐC
Tue ๐ง๏ธ 27ยฐC
Wed โ๏ธ 29ยฐC
Thu ๐ฆ๏ธ 28ยฐC
Fri โ๏ธ 31ยฐC
๐ Features
โ Search Weather
Allow users to enter a city name.
Example HTML:
Search
โ Weather Display Section
City
Temperature
Humidity
Wind Speed
Weather Condition
โ Fetch Weather Data
Example JavaScript:
const apiKey = "YOUR_API_KEY";
async function getWeather(city) {
const response = await fetch(
https://api.openweathermap.org/data/2.5/weather?q=city appid={apiKey}&units=metric
);
const data = await response.json();
console.log(data);
}
Never hardcode real API keys in your project. Store them securely, for example, in environment variables if you later build a backend.
โ Search Button
const button = document.getElementById("searchBtn");
button.addEventListener("click", () => {
const city = document.getElementById("city").value;
getWeather(city);
});
โ Display Weather Data
Example:
document.getElementById("weather").innerHTML =
${data.name}
${data.main.temp} ยฐC
${data.main.humidity}%
${data.wind.speed} m/s
${data.weather[0].description}
;
โ Display Weather Icon
Use the icon code returned by the API.
const icon = data.weather[0].icon;
const image = https://openweathermap.org/img/wn/${icon}@2x.png;
Display it inside an tag.
โ Handle Errors
If the user enters an invalid city:
if(data.cod === "404") {
alert("City not found");
}
๐จ CSS Example
body {
font-family: Arial;
background: #f5f5f5;
text-align: center;
}
input {
padding: 10px;
width: 250px;
}
button {
padding: 10px 20px;
cursor: pointer;
}
๐ฑ Responsive Design
@media(max-width:768px) {
input {
width: 90%;
}
}
๐ Bonus Features
Take your project further by adding: