How to make a Weather App using HTML, CSS, & JavaScript - Using APIs in JavaScript - Weather App

Saket Khare — Fri, 14 Oct 2022 09:32:56 +0000

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 API Tutorial:

Basic Markup
Specifying the styles
Using JavaScript Fetch method to get the data from API

Selecting an API for our APP

First we have to find a provider which will let us use it's 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 Open Weather Map

Create an account

Select the free package

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

Step 2 : Defining the markup

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: 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 :

]

@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

.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!

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')

Adding your API key:

const api = 'Your API key goes here'

Preventing the form from submitting:

btn.addEventListener('click', (e)=>{
    e.preventDefault()
})

Performing our request: First we will create a query variable which stores the value of 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 in the 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!"))

DEV Community: Saket Khare