WeatherApp

Weather App using HTML, CSS, Bootstrap, jQuery, and the Open Weather API.

▶ View the site

Note

Archived and no longer maintained, but working. Both API keys this app shipped with have since been deactivated — OpenWeatherMap returned 401 Invalid API key, and Google Maps returned REQUEST_DENIED — which left the page rendering its layout and then sitting empty.

There is a certain irony there: the notes below describe migrating off the Yahoo Weather API after it "suddenly stopped working." The replacement met the same fate.

Rather than leave it dead, it now reads two keyless APIs instead:

• Open-Meteo for conditions and the forecast.
• BigDataCloud for the reverse geocode, replacing the Google Maps SDK — so no Maps script, and no API key anywhere in the repo.

The DOM code is untouched. Each response is converted back into the shape OpenWeatherMap returned, including a map from WMO weather codes to the OpenWeatherMap condition IDs that owfont's icon classes are keyed on. The pre-fix state is tagged v1-original-site.

Original notes

This project previously used the Yahoo Weather API, which suddenly stopped working. Once I discovered this, I decided to switch the API to Open Weather. The app shows the current weather conditions based on your location, and there are buttons in 3 hour increments for the next 24 hours to get the forecast at those times.

All of the calls to the API are done jQuery.

I used some external tools to assist, especially because many of the responses from the Open Weather API do not come back in a user friendly format.

1. The date returned by https://momentjs.com/he Open Weather API is in Unix time. Rather than reinvent the wheel to parse it, there is a great JS utility called moment.js.
2. The current conditions come back in all lowercase. My thought was that title casing would be much better and I found a nice module that would convert strings to title casing. /* To Title Case © 2018 David Gouch | https://github.com/gouch/to-title-case */
3. The Open Weather API returns the wind direction in "degrees". A quick search found some nice code that will convert it for me so I didn't have to write a very long if or switch statement. https://gist.github.com/felipeskroski/8aec22f01dabdbf8fb6b
4. Believe it or not, the Open Weather API does NOT return the state associated with the city. The eaisest way to get this was to make a call to one of Google's map/location APIs.
5. Open Weather's icons are terrible, and I found "Open Weather Font" and use their icons instead. https://websygen.github.io/owfont/

How it works

getLocation() asks the browser for coordinates via navigator.geolocation, then fans out to three things: a reverse geocode for the place name, the current-conditions call, and the forecast call that populates the 3-hour buttons.

File	Role
js/location.js	Geolocation entry point, fans out to the rest
js/geocode.js	Reverse geocode → city, state, zip
js/weatherCalls.js	Current + forecast requests, and the conversion
js/timeButtons.js	The 3-hour forecast buttons
js/degToDirection.js	Wind degrees → compass points
js/titleCase.js	Title-cases the lowercase condition strings
js/variables.js	Shared state

The old Google geocode indexed address_components by fixed position ([3], [5], [7]) — which worked for the response shape it was written against, and is exactly the kind of thing that breaks when an API adjusts its output. It's gone with the rest of the Maps code.

Running locally

No build step, though the SCSS needs recompiling if you change styles:

python3 -m http.server 8000   # then open http://localhost:8000

Geolocation requires a secure context, so localhost works but a LAN IP won't. Both APIs are keyless and send Access-Control-Allow-Origin: *, so they work the same locally as on the deployed site.

About

Kept as-is apart from the swapped APIs. Linked from the archived version of my original portfolio; my current portfolio is here.