FCC Speed Run Challenge: Local Weather Viewer

It took me longer than I expected to actually settle in and work on this, but here is the second project in my quixotic attempt at speed running the FCC content: the local weather viewer!

Stage 1: Design

I decided to not go overboard on the design of my page, and instead just took basically the exact same format from the quote generator and put the weather viewer inside it. However, actually getting everything arranged how I wanted took a ton of the time I spent on this project. Opposite of the last time, I definitely put more time into the HTML/CSS than I did the JavaScript. In particular, deciding how I wanted to arrange the different pieces of data was time-consuming.

I also wanted to figure out how to make the elements, particularly the box containing the weather, look a little less two dimensional. I may have overdone it a bit, but I liberally applied box-shadow to give more impression of depth.

Stage 2: Getting Data from the API

As I mentioned, this part took me significantly less time than the previous project. The hardest part was finding an API that I could figure out and also didn’t make me pay. I settled on Apixu, which was very straightforward. After choosing the API, it was just a matter of reading the documentation. I also spent some time just getting the data object and printing it to the console so that I could get a better understanding of the object’s properties.

To get the user’s location, I used the navigator.geolocation API. This meant that I had to use HTTPS, but luckily the Apixu API supports that, so it ended up not being an issue.

Stage 3: Toggle the Temps

Lastly, I made a button to change the temperature display from Celsius to Fahrenheit and vice versa. This was not too difficult, though my implementation may be a bit heavy-handed. I’m sure there’s a simpler way to do it, but the way I did it works for now.


  1. Here is a link to the repository
  2. This is a live version

Notes for me:

  • My JavaScript seems cumbersome. I want to work on trying to write my code to be a little more lightweight.
  • I tried it a bit in this one, but I need to continue trying to write my CSS to be more modular, so that I’m not repeating the same styles for multiple elements/classes/etc.

Speedrun Progress:

Next up: Wikipedia Viewer!