How to Code the Infamous Weather App

Dec 5, 2022 | Blog, JavaScript, Featured

Our app is very simple, but covers topics like async/await, for/of loops, Unix timestamp conversion, the fetch API, and more.

Let me begin by showing you what our (almost) entirely JavaScript site will look like. Keep in mind that you can easily add whatever weather data you wish to this code, and even style it to make it look really professional.
All code for this project can be found here on GitHub.

The Project

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. scripts/script.js

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:

1. We've exposed our API key. Ideally this should be saved in something like a .env file 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.
2. 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.
3. After setting the variables, we wrap everything else in a try/catch block for a basic error handling.
4. We are calling a getJsonData function that we've written to return a parsed data string to JSON.
5. We make use of fetch's second (optional) argument that resolves any CORS errors we may receive when making API calls to an external server.
6. In the catch block, I alerted the user that something went wrong and restarted the app by calling main() once more.

In the try block, go ahead and console.log the 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 try block.)

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:

Summary

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!