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 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.
Notes for me:
- 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.
- Random Quote Machine
- Local Weather Viewer (this post)
Next up: Wikipedia Viewer!