Introduction: Building a Weather App with JavaScript.
In this tutorial, we’ll walk you through the process of building a web application that fetches real-time weather data for any city worldwide and displays it in an intuitive interface.
Weather applications are immensely useful for keeping track of current weather conditions, whether you’re planning your daily activities or traveling to a new destination. By harnessing the power of JavaScript and utilizing weather APIs, we can create a dynamic and responsive application that provides users with up-to-date weather information at their fingertips.
In this project, we’ll be leveraging the OpenWeatherMap (https://openweathermap.org/) a popular source for weather data, to retrieve weather information for a given city. We’ll use asynchronous JavaScript to make API requests, handle the received data, and dynamically update the user interface with the latest weather details.
Throughout this tutorial, you’ll learn essential concepts such as making API calls with fetch, handling asynchronous operations with async/await, manipulating the DOM (Document Object Model) to update content dynamically, and creating event listeners to respond to user interactions.
By the end of this tutorial, you’ll have a fully functional Weather App that you can customize and extend according to your needs. So, let’s dive in and start building your own Weather App with JavaScript!
Steps To Create a Weather App in JavaScript.
Creating a Weather App in JavaScript involves several steps, including fetching weather data from an API, designing the user interface, and updating the UI with the retrieved data. Below are the steps to create a simple Weather App in JavaScript.
- Set Up Your Project.
- Design the User Interface.
- Fetch Weather Data from an API.
- Handle API Response.
- Update the User Interface.
Create an Index.html page and add the below lines of code.
<html>
<head>
<title>Weather APP</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<div class="d-flex flex-row justify-content-center align-items-center" style="width:50%">
</div>
<div class="d-flex flex-row justify-content-center align-items-center">
<div class="p-3 title">
<h2>Weather App In JavaScript</h2>
</div>
<div class="weather__card">
<input type="text" id="searchname" style="width:50%;border-radius: 10px;height: 45px;border:1px green">
<button class="btn btn-info">Search</button>
<div class="d-flex flex-row justify-content-center align-items-center">
<div class="p-3">
<h4 id="temp">°</h4>
</div>
<div class="p-3">
<img src="https://svgur.com/i/oKG.svg">
</div>
<div class="p-3">
<h5 id="day"></h5>
<h4 id="cityname"></h4>
</div>
</div>
<div class="weather__status d-flex flex-row justify-content-center align-items-center mt-3">
<div class="p-4 d-flex justify-content-center align-items-center">
<img src="https://svgur.com/i/oHw.svg">
<span id="humidity"></span>
</div>
<div class="p-4 d-flex justify-content-center align-items-center">
<img src="https://svgur.com/i/oKS.svg">
<span id="wind"></span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 d-flex justify-content-center align-items-center">
<a href="phpforever.com">PHPFOREVER.COM</a>
</div>
<script>
const apiKey = "Your open weather API key";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&appid="+apiKey+"&q=";
const btn = document.querySelector("button");
async function getWeather(){
let serachname = document.getElementById('searchname').value!=''? document.getElementById('searchname').value:'Delhi';
const response = await fetch(apiUrl+serachname);
var data = await response.json();
if(data.cod=="404"){
alert(data.message);
return false;
}
document.getElementById('cityname').innerHTML = "City:"+ data.name;
document.getElementById('temp').innerHTML = "Temprature:"+data.main.temp+'°';
document.getElementById('wind').innerHTML = "Wind Speed:"+ data.wind.speed;
document.getElementById('humidity').innerHTML = "Humidity:"+ data.main.humidity+'%';
}
btn.addEventListener('click',getWeather);
getWeather();
</script>
</body>
</html>
Create a style.css page and add the below lines of code.
body {
background: linear-gradient(rgb(241, 239, 239),lightgray);
color: #444;
font-family: "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
padding: 0;
font-family: "Segoe UI", sans-serif;
font-weight:700;
}
.title h2 {
font-size: 32px;
background: -webkit-linear-gradient(#6dd5af, #161413);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*--------------------------------------------------------------
# Weather Card
--------------------------------------------------------------*/
.weather__card {
width: 800px;
padding: 40px 30px;
background-image: linear-gradient(#BFF098 ,#6FD6FF);;
border-radius: 20px;
color:#3C4048;
}
.weather__card h2 {
font-size:120px;
font-weight:700;
color:#3C4048;
line-height: .8;
}
.weather__card h3 {
font-size: 40px;
font-weight: 600;
line-height: .8;
color:#3C4048;
}
.weather__card h5 {
font-size: 20px;
font-weight: 400;
line-height: .1;
color:#9D9D9D;
}
.weather__card img {
width: 120px;
height: 120px;
}
.weather__card .weather__description {
background-color: #fff;
border-radius: 25px;
padding: 5px 13px;
border:0;
outline: none;
color:#7F8487;
font-size: .956rem;
font-weight: 400;
}
/*--------------------------------------------------------------
# Weather Status
--------------------------------------------------------------*/
.weather__status img {
height: 20px;
width: 20px;
vertical-align:middle;
}
.weather__status span {
font-weight: 500;
color: #3C4048;
font-size: .9rem;
padding-left: .5rem;
}
Some of the screenshots of the APP.
