Our app is very simple, but covers topics like
Unix timestamp conversion, the
fetch API, and more.
All code for this project can be found here on GitHub.
1. A prompt for your US zip code:
2. Some weather data about today's forecast in your area:
File and Directory Setup
First, we'll set up the container for us to inject HTML elements to the DOM.
Next, we'll add a
script.js file. I've put mine in within a script directory.
Weather Account Sign Up
Head over to https://openweathermap.org/ and sign up for a free account. There are a few tiers and product offerings, but the free version is perfect for our use.
Click on your profile and My API Keys.
From here you should see a default key waiting for you. You're also welcome to generate another API key if you prefer. Name it whatever you like.
Visit their documentation to learn about the shape of the returned data, what you have access to, and what parameters should be included in your API call.
You will need to confirm your email address with them. Conveniently, they provide a test API GET request with your API in it. I recommend downloading and using something like Postman or Insomnia to confirm your API keys are working. There may be a 2-hour delay, but most users report only a few minutes of wait time.
Fetch the Data
We are going to begin by prompting the user for their zip code. Once we have that number, we will build our API Get request.
A few quick callouts:
- We've exposed our API key. Ideally this should be saved in something like a
.envfile and not published with it exposed. Imagine if you were paying for calls and someone used your API key to rack up a giant bill! In this example, I don't mind exposing it.
- Our code is wrapped in an asynchronous function called
main(). Without this wrapper, we could not save the asynchronous API call to a variable, since promises can't return values globally.
- After setting the variables, we wrap everything else in a try/catch block for a basic error handling.
- We are calling a
getJsonDatafunction that we've written to return a parsed data
- We make use of
fetch's second (optional) argument that resolves any
CORSerrors we may receive when making API calls to an external server.
- In the
catchblock, I alerted the user that something went wrong and restarted the app by calling
In the try block, go ahead and
jsondata variable to see it in the console.
Render the Data With String Interpolation
Ok, here comes the fun part! Grab each node that we created at the beginning and add
.textContent that utilizes the returned
jsondata. (This should be within the
I added sunrise and sunset data to mine. This requires a quick little Unix timestamp conversion that I wrote about here.
I also found that appending all the nodes to the container div was awful repetitive. To keep things nice and D.R.Y., I wrote a quick function to loop through an array of created nodes and append each:
We've done a lot! Remember, all code for this project can be found here on GitHub.
We made an account with Open Weather Map, set up API keys, called some weather data, formatted and injected it to the DOM, added a few helper functions, and implemented a basic error handling mechanism.
Now it is up to you to style it up and make it something worth sharing with the world!