Using Weather API with JavaScript;
Tags: javascript, webdev, tutorial, showdev
Published: 2021-05-30 17:28:45

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

A simple weather app is something everyone should try making as it make us familiar with basics of API handling.

{% codepen https://codepen.io/areeburrub/pen/Rwpjjog %}

### The Layout
So first what we have to create is a layout in which there will be a search box where city name can be entered and a card kind of thing where output can be shown.

The Card can contain City name, temperature, etc.. _Will talk it about in API Section_

Design the cards and input as per your creativity.

### The API we are using
For this weather app we will be using [OpenWeatherMap/API](https://openweathermap.org/api) as it's free and easy to use.

To Start using it you should have an API key so first register yourself on this website and get the keys.

[Click Here to get The API Key after signing up](https://home.openweathermap.org/api_keys)

### Now Come to the JavaScript Part
* First, bring all the DOM elements to JavaScript and add `.onsubmit` eventlistner to Form and get the text input value

* Now we will create a function through which we will pass this city name and it will get the data from API and update the DOM

* There are various methods to use API in JavaScript but we will be using the basic one the `XMLHttpRequest();`

* using XHR in JS is simple just add

<pre>

const xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.send();
xhr.onload = () =>{
	// we can change the data type to json also by
	const data = JSON.prase(xhr.response);
	console.log(data);
};

</pre>

this Handles API
in the place of _url_ use `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR-TOKEN-GOES-HERE`
this will return a object containing info of particular city.

* First `console.log(data);` press `Shift+Ctrl+J` to check the console and observe the object
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsb8e0mox7ot2n7i4b5n.png)
it give a lot of data, Now what we have to do is change DOM accordingly.

* Use `ELEMENT-SELETOR.innerHTML='THE-DATA'` to Change the value in DOM 

* This API also returns a image for the weather and can be accessed from `data.weather[0].icon` it will give the icon name change the src of image to `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png` 
To know more see the [weather-icon docs](https://openweathermap.org/weather-conditions)

### Check the pen to get more idea.
In this I have used [OpenWeatherMap/Current](https://openweathermap.org/current) API to get current data you can also explore other on [OpenWeatherMap/API](https://openweathermap.org/api)

> Please use you *API KEY* don't burden my one too much as it's free to create one but have daily limits.


<hr>


>Read Also:
{% post https://dev.to/areeburrub/why-to-use-react-if-html-css-js-works-fine-370e %}
Follow me for more:
{% user areeburrub %}

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>