How to Build A Weather App Using HTML CSS and JavaScript
Are you eager to learn how to build a weather app in HTML, CSS, and JavaScript? Look no further! In this comprehensive guide, we'll walk you through the process step by step.
Building a weather app in HTML, CSS, and JavaScript is a fantastic project for budding developers. Not only does it allow you to hone your skills in web development, but it also gives you a practical application to showcase your abilities.
Getting Started
First things first, let's set up our project structure. Create a directory for your project and organize it as follows:
project/
|-- index.html
|-- style.css
|-- script.js
Once your project structure is in place, open up your text editor and let's dive into the code!
HTML Markup
The HTML markup provides the structure for our weather app. Here's a basic template to get started:
<!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="weather-app">
<h1>Weather App</h1>
<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<div class="weather-info" id="weather-info"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
CSS is essential for making our weather app visually appealing. Let's add some styles to our HTML markup:
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 20px;
}
.weather-app {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
.weather-app input {
width: 80%;
padding: 10px;
margin-bottom: 10px;
}
.weather-app button {
padding: 10px;
cursor: pointer;
}
.weather-info {
margin-top: 20px;
}
.weather-info p {
margin: 5px 0;
}
Adding Functionality with JavaScript
Now it's time to bring our weather app to life with JavaScript. We'll add functionality to fetch weather data and display it dynamically:
async function getWeather() {
const city = document.getElementById('city').value;
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
const data = await response.json();
if (response.ok) {
document.getElementById('weather-info').innerHTML = `
<p><strong>City:</strong> ${data.name}</p>
<p><strong>Temperature:</strong> ${data.main.temp} °C</p>
<p><strong>Weather:</strong> ${data.weather[0].description}</p>
`;
} else {
document.getElementById('weather-info').innerHTML = '<p>City not found!</p>';
}
}
Full Code Example
Here is the full code for our weather app:
<!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>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
margin: 0;
padding: 20px;
}
.weather-app {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
.weather-app input {
width: 80%;
padding: 10px;
margin-bottom: 10px;
}
.weather-app button {
padding: 10px;
cursor: pointer;
}
.weather-info {
margin-top: 20px;
}
.weather-info p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="weather-app">
<h1>Weather App</h1>
<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<div class="weather-info" id="weather-info"></div>
</div>
<script>
async function getWeather() {
const city = document.getElementById('city').value;
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
const data = await response.json();
if (response.ok) {
document.getElementById('weather-info').innerHTML = `
<p><strong>City:</strong> ${data.name}</p>
<p><strong>Temperature:</strong> ${data.main.temp} °C</p>
<p><strong>Weather:</strong> ${data.weather[0].description}</p>
`;
} else {
document.getElementById('weather-info').innerHTML = '<p>City not found!</p>';
}
}
</script>
</body>
</html>
Live Preview
Here is what the weather app will look like: