Building real-world projects is one of the best ways to learn web development. In this tutorial, we’ll create a fully functional Weather App using HTML, CSS, and JavaScript, powered by OpenWeatherMap API.
By the end, you’ll have a live app that displays:
-
Current temperature 🌡️
-
Weather conditions ☁️
-
Location and icon support 📍
Let’s go step-by-step.
🧱 Step 1: Set Up Your Project Structure
Create a folder named weather-app, then inside it:
weather-app/
├── index.html
├── style.css
└── script.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city name" />
<button onclick="getWeather()">Get Weather</button>
<div id="weatherResult"></div>
</div>
<script src="script.js"></script>
</body>
</html>
/* style.css */
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: rgba(0, 0, 0, 0.4);
padding: 2rem;
border-radius: 12px;
text-align: center;
}
input, button {
padding: 10px;
margin: 10px;
border: none;
border-radius: 6px;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
⚙️ Step 4: JavaScript + OpenWeather API
Sign up at OpenWeatherMap and get your API key.
// script.js
const apiKey = "YOUR_API_KEY_HERE";
async function getWeather() {
const city = document.getElementById("cityInput").value;
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
);
const data = await response.json();
if (data.cod === "404") {
document.getElementById("weatherResult").innerHTML = "City not found!";
return;
}
const weatherHTML = `
${data.name}
${data.weather[0].main} - ${data.weather[0].description}
🌡️ Temperature: ${data.main.temp} °C
💧 Humidity: ${data.main.humidity}%
`;
document.getElementById("weatherResult").innerHTML = weatherHTML;
}
✅ Step 5: Test the App
-
Replace
YOUR_API_KEY_HEREwith your actual OpenWeatherMap API key. -
Open
index.htmlin your browser. -
Type a city (e.g., New York, London) and click Get Weather.
You should now see the current weather details displayed instantly.
🔄 Bonus: Improvements You Can Make
-
Add geolocation support (auto-detect user’s city)
-
Use local storage to save last searched city
-
Add error animations or loading spinner
-
Convert to React, Vue, or Svelte for advanced users
📦 Resources
🏁 Final Thoughts
This weather app is a great beginner project that covers:
-
API requests with
fetch -
DOM manipulation
-
Responsive CSS layout
-
External APIs & keys
💡 Once you master this, you can level up by building weather dashboards, news widgets, or even a travel planner!
#WeatherApp, #JavaScriptProject, #WebDevelopment, #HTMLCSSJS, #MaxonCodes, #APItutorial