How to build a weather app using vanilla javascript

weather app

Building a weather application using javascript is an excellent project for beginners. Through this project, you will learn how to fetch API work and some basics of DOM(Document Object Model). 


In this article, we will discuss how to build a weather app using vanilla javascript that will show you current weather.

To build a weather app we use the third-party service called OpenWeatherMap. This API(Application programming interface) helps you to get current weather conditions in different locations 

To make a weather app follow the following steps:

Step 1: Create an account on OpenWeatherMap and get your API key. 

Step 2: Thereafter, you will create a folder and add files, such as index.html, style.css, and script.js.

Step 3: Now we can fetch data through the city name using the following approaches:

calling API though city name:
http://api.openweathermap.org/data/2.5/weather?q=${cityname}&appid=${API};
and paste your API key on the place of API.

Source code of the weather app:

1. Index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Weather App</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital@1&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="main" id="m">
            <div class="search">
                <input type="text" id="input">
                <button type="submit" class="btn" name="button"><i class="fas fa-search"></i></button>
            </div>
            <img src="" id="weather-icon">
            <h1 id="temperature"><span>0</span>&#176; C</h1>
            <div class="below">
                <div class="inner">
                    <h6 class="inner-1">Cityname:XYZ</h6>
                    <h6 class="inner-2">Country:XYZ</h6>
                    <h6 class="inner-3">Pressure:0hPa</h6>
                    <h6 class="inner-4">Humidity:0%</h6>
                    <h6 class="inner-5">Sunrise:00:00</h6>
                    <h6 class="inner-6">Discription:NONE</h6>
                </div>
            </div>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

2. Style.css

*{
    margin:0;
    padding:0;
    font-family: 'Ubuntu', sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main{
    width: 300px;
    height: 550px;
    box-shadow: 15px 5px 5px whitesmoke,-5px -15px 5px whitesmoke;
    border-radius: 20px;
    position: relative;
}
.search{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%,0%);
    display: flex;
}
.main input{
    width: 200px;
    height: 30px;
    font-size: 20px;
    font-weight:bold;
    color: skyblue;
}
.main button{
    width: 40px;
    height: 32px;
    background: transparent;
    color: skyblue;
    cursor: pointer;
    border:2px solid skyblue;
    transition: 0.1s ease-in;
}
.main button:hover{
    color: white;
    background: skyblue;
}
.main input{
    outline: none;
    border: none;
    border-bottom: 2px solid skyblue;
}
.main h1{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,0);
}
.main img{
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.below{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    border-radius: 20px;
    clip-path: polygon(87% 8%, 59% 17%, 33% 7%, 15% 20%, 0% 9%, 0% 48%, 0% 76%, 0% 100%, 36% 100%, 61% 100%, 100% 100%, 100% 78%, 100% 53%, 100% 18%);
    background-color: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-around;

}
.below h6{
    font-size: 13px;
    margin: 15px;
}
.inner{
    display: grid;
    grid-template-columns: auto auto;
    text-align: center;
}

3. Script.js

let weather_icon=document.getElementById('weather-icon');
let temperature=document.querySelector("#temperature span");
let input=document.getElementById("input");
let btn=document.querySelector(".btn");
let inner1=document.querySelector(".inner-1");
let inner2=document.querySelector(".inner-2");
let inner3=document.querySelector(".inner-3");
let inner4=document.querySelector(".inner-4");
let inner5=document.querySelector(".inner-5");
let inner6=document.querySelector(".inner-6");

weather_icon.src="./sun1.svg";
btn.addEventListener("click",()=>{
    temperature.innerText="Data Fetching....";
    temperature.style.fontSize="10px";
    let cityname=input.value;
    console.log(cityname);
    let url = `http://api.openweathermap.org/data/2.5/weather?q=${cityname}&appid={API}`;
    fetch(url)
    .then(response => response.json())
    .then((data) => {
        console.log(data);
        let temp=Math.floor(data.main.temp-273);
        temperature.innerText=temp;
        temperature.style.color="black";
        temperature.style.fontSize="32px";
        console.log(temp);
            weather_icon.src="./sun1.svg";
            if(data.weather[0].icon == '01n'){
                weather_icon.src="./sun.png";
            }else if(data.weather[0].icon == '02n'){
                weather_icon.src="./rainy.png";
            }else if(data.weather[0].icon == '03n'){
                weather_icon.src="./sun.png";
            }else if(data.weather[0].icon == '04n'){
                weather_icon.src="./sun.png";
            }else{
                weather_icon.src="./sun1.svg";
            }
            inner1.innerText='Cityname: '+data.name;
            inner2.innerText='Country: '+data.sys.country;
            inner3.innerText='Pressure: '+data.main.pressure+' hPa';
            inner4.innerText='Humidity: '+data.main.humidity+"";
            inner5.innerText='Sunrise: '+new Date(data.sys.sunrise).toLocaleTimeString();
            inner6.innerText='Discription: '+data.weather[0].description;
            console.log(new Date(data.sys.sunrise).toLocaleTimeString())
            console.log(new Date(data.sys.sunset))
        });
});


Post a Comment

0 Comments