Build A Weather App Using HTML, CSS and JavaScript
With the power of HTML, CSS, and JavaScript, you can create a simple yet effective weather app that can display current weather conditions for any location. In this tutorial, we will walk you through the process of building your very own weather app.
Step 1: Set up your project structure
Start by creating a new folder for your project and inside it, create three files: index.html, styles.css, and app.js. Your project structure should look like this:
/* Project Folder */ -- index.html -- styles.css -- app.js
Step 2: Create the HTML structure
Open the index.html file and start by creating a basic HTML structure. Add elements for the input field where the user can search for a location, a button to submit the search, and a container to display the weather information.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="Enter location">
<button id="search-btn">Search</button>
</div>
<div id="weather-info">
<!-- Weather information will be displayed here -->
</div>
<script src="app.js"></script>
</body>
</html>
Step 3: Style your weather app
Next, open the styles.css file and add some basic styling to make your weather app look presentable. You can add a background image, change the font styles, and adjust the layout to your liking.
styles.css
body {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
font-family: Arial, sans-serif;
}
.search-container {
text-align: center;
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
width: 200px;
margin-right: 10px;
}
#search-btn {
padding: 10px;
}
#weather-info {
text-align: center;
margin-top: 20px;
}
Step 4: Add functionality using JavaScript
Finally, open the app.js file and write the JavaScript code to make your weather app functional. You will need to make an API request to a weather service provider, retrieve the weather data, and display it on the web page.
app.js
document.getElementById('search-btn').addEventListener('click', function() {
var location = document.getElementById('search-input').value;
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
document.getElementById('weather-info').innerHTML = `
${data.name}
Temperature: ${data.main.temp} °C
Weather: ${data.weather[0].description}
`;
});
});
Step 5: Get your API key
In the JavaScript code, you will need to replace ‘YOUR_API_KEY’ with an actual API key from a weather service provider. You can sign up for a free account and obtain an API key from providers like OpenWeatherMap or WeatherAPI.
Step 6: Test your weather app
Once you have completed the above steps, open the index.html file in a web browser and test your weather app. Enter a location in the input field and click the search button to see the current weather conditions for that location displayed on the page.
Congratulations, you have successfully built a weather app using HTML, CSS, and JavaScript!
Hi ¿how it's going? when you change temperture celcius to fahrenheit the time changes too ¿why is the reason?
Great video love it ❤
miami 85 degrees???
Hey man, This was really very helpful in terms of getting to know about the nitty-gritty details. Also explanation of HTML CSS AND JS was on point.
Just a small request when I searched for Delhi India it wasn't giving the correct output, I believe the time zone properties needs to be changed.
if you could help in this, that will be great ! 🙂 : )
7:55
This was a lot of fun to do and learn from, thank you!! ✨
How can you put a weathericon by using api?
Nice video bruh, i am going to try this.
The code is not working in local
Hi Ope, thanks so much for your tutorial.
Very informative. Appreciate the video!!!