Creating a Weather App using API-JavaScript.
This is my favorite project so far because this taught me how to fetch frikin data from a server by using JavaScript. Okay so when my tribe member told us we have to make a project based on API calling I freaked out a lil bit because I had no idea what he was talking about and I said “No, I’m not doing that right now I don’t even know what an API is.” and he said “Then learn it it’s easy 😉” I was like well alright i’ll figure it out and YESS I did yayy.
Here is the preview of my weather app. And in this blog I’ll write about how you guys can also create a cool weather app.
Step 1: Create an HTML file
This is where you’ll make the basic structure of your weather App. In my case I made an input field where user will enter the location , a search button and another <div> to display temperature and description.
Step 2: Create a CSS file
This step is optional because this is where all the styling part of the app will be done so you can style it according to your choice or you can just copy the source code from my github repo.
Step 3: Create a JS file
This is where all the weather fetching will happen. To fetch data from a server you need an API. There are tons of free API’s available. For weather I’ve used Open Weather API.
Click on the above link and this will direct you to the home page that will look like this.
Create an account on this website and click on API doc.
You’ll see this page
Scroll down a bit and you’ll find example API calls
Now just copy any one of them and click on {API key}.
Click on API keys and you’ll have a unique key generated for you if you are signed in. Copy that key for now you’ll need that.
Ok, so you are all set to paste these things in JavaScript file now lets do it.
Okay, so this is a lot going on in here don’t worry i’ll explain each line.
First of all access all the components from html document you want to add functionality on by using DOM manipulation.
Now, what you want to do is when a user enter location and ‘Click’ on search they get the temperature and description of that location.
Add an event listener on a button and create a function, within that function we are using fetch() method and past the API link you copied from open weather.
If you notice there are some changes made in the link i:e `${inputvalue.value}` instead of London because we want the temperature of the location entered by the user. Secondly, you’ll get the temperature in Kelvin by default therefore, you have to add &units=metric to convert in Celsius. Finally remember the key you copied? yeah, that, past it instead on {API key} and your link will also start looking like this. 😁
Console log this data and you’ll see the data on the console.
Now it’s time To display the weather data on html page. Now, if you look at the data, and yes that’s a lot of data and we don’t want all of it. We just want the temperature and description. Have a look at the code and see how you can get the desired endpoints.
Create a function called displayData or name it whatever you like. Now as you can see the temperature is inside the main.
Take a look at the code here. By using the argument (weather) we will access temp from main, and will display it on the innerText of temp div created in html document.
Similarly, we want the description and that’s inside weather Array at index [0] and display it on the html document by using inner text.
And you are done. See it was easy right???
You can check out my app here.
Github repo link: https://github.com/Alwaz/Weather-App
