This is an older article I wrote a year ago. I'm just moving somethings over from Medium.
I started my project by deciding what API I wanted to use for my project. These projects are built and submitted in codepens and to minimize the number of external assets I’d be using I knew I wanted an API that came with weather icons. After doing a little research and seeing some feedback from fellow campers I decided to use the OpenWeatherMap API. Setting up an account was as easy as it could be and their free accounts allow up to 7,200 calls per day and caps calls per minute at 60. This obviously wouldn’t be ideal for a high traffic product for the sake of this project it would work splendidly.
And now on to the fun stuff.
I started off my JS by creating empty variables of the information I would want to call and manipulate later which were icon, temp, and location. I also created a variable called APPID and in it, I stored my API key so I could easily call it when needed rather than typing the 32 digit alphanumeric sequence each time.
Once I had my global variables set I wrote a function that would update the appropriate divs with the weather information the API would later retrieve. I was able to test that this was working by using strings and numbers since I hadn’t fully set up the API.
With the update function working properly I then set up a window.onload function that would gather the users’ geolocation using navigator.geolocation when the screen is loaded. Inside the navigator.geolocation I wrapped the latitude and longitude information inside a call for the function updateByGeo, which was the next step. The onload function also grabs the HTML elements that will need to be targeted.
Now to build the updateByGeo function that will create the URL needed to use the OpenWeatherMap API to gather the weather information. This function is fairly simple. It simply creates a variable called URL and creates the URL needed for the API and concatenates the latitude and longitude needed, as well as your API key. At the end of the function, there’s a call for a sendRequest(URL) which takes the URL we just created earlier in the function. Building that sendRequest is next.
Building a JSON send request was new territory for me and I had to rely on a lot of outside resources to accomplish this part.
Essentially what happens in this function is it takes the url we created in the updateByGeo function which uses the user’s geolocation and sends it to OpenWeatherMap API and from there we can parse through the information we receive and deliver it back to the user.
Remember earlier where we built a function that would update the div’s with the appropriate information? Here is where that information comes in! Above in the weather.icon, weather.loc, and weather.temp objects you can see where we are retrieving the weather information from the API.
We still have a few things left to do though. OpenWeatherMap delivers temperature in Kelvin so we’ll need to convert that to either Celsius or Fahrenheit. We also need to allow the user to swap back and forth between Fahrenheit and Celsius.
You may have noticed above that our data.main.temp was wrapped in a K2F function. That’s because I had already written the function before writing this. I’m no scientist or mathematician so for this I had to google the conversion formula. Once you have that formula you can simply drop it into a function with the call ‘return.’ One thing to remember is the default setting will give you numbers will give you decimal points for days so you may want to put the equation in a Math.floor.
Since we’re already in math mode we’ll go ahead and build functions to convert Celsius to Fahrenheit and vice versa. Again, a quick google search will give you the formula you need and then you can drop it into a function.
We’re almost there!
If you’ve made it this far, thanks for taking the time to read this and I hope it has helped anyone who ended up here because they were looking for assistance.
My next project is a wikipedia viewer for Free Code Camp and there will be a follow up blog to that a well!