Many public APIs require some degree of authentication in order to use them. Learning how to set up API authentication and how to use API documentation will open up access to huge amounts of free, useful data.
In this lab, we will be practicing the use of an API that requires authentication as well as explore how to present API data in multiple ways.
- Build a page that uses data from the Open Weather Map API to display current and forecasted weather information
- Learn how to use
fetch
to get up-to-date data - Bonus: Render a line chart using Chart.js to provide a visual display of fetched data
First, sign up for an account to generate an Open Weather Map API key
here. You'll use this key for API calls. It
may take around 10 minutes before your API key is fully activated, so in the
meantime, you can start writing out the JavaScript inside js/index.js
, using
the provided functions.
This API uses URL parameters for queries, meaning that the whatever is entered into our form will need to be included with the URL, along with your API key. Use the API documentation to find examples of how to structure these parameters.
- In
index.html
, there is an existing form for input of a city name. Create an event listener that, on 'submit', sends a fetch request to the Open Weather API. The beginning of the url for your fetch request should be the following:
`https://api.openweathermap.org/data/2.5/weather?`
- Upon successful response, use the provided table and ids within
index.html
to populate the DOM with weather information
Note: It is a good idea to console.log
the JSON output of your fetch requests. If
you are testing your code and sending frequent API requests, you may hit your
rate limit and stop receiving data. Logging the JSON output will let you see
if this is occurring. If you have hit your limit, wait for a few minutes before
trying again. Trying too many times while at a rate limit may cause your API key
to be deactivated for up to 24 hours.
-
Make sure your code handles any spaces entered into your form. Submissions like 'New York' should return the correct weather data. For URL parameters, these spaces are typically represented with a
+
symbol. This API is not perfect, so while 'New York' will work, fetching with a term like 'New York City' will return an error regardless of what you do. -
Create a second fetch request for a different endpoint on the Open Weather API, the five day forecast. This time, use the following as a base for your fetch URL:
`https://api.openweathermap.org/data/2.5/forecast?`
In the returned JSON data, there will be a key, list
, an array of weather
information for every three hours for the next five days. Iterate over this
array and display each three hour forecast as its own div
that displays
dt_txt
, temp
, and humidity
. Append these div
child elements within the
<aside>
element in index.html
.
- Bonus: Using the five day forecast data and the ChartJS library, render
a line graph in
index.html
. The library has already been made available inindex.html
and the canvas element is provided, but you'll need to use the examples in the ChartJS documentation to figure out how to display the chart on the page. Within thejson.list
from the weather API, use thedt_txt
values as labels andmain.temp
as data.