Advent of JavaScript, Day 8

Advent of JS Homepage

Challenge #8 a live weather app:

Screenshot of app

With the project files downloaded and codesandbox‘d into a live CodeSandbox, I’m ready to get going!

User Requirements

Again, let’s start with the User Requirements and speculate how I can solve these:

  • view weather for the upcoming week

🤔 Umm… these descriptions are getting ambiguous, aren’t they?

When reviewing app.js & index.html, we basically just have art resources:

  • Weather icons
  • Corresponding color palettes
  • Days of the week

So, what’s missing from this description?

  • 🎯 Getting the user’s location

    • From the browser’s location services?

      Permissions can prevent this from being accessible.

    • From an input for City, State, or Zip code?

      • Will this need geolocation to turn this into longitude/latitude?
      • Sometimes you want to look up weather for a different city, but that’s not in the UI.

  • ⛅ Fetching the weather data

    I’ll need to find a public API that accepts longitude/latitude or city/state/zip.

Geolocation

Most browsers support the Geolocation.getLocation API, which responds with { coords: { latitude, longitude } }.

Fetching the Weather Data

I can pass the longitude/latitude to a weather API like weather.gov, but it doesn’t include precipitation.

After consulting github.com/public-apis/public-apis, I realized there is propabilityOfPrecipitation, but from a different API endpoint:

https://weather-gov.github.io/api/gridpoints

Example: https://api.weather.gov/gridpoints/FWD/53,103

🚫 Cancelled

I’m stopping on this one. The difficulty isn’t in the logic or the template – I don’t want to waste time normalizing the weather API.

Personally, I feel like this sort of challenge left too much to change: what would a junior engineer do in this situation? I can unblock myself, but I would’ve made this challenge more about the implementation than in comparing 3rd party APIs:

  • “If you’re in the US, you can make calls to https://some-weather-api.dev/location/{latitude},{longitude}”
  • “If you’re not in the US, there’s a <input> field with the Seattle, WA coordinates already punched in.”
  • “Use the browser’s Geolocation API to get the user’s location.”

Without these prompts (or a structured API), it’s anyone’s guess how to pick the right symbol or which number means what.

Unfinished Demo

Sometimes development means known what problems to solve & when to move on, so you can spend your energy elsewhere. This is one of those – I’m at Legoland 👋