Create Weather App using API

Api is an Application Programming Interface where servers talk to each other . Api data is most common in JSON (JavaScript Object Notation) and in XML(Extensible Markup Language) format.

To create this weather app we use JSON. In JSON format the data is in Objects. To get date we need to Fetch URL and we need API Key.

Fetch URL in simple it is going to given URL using Api key and getting that data.

There are free API's and paid API's. To use API you need to login to that site and get the API key and API key is different for everyone.

To created this Weather app . Basically you need to go Open Weather Map Api , login, go to API and there are different data collection choose Current Weather Data API doc there you can find API key or go to your account and get API key.

api.openweathermap.org/data/2.5/weather?q=H..{APIkey}

After entering above URL with your API key in browser you will be able to see in below format. To see it in organized format you need JSON formatter extension. Download it from google.

Screenshot (3).png

Screenshot (4).png

Then go to your VS code and write some HTML code to take input location. Here I am taking location = Hyderabad as default value.

<input type="text" name="" id="input" value="Hyderabad">
<button id="btn">Search</button>
<div id="temp"></div>

In JavaScript confirm that we are getting data or not

fetch(https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid={APIkey})
.then(response => response.json()
.then(data => console.log(data)

You will be able to see this on your console screenshot.PNG which means we are getting data from the server and we need to access them.

Notice that the output units are in default : Kelvin we need to change it to Celsius by adding &units=metric in the URL and to get temperature value do this

fetch(https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid={APIkey})
.then(response => response.json()
.then(data =>{
var result = data
console.log(result.main.temp)
})

//output
298.4  //Kelvin

//&units=metric is added in the URL to get temperature in Celcius
https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&units=metric&appid={APIkey})
//output 
26  //in Celsius

Get output on the screen

fetch(https://api.openweathermap.org/data/2.5/weather?q=Hyderabad&appid={APIkey})
.then(response => response.json()
.then(data =>{
var result = data
document.getElementById('temp').innerText = result.main.temp + "<sup>0</sup>C"
})

//output will be on screen
26 °C

Similarly get more weather data description, Pressure, Wind Speed and Humidity.

//HTML

<div id="description" class="output-content"></div>
Pressure<div id="pressure" class="output-content"></div>
Wind Speed<div id="wind" class="output-content"></div>
Humidity<div id="humidity" class="output-content"></div>

//JavaScript

//description
doucment.getElementById('decription').innerHTML = result.weather[0].description
//Wind speed
doucment.getElementById('windspeed').innerHTML = result.wind.speed + " meter/sec"
//Pressure
doucment.getElementById('pressure').innerHTML = result.main.pressure + " millibar(mb)"
//Humidity
doucment.getElementById('humidity').innerHTML = result.main.humidity + "%"

HTML and JS part

 <body>
        <h1>Weather app</h1>
        <div class="main">
            <input type="text" name="" id="input" value="Hyderabad">
            <button id="btn">Search</button>
        </div>

        <div class="section">
            <div id="mainsection">
                Temperature<div id="temp" class="output-content"></div>
                <div id="description" class="output-content"></div>
            </div>


            <div class="content">
                Pressure<div id="pressure" class="output-content"></div>
            </div>

            <div class="content">
                Wind Speed<div id="wind" class="output-content"></div>
            </div>

            <div class="content">
                Humidity<div id="humidity" class="output-content"></div>
            </div>

        </div>
    </body>


<script>
const btn = document.querySelector('#btn')
const input = document.querySelector('#input')
const temp = document.getElementById('temp')
const wind = document.getElementById('wind')
const pressure = document.getElementById('pressure')
const humidity = document.getElementById('humidity')



function clickHandler() {

    var URL = 'https://api.openweathermap.org/data/2.5/weather?q='
    var location = input.value
    var api_key = 'Enter your API key'


    fetch(URL + location + '&units=metric&appid=' + api_key)
        .then(res => res.json())
        .then(data => {
            var result = data

            temp.innerHTML =  Math.ceil(result.main.temp) + "<sup>0</sup>C"

            document.getElementById('description').innerHTML = 
             result.weather[0].description

            wind.innerHTML =  result.wind.speed + " meter/sec"

            pressure.innerHTML = result.main.pressure + " millibar(mb)"

            humidity.innerText =  result.main.humidity + "%"

        })
}
</script>

and CSS part

<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
    margin: auto;
    max-width: 500px;
    margin-top: 5rem;
    background-color: rgb(235, 233, 229);
    background-image: url('https://wallup.net/wp-content/uploads/2019/09/323862-nature-rain-weather-skies.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    margin-bottom: 1rem;
}

h1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    color: white;
    font-size: 4rem;
}

.main {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
}

#input {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.5rem;
    margin-top: 1rem;
    border-radius: 2rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

#btn {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border-radius: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.content {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    margin-top: 2rem;
    font-size: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    border-bottom: 2px solid antiquewhite;
}

.output-content {
    text-align: right;
    display: inline;
    font-size: 1.2rem;
    font-weight: 600;
}

.section {
    padding: 2rem;
    background-color: white;
}

#temp {
    font-size: 1.9rem;
    margin-left: 1rem;
}

#description {
    font-size: 1.3rem;
}

#mainsection {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    border-bottom: 2px solid antiquewhite;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    padding: 2rem;
}
</style>

And Here is the Current Weather App

output3.PNG

I hope you learned about how to Fetch API.

View App