How to make a Weather App Using APIs in JavaScript

Today I’m making a simple Weather App built using vanilla JavaScript & Open Weather API. It is called WeatherLy and it gives the current weather info of all the cities in the world as soon as you enter the city name.

What You’ll Learn In This JavaScript Weather App API Tutorial:

  1. Basic Markup
  2. Specifying the styles
  3. Using JavaScript Fetch method to get the data from API

Selecting an API for our Weather App.

First, we have to find a provider which will let us use its data. Luckily we have an amazing provider “OpenWeather” which allows you to use their database for free.

So let’s see how to use OpenWeather API

Step 1 : Sign Up on OpenWeather API

Go on https://openweathermap.org/

Create an account

Sign up for API

Select the free package

Open Weather Map API Pricing

Before continuing, please make sure that you’ve registered for an API key.

Step 2 : Defining the markup for our Weather App

Here’s the basic markup:

<div class="view">
        <h2>WeatherLy</h2>
        <form>
            <div class="search">
                <input placeholder="Enter a Location" type="text" id="query">
                <button>Submit</button>
            </div>
        </form>
</div>

We are using material icons in this project

you can get the link here: https://fonts.googleapis.com/icon?family=Material+Icons

All the details are added to their specific tags:

   <div class="details">
            <div class="img">
                <img src="" alt="weather-icon" class="icon">
            </div>
            <div class="weather">
                <div class="location">
                    <span class="material-icons">
                        place
                    </span>
                    <h3>Location </h3>
                    <span class="name"></span>
                </div>
                <div class="temperature">
                    <span class="material-icons">
                        thermostat
                    </span>
                    <h3>Temperature </h3>
                    <span class="temp"></span>
                </div>
                <div class="description">
                    <span class="material-icons">
                        air
                    </span>
                    <h3>Wind Speed </h3>
                    <span class="desc"></span>
                </div>
            </div>
        </div>

The Styling looks like this :

The first section looks like this :

Weather App
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap>');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
    background: #17427a;
    color: #f4f4f4;
}
.view{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
h2{
    padding: 10px;
    font-size: 32px;
}
form .search{
    padding: 20px;
    display: flex;
    flex-direction: column;
}
form .search input{
    all: unset;
    padding: 10px;
    background-color: #f6f6f6;
    color: #222222;
    border-radius: 4px;
    margin-bottom: 10px;
}
form .search button{
    all: unset;
    padding: 10px 30px;
    background: linear-gradient(135deg, #2685a2 -50%, #286fe0 180%);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}
form .search button:hover{
    transform: scale(1.03);
}

The Details Look like this :

The data in this section will be injected using JavaScript

Weather Details
.details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    width: 100%;
    visibility: hidden;
}

.details .img{
    margin: 10px;
    background-color: #bbbbbb;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #f4f4f444;
}

.details .weather{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px;
    width: 100%;
    justify-content: space-around;
}
.details .weather div {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.details .weather div span {
    margin: 10px;
    font-size: 32px;
}

Step 3 : Adding the JavaScript to our Weather App!

  1. Selecting all the elements from the HTML
const btn = document.querySelector('button')
const details = document.querySelector('.details')
const name = document.querySelector(".name")
const desc = document.querySelector(".desc")
const tempC = document.querySelector(".temp")
const iconHolder = document.querySelector('.icon')
const input = document.querySelector('#query')
  1. Adding your API key:
const api = 'Your API key goes here'
  1. Preventing the form from submitting:
btn.addEventListener('click', (e)=>{
    e.preventDefault()
})

Performing our request: First, we will create a query variable that stores the value of the input box. Then we will also define the URL from where we are calling the data.

const query = input.value;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${api}&units=metric`

Fetching the data from the URL: Fetch method calls the raw data from the API in the form of JSON. Next, we convert the JSON data to object so that we can access the data by using res.json() Once we convert the data into objects we can access the things which we want.

fetch(url)
        .then((res)=>{
            return res.json();
        })
        .then((data)=>{
            const temp = data.main.temp
            const place = data.name
            const icon = data.weather[0].icon
            const speed = data.wind.speed
            const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`
            tempC.textContent = `${temp}°C`
            name.textContent = `${place}`
            desc.textContent = `${speed}`
            iconHolder.src = iconUrl
            details.style.visibility = "visible"
        })
        .catch((err)=> alert("Enter valid addresss!"))

Here’s the related CodePen demo: https://codepen.io/saketkhare2000/pen/vYxQdaL

You can also check the video tutorial here: https://youtu.be/vV6-YUhQcjI

Leave a Reply