How to make a weather App in JavaScript

No wonder, calling a server using an API is one of the coolest things a web-developer comes through in his path towards web-development. An API (Application Programming Interface) is a computing interface that defines interactions between multiple software intermediaries. Basically it helps us to retrieve raw data from the client-server.

So in this project, the HTML and CSS will serve the visuals to the user where he will see the results and the text area where the input will be taken. The weather web-app will display the city name, the country name, the weather of the city, the temperature in Celsius, and also the max/ min temperature. Whereas the JavaScript part will be the heart of this project which will make a link to the client site, fetch the details using API keys, and will provide as well as to display the necessary information for our project.

The HTML and CSS part

So, in the HTML part, it has an input tag and several div classes to create slots for displaying the information which we want on our weather web-app.

<input type=”text” autocomplete=”off” class=”search-box” placeholder=”Search for Place”>

The input tag takes in text element which has a parameter of no autofill with a class and a placeholder.

<div class=”hidden”>

<section class=”location”>

<div class=”city”></div>

</section>

<div class=”current”>

<div class=”temp”></div>

<div class=”weather”></div>

<div class=”hi-low”></div>

</div>

With the help of several classes, you can provide spaces/positions in the HTML where you want to display which information processed in the JavaScript file.
For example, the temp class will hold the current temperature of the given city searched by the user.

While working on the CSS file we can make sure that each and every element has proper styling which will make it visible properly on our page. In addition to that, you can also make it responsive using media queries so that it can be easily viewed on other devices too!

Working with JavaScript for Web-App

After linking your JavaScript (.js) file to your HTML, declare all the classes as constant with the help of DOM manipulation. So that you can easily access them while working on your JavaScript file.

const searchBox = document.querySelector(“.search-box”);

Now that you have declared all the constant get your API keys from an open weather report provider. You can find many free API providers which will give you all the resources you want.
I used OpenWeatherMap to get my API keys (make sure you read the guide to have better insights about this API provider). Once you get your keys declare them as const values with a base URL in your JavaScript file.

const api = {

key: “4930558afcaeeec1874********”,

base: “https://api.openweathermap.org/data/2.5/"

//you can find base url in the guide

}

After this, you have to fetch the information from the client-server providing with promises and this should happen at the time of an event. So, declare an event with a function call.

searchBox.addEventListener(‘keypress’, getQuery);

//you can use "click" as an event too!

Then define the function with an argument passed in it. Which will basically fetch the data from the server after taking values from the user and return the value in .json format and call a function with all the data in it, which later on you can edit and display as per your choices

fetch(`${api.base}weather?q=` +searchBox.value+ `&units=metric&appid=${api.key}`)

.then(response => response.json())

.then(dataDisplay) ;

//fetching data (metric Celsius)

In the above code, there is a base URL called from the const object which is passed with a parameter of search box value, and units are set to metric (to get value in Celsius.
After fetching the data there are promises to return the response in .json format and then another promise of calling a function to display data with all the retrieved data from the client.

Once you send the data to function check whether it gives an error value or not. If it gives an error then display that the entered city name is wrong or else proceed with the retrieve data and sort them from the main values.

For example:

If you want to get the name of the city and country

response[‘name’] + ‘,’+ response[‘sys’][‘country’]; or

response.name + ‘,’+ response.sys.country;

This will point out the exact data and you can save it to a const.

searchCity.innerText = response[‘name’] + ‘,’+ response[‘sys’][‘country’]; //1st way

searchTemp.innerText = response[‘main’][‘temp’] + String.fromCharCode(176) + ‘c’;

searchWeather.innerText = response.weather[0].main; //2nd way

searchHiLow.innerText = response.main.temp_max + String.fromCharCode(176) + ‘c’+ ‘/’+ response.main.temp_min + String.fromCharCode(176)+ ‘c’

Similarly get all the data separated into different const values, like the min/max temperature, weather, temperature, and all the necessary things you want to display.

Finally, put them inside the classes of HTML file so that it can be viewed on the main page!

Once you are done you are good to go with you Weather Web-App.
You can find the link of my Weather Web-App and the repository too!
Search for more API’s providing different services and manipulate the data to get a better understanding.