How to use weather api in local weather project

How to use weather api in local weather project
0.0 0

#1

Hello there, I am really stuck and can’t understand a thing about how those API’s work.I have read some articles here and there about the weather app project but they are using different weather api’s and they are writing their own code.
How can I use the API freecodecamp provides to get weather info, and how to display it on the page?
Will I need a different piece of code to get the longitude and the latitude too?


#2

Here is a pen to help people understand asynchronicity but it also deals with the weather API. Don’t just copy it - understand it. Ask if you have questions. Understanding asynchronicity at this point is important too.

As to how to display it on the page, that is up to you. The AJAX call just gets the data and loads it into an an object that you can access with javascript. Now you have to decide how to output that data to the screen, presumably with some jQuery targeting some HTML elements.


#3

Hey there, thanks for the reply, I will check it out!

For now, I have done some «improvements" to my page, can you check it out? https://codepen.io/dimitris51/full/jzjaOX/
I have created two functions which run as soon as the website loads(with the window.onload property) and they display on the page the longitude and the latitude. The thing now is to get those numbers-the coordinates- and add them to the https://fcc-weather-api.glitch.me/api/current?lon=:longitude&lat=:latitude “longitude” and “latitude” position and then extract the info and display them on the page.


#4

OK, that works. Most people use jQuery so they simply put the functions inside the $(document).ready… function, but if you’re not using JQ, then window.onload does much the same thing.

One thing, the navigator object is one way to get location. I find it a little difficult to develop with because often if you make several calls to it it will start hanging up. In my example I show a different way to get position that I find more reliable. But either works. If you really want to use navigator, I’d hard code in your position for dev.

The thing now is to get those numbers-the coordinates- and add them to the https://fcc-weather-api.glitch.me/api/current?lon=:longitude&lat=:latitude “longitude” and “latitude” position and then extract the info and display them on the page.

Well, that url is just a string. How to do you add strings together to make bigger strings? How do you do that with variables?

The other issue you’re going to run into is scope. Realize that those variables are only defined inside the callback for your location. That is where you need to use them. (There are other ways to deal with this, but this is the most basic.) That is part of what I’m trying to explain in that pen I provided. I think what that pen has to teach is part of what you need to learn right now.