In this challenge, we are going to play around with the OpenWeatherMap API! We'll practise AJAX again, and discover how we can ask users for their current position!
You can launch your local server with:
rake webpackGo to localhost:8080 and open your console.
First, go to OpenWeatherMap API and create an account to get your API key. You should find it here. You all will be creating accounts at the same time, which can create some delay in the keys activation by Open Weather. To avoid this problem, share your API key with your buddy to limit the number of keys to activate.
You are allowed to perform 60 calls / minute for free, which should be plenty enough for this challenge.
Read the current weather API doc to find the endpoint we want to call with fetch. Found it? Don't forget that a url always starts with http:// (or https://).
Before coding anything, try opening the url in your browser to see if you get a response. If you get a 401 it means you forgot to pass your API key! You can add it to the url's query string with the appid parameter:
&appid=YOUR_API_KEYOnce you managed to display the API's response in your browser, let's jump into the JavaScript implementation.
Reminder: you should code your JavaScript inside a Stimulus controller
Go back to the Stimulus challenge to follow installation instructions.
With the data sent back by the API, go ahead and build the following page:
To get the temperature in Celsius, you can add &units=metric in your request's URL.
To get the icon image, from the icon id, you can use this URL: https://openweathermap.org/img/w/{iconId}.png
Now let's listen to the submit event on the <form> to get user data from the <input> and customize the URL before making the API call.
Your page should update and display the right data, without reloading! If your page reloads, it means you forgot to prevent something...
Now we want to be able to get the weather for our current location.
First, in the HTML, remove the class d-none from the link:
<a href="" class="d-none position"><i class="bi bi-geo-alt"></i></a>You can see a location icon appear.
We can retrieve the current location of a user with the browser native getCurrentPosition():
navigator.geolocation.getCurrentPosition((data) => {
console.log(data)
})Do you see what you get from your browser? Your coordinates.
Our code currently uses city names to get the weather. Thankfully, there is also an endpoint that takes coordinates in the URL. You can scroll down a little in the doc to find the endpoint that takes a latitude and a longitude as parameters.
So go on, bind the click on the location icon to a new action in your Stimulus controller which will retrieve the current location of the user and update the page accordingly.
If your HTML page reloads, it means you forgot to prevent something...
You are not done yet. When your features work, it's tempting to leave the code as it is. Reorganizing your code to make it maintainable in the long run is key if you want to save tons of time in the future.
Do you see any common code there? You should be able to refactor the code updating the card in a private method. To define a private method in JavaScript, just prepend its name with a #.