Building a Weather App with HTML, CSS, and JavaScript
Weather apps are a fun way to learn web development because they combine many important skills: HTML structure, CSS styling, JavaScript functionality, and working with APIs. Let's create a simple weather app together!
Setting Up Your Files
First, create three files in a new folder:
- index.html
- style.css
- script.js
HTML Structure
Open your HTML file and add this basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<div class="search-box">
<input type="text" placeholder="Enter a city name" id="city-input">
<button id="search-btn">Search</button>
</div>
<div class="weather-info" id="weather-display">
<!-- Weather data will appear here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Styling
Now let's make it look nice with some CSS:
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #74ebd5, #acb6e5);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
.search-box {
display: flex;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px 0 0 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.weather-info {
text-align: center;
margin-top: 20px;
}
.weather-icon {
width: 100px;
height: 100px;
}
.temp {
font-size: 3rem;
font-weight: bold;
margin: 10px 0;
}
JavaScript Functionality
Now the exciting part - making it work with JavaScript:
// Wait for the page to load
document.addEventListener('DOMContentLoaded', function() {
// Get references to the elements we need
const cityInput = document.getElementById('city-input');
const searchBtn = document.getElementById('search-btn');
const weatherDisplay = document.getElementById('weather-display');
// API key for OpenWeatherMap (you'll need to get your own free key)
const apiKey = 'YOUR_API_KEY_HERE';
// Add event listener to the button
searchBtn.addEventListener('click', function() {
// Get the city name from the input
const city = cityInput.value.trim();
// Check if the input is empty
if (!city) {
alert('Please enter a city name');
return;
}
// Make an API call to get the weather data
fetchWeather(city);
});
// Add event listener for pressing Enter key
cityInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
searchBtn.click();
}
});
// Function to fetch weather data
function fetchWeather(city) {
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=" + apiKey + "&units=metric";
fetch(apiUrl)
.then(response => {
// Check if the response is ok
if (!response.ok) {
throw new Error('City not found');
}
return response.json();
})
.then(data => {
// Display the weather data
displayWeather(data);
})
.catch(error => {
// Handle errors
weatherDisplay.innerHTML = '' + error.message + '
';
});
}
// Function to display the weather data
function displayWeather(data) {
const temperature = Math.round(data.main.temp);
const description = data.weather[0].description;
const icon = data.weather[0].icon;
const cityName = data.name;
const country = data.sys.country;
const html =
'' + cityName + ', ' + country + '
' +
'
' +
'' + temperature + '°C
' +
'' + description + '
' +
'Humidity: ' + data.main.humidity + '%
' +
'Wind Speed: ' + data.wind.speed + ' m/s
';
weatherDisplay.innerHTML = html;
}
});
Getting an API Key
For this app to work, you'll need to sign up for a free API key at OpenWeatherMap.org. Once you have your key, replace 'YOUR_API_KEY_HERE' in the JavaScript code.
Testing Your App
Open your HTML file in a web browser, enter a city name, and click Search. You should see the current weather for that location!
Next Steps
Now that you have a working weather app, you can enhance it by adding:
- A 5-day forecast
- Weather animations based on conditions
- Saving favorite locations
- Automatic location detection
Building this weather app has taught you important web development skills including API integration, DOM manipulation, and responsive design. Keep experimenting and adding features to make it your own!
Related Posts
Want more tech content?
Join our newsletter for the latest tutorials, projects, and tech news for kids!