How To Build Weather App Using HTML, CSS And JavaScript

Build A Weather App

Hello my friends, Today we are going to learn how to make a current weather app using the HTML, CSS and JavaScript. We are also going to use an API to get the weather Information in any country, but don't worry it's hard because i will teach you later.

By using this app, you can get the details of the weather for the country you want to check Just enter the country name. In addition, you can also get more details such as visibility, temperature feel like, wind speed, humidity and etc of the data by using weather app which we will make it later using API.

You can download the zip file at the end of this article. The zip file included all the images i have use.

Firstly, we need to create a html file to writing some code for display the website. Here's the code for the HTML :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tool-online/icons@v1.7.2/font/bootstrap-icons.css" type="text/css" media="all" />
   <link rel="stylesheet" href="./style.css" type="text/css" media="all" />
   <title>Check Weather</title>
   <script src="main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
   <div class="wrapper">
      <div class="header">
         <a href="javascript:goBack();">
         <i class="bi-arrow-left"></i>
         </a>
         <a href="javascript:goMain();">
         <h1 class="tool-name">Current Weather</h1>
         </a>
      </div>
      <div class="result-card">
         <img src="wicons/sun.png" alt="weather icon" class="w-icon">
         <p class="temp">°C</p>
         <p class="description">Description</p>
         <p class="country-name"><span class="icon"><i class="bi-geo-alt"></i></span>Country</p>
         <p class="feellike">Feels like : <span class="feel-result"></span></p>
         <p class="humidity">Humidity : <span class="humi-result"></span></p>
      </div>
      <form action="javascript:checkWeather();">
      <div class="search-area">
         <p>Country Name <span class="red">*</span></p>
         <input type="text" class="country" placeholder="Please Enter County Name" required>
         <button onclick="checkWeather()">Check Weather</button>
      </div>
      </form>
    
   </div>
</body>
  </html>

And then, we need to make the website beautiful. So that we have to create a CSS file to style the HTML elements. Here is the CSS code.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Nunito', sans-serif;
}
.red{
   color: #FF0000;
}
body{
   background: #FFFDFC;
}
div.header{
   width: 100%;
   height: 55px;
   background: #FFF;
   border-bottom: 1px solid #C4C4C4;
   display: flex;
   align-items: center;
   position: relative;
}
a{
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-decoration: none;
   color: #000;
}
.header i{
   font-size: 24px;
   padding: 15px;
   font-weight: bold;
}
.header h1{
   font-size: 22px;
   font-weight: bold;
}
div.result-card{
   width: 100%;
   height: 350px;
   display: flex;
   align-items: center;
   flex-direction: column;
}
.result-card img{
   width: 120px;
   margin: 30px 0 15px 0;
}
p.temp{
   font-size: 32px;
   font-weight: bold;
   padding: 5px;
}
p.description{
   font-size: 22px;
}
p.country-name{
   padding-bottom: 15px;
}
.icon i{
   padding: 5px;
}
p.humidity,.feellike{
   padding-top: 5px;
}
p.humidity span,.feellike span{
   padding-left: 5px;
}

div.search-area{
   text-align: left;
   padding-left: 15px;
   padding-top: 25px;
   height: 200px;
}
div.search-area input{
   width: 250px;
   height: 35px;
   padding-left: 10px;
   margin-top: 5px;
   outline: none;
   text-decoration: none;
   border: 1px solid #C4C4C4;
   border-radius: 5px;
}
div.search-area input:focus{
   border: 1px solid #2D88FF;
   -webkit-box-shadow: 0 0 5px 2px #D1E4FC;
    -moz-box-shadow: 0 0 5px 2px #D1E4FC;
    box-shadow: 0 0 5px 2px #D1E4FC;
}
div.search-area button{
   width: 150px;
   height: 35px;
   margin-top: 25px;
   border-radius: 5px;
   background: #10A706;
   color: #FFF;
   border: none;
   position: relative;
   transition: 0.6s;
}
.tool-page-footer{
   border: 1px solid red;
   display: flex;
   align-items: center;
   flex-direction: column;
   margin-top: 25px;
   height: 280px;
}
.tool-page-footer .logo{
   width: 100px;
   height: 100px;
   margin-top: 15px;
}
.logo img{
   width: 100%;
}
button::before{
   content: "";
   width: 150px;
   height: 35px;
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   transform: translateX(-100%);
   transition: 0.7s;
}
button:hover::before{
   transform: translateX(0%)
}

Now, it's the most important part. We need to get a current weather api to using in our website. I am using the Open Weather Map 's for my website. If you have better choice you can use another api. As the usually, we need to sign up a account to get a own api key for api, you can't use the api without api key.

Just click the menu button at the top right of the website.

Now, you have to sign up an account and go back to this main page.

After sign up an account, click again the menu button and select API.

And then, subscripe the current weather data Api and get a free api key.

Now we have a api and go back to the website file. Create a JavaScript file with the .js extension. Now this is the JavaScript code.

//run the function when use clicked button
function checkWeather(){
   const outputArea = document.querySelector('.result-card');
   const temp = outputArea.querySelector('.temp');
   const description = outputArea.querySelector('.description');
   const countryName = outputArea.querySelector('.country-name');
   const feelResult = outputArea.querySelector('.feel-result');
   const humiResult = outputArea.querySelector('.humi-result');
   const Searchcountry = document.querySelector('.country').value;
   
   //to access the api
const api = {
   url : 'https://api.openweathermap.org/data/2.5/weather?q=',
   key : '',//your api key here, example : 'appid=abcdefghijklmnopqrstuvwxyz'
   country : Searchcountry,
}
const apiUrl = `${api.url}${api.country}&${api.key}`

//fetching the api data
fetch(apiUrl)
   .then((data) => data.json())
   .then((weather) => showresult(weather))

//put the output result to the html website
const showresult = (data) => {
   let celsius = `${data.main.temp}`;
   let feelslike = `${data.main.feels_like}`;
   const weatherDes = `${data.weather[0].description}`;
   const wid = `${data.weather[0].id}`;
   const wicon = document.querySelector('.w-icon');
   celsius -= 273.15;
   feelslike -= 273.15;
   
   //change the weather icon according to the weather data
   if(wid >= 200 && wid <= 232){
      wicon.src = "../wicons/storm.png";
   }else if(wid >= 300 && wid <= 321){
      wicon.src = "../wicons/Cloudyrain.png";
   }else if(wid >= 500 && wid <= 531){
     wicon.src = "wicons/Cloudyrain.png"
   }else if(wid >= 600 && wid <= 622){
      wicon.src = "../wicons/Snowflake.png";
   }else if(wid >= 700 && wid <= 781){
      wicon.src = "../wicons/mist.png";
   }else if(wid == 800){
      wicon.src = "../wicons/Sun.png";
   }else if(wid == 801){
      wicon.src = "../wicons/Cloudsun.png"
   }else if(wid >= 802 && wid <= 804){
      wicon.src = "../wicons/Cloud.png"
   }
   
   //innerhtml
   temp.innerHTML = `<p class="temp">`+ celsius.toFixed(2) + `°C</p>`;
   feelResult.innerHTML = feelslike.toFixed(2) + `°C`;
   humiResult.innerHTML = `${data.main.humidity} %` ;
   countryName.innerHTML = `<p class="country-name"><span class="icon"><i class="bi-geo-alt"></i></span>${data.name}</p>`;
   description.innerHTML = `<p class="description">` + weatherDes.toUpperCase() + `</p>`;
   
   
}
}

Download ZIP

Download Files

Please wait..

If the download didn't start automatically, click here.

Coding World

How To Build Weather App Using HTML, CSS And JavaScript

Build A Weather App

Download ZIP

Post a Comment

Imagz Blogger Theme With FREE