Creating a Weather App with OpenWeatherMap API Using JavaScript
Creating a Weather App with OpenWeatherMap API Using JavaScript
Weather apps are one of the most popular beginner-to-intermediate projects for web developers. They’re practical, engaging, and teach you how to work with APIs, asynchronous code, and UI updates. In this blog post, we’ll walk through how to build a simple weather application using HTML, CSS, and JavaScript, powered by the OpenWeatherMap API.
Why Build a Weather App?
It’s more than just displaying the temperature. You’ll learn to:
- Use asynchronous JavaScript with
fetch - Handle user input
- Work with third-party APIs
- Dynamically update the DOM
Setting Up the Project
Folder Structure
weather-app/ ├── index.html ├── style.css └── script.js Get Your API Key
Sign up at OpenWeatherMap and generate your free API key. You’ll need it to fetch weather data.
Step-by-Step: Building the App
1. The HTML (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="app">
<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> 2. The CSS (style.css)
body {
font-family: Arial, sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.app {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
text-align: center;
}
3. The JavaScript (script.js)
async function getWeather() {
const city = document.getElementById("cityInput").value;
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
php-template
Copy
Edit
if (data.cod === 200) {
document.getElementById("weatherResult").innerHTML = `
<h2>${data.name}, ${data.sys.country}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].description}</p>
`;
} else {
document.getElementById("weatherResult").innerHTML = "<p>City not found</p>";
}
} catch (error) {
console.error("Error fetching weather data:", error);
}
}
Bonus: Add Icons and Animations
You can enhance the app by adding weather icons from OpenWeatherMap or using a library like Font Awesome. Use setTimeout() or CSS animations to smoothly show or hide weather results.
Conclusion
This simple weather app project helps you understand how to work with APIs, manage user input, and update the UI dynamically. From here, you can scale up by adding 5-day forecasts, location-based weather, or saving favorite cities using localStorage.
What would you add to make it even better? Would you prefer this app built in React next time? Let me know!
Comments
No comments yet. Be the first to comment!