Creating Weather App using Javascript and API
Apparently, I love to play with HTML and CSS. But then I decided to learn some Javascript. Yeah, so I kinda hate it now but I had to do it. So here it is…… yaayy!!my First Javascript base Weather app using API. I do a bit of styling using bootstrap 5.0.
Now I am going to explain how I do it or maybe it’ll be helpful for you guys. So yeah! Let's start…
Step 1: First you need to create an HTML file where you make your website structure. Then add some bootstrap 5.0 links to style your weather app.
I have provided you with the bootstrap link above, so go there and grab your links to paste into your HTML file.
Now if you scroll down this page a bit, you find CSS and javascript links. Copy these links. Paste the CSS link in the head tag and JS link at the end of body tag of your HTML file
If you scroll down your bootstrap page a bit more, you will find a starter template.
For the time being, I am using the starter template. And yayy! we are ready to create our little weather app.
Step 2: Start writing the structure for your HTML file. Below I used bootstrap form and card. You can check the documentation.
Our web page looks like this now
Step 3: Create a JS file We have completed our structure and style, now we need to add some logic. Now I don't want to display Weather Report card before I enter and submit my input. To do that, I created a JS function.
JS function to display card
First of all access all the components from the HTML document you want to add functionality on by using DOM manipulation.
Now we want some weather data for our app to run. To do that we have to fetch data from API using Javascript. There are tons of free APIs available. The which I use is: Weather API
First, you need to create an account on this website.
After clicking the API doc, you will find this page below. Here it shows many examples of API calls but chose the first one.
Now we need the API Key for fetching data. You can find your API key by clicking on {API key} and copy the key.
Okay, Now we have the API call and key. Yeah we ready to go…
Don't confuse with the city name in the API call in the above image. We want our user to input the city name so he/she can see the result of his/her choice. So now we are able to get our weather data on the console.
In our data, the temperature is given in Kelvin but we want our temperature in Celcius. To do that, I created a function.
It’s Completed wow. Congratulations!! You have created a weather app.
Github Link: https://github.com/toubaijaz19/Weather-App-using-JS-and-API
