Weather App Using an API
In this session, we’ll build a weather app step by step. This app will fetch live weather data using the OpenWeather API and display it dynamically on the webpage. It’s a practical way to understand how APIs work in real-world applications.
What You’ll Learn :
How to use an API key to authenticate requests.
How to send an API request and handle the JSON response.
How to dynamically update a webpage using JavaScript.
Step-by-Step Guide
Step 1: Get Your API Key
Sign up on the OpenWeather API website to generate your unique API key.
Step 2: Build the Frontend (HTML + CSS)
Create the HTML and CSS files for the app.
HTML Code:
<!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 id=”city” type=”text” placeholder=”Enter city name”>
<button id=”getWeather”>Get Weather</button>
<div id=”result”>
<h2 id=”cityName”></h2>
<p id=”temperature”></p>
<p id=”humidity”></p>
<p id=”windSpeed”></p>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS Code (style.css):
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
margin: 0;
padding:
0; }
.container {
margin-top: 50px;
}
input {
padding: 10px;
width: 200px;
}
button {
padding: 10px;
margin-left: 10px;
background-color: #007bff;
color: white; border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
}
h2, p { margin: 5px;
}
Step 3: Fetch Data Using JavaScript
Use JavaScript to fetch weather data from the OpenWeather API and update the app dynamically.
JavaScript Code (script.js):
document.getElementById(‘getWeather’).addEventListener(‘click’, function () {
const city = document.getElementById(‘city’).value.trim();
const apiKey = ‘your_api_key’; // Replace ‘your_api_key’ with your actual
OpenWeather API key
const url = `
https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
if (!city) {
alert(‘Please enter a city name.’);
return;
}
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(‘City not found’
}
return response.json();
})
.then(data => {
document.getElementById(‘cityName’).textContent = `City: ${data.name}`;
document.getElementById(‘temperature’).textContent = `Temperature:
${data.main.temp}°C`;
document.getElementById(‘humidity’).textContent = `Humidity:
${data.main.humidity}%`;
document.getElementById(‘windSpeed’).textContent = `Wind Speed:
${(data.wind.speed * 3.6).toFixed(1)} km/h`; // Convert m/s to km/h
})
.catch(error => alert(error.message));
});
Step 4: Test the App
Save all the files (index.html, style.css, and script.js) in the same folder. Open the index.html file in your browser. Enter city names like “New York” or “London” in the input field and click the Get Weather button.
Observe the live weather details being displayed dynamically.