Building a weather app that fetches data from any location using a weather API is a fantastic project that can solidify your understanding of web development. In this tutorial, we will create a simple weather app using HTML, CSS, and JavaScript. We’ll fetch weather data from a weather API and display it in a user-friendly format. This project not only enhances your coding skills but also provides a practical application of API integration.
To follow along, you’ll need:
- Basic understanding of HTML, CSS, and JavaScript.
- A code editor (like VSCode or Sublime Text).
- An internet connection to fetch the weather data from the API.
HTML Structure
Let’s start with the HTML structure. This will provide the layout for the weather app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Weather App</title>
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<input type="text" id="location" placeholder="Enter Location">
<button id="getWeather">Get Weather</button>
<div id="weatherResult"></div>
</div>
<script src="script.js"></script>
</body>
</html>
We have a simple container with a title, an input for location, a button to fetch the weather, and a div to display the results.
CSS Styling
Now, let’s add some basic styles in styles.css to make our app look more appealing.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
width: 200px;
margin-right: 10px;
}
button {
padding: 10px 15px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
}
#weatherResult {
margin-top: 20px;
}
The styles center the content and give it a clean, modern look. The button is styled to stand out, and the input field is made user-friendly.
JavaScript Functionality
Next, we will add the JavaScript code in script.js to fetch the weather data from the API and display it.
document.getElementById('getWeather').addEventListener('click', function() {
const location = document.getElementById('location').value;
const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}&units=metric`;
fetch(apiURL)
.then(response => {
if (!response.ok) {
throw new Error('Location not found');
}
return response.json();
})
.then(data => {
const weatherInfo = `
<h2>Weather in ${data.name}</h2>
<p>Temperature: ${data.main.temp} °C</p>
<p>Weather: ${data.weather[0].description}</p>
`;
document.getElementById('weatherResult').innerHTML = weatherInfo;
})
.catch(error => {
document.getElementById('weatherResult').innerHTML = error.message;
});
});
Explanation:
- When the button is clicked, we get the input value and create the API URL using the OpenWeatherMap API (you need to sign up to get an API key).
- We then fetch the weather data and display relevant information like temperature and weather description.
- If the location is not found, we catch the error and display an appropriate message.
Conclusion
Congratulations on building your own weather app! This project has allowed you to practice your HTML, CSS, and JavaScript skills while learning how to work with APIs. Remember, the more you practice, the more proficient you will become. Keep experimenting with adding more features, such as displaying additional weather data or improving the user interface.