This is a project I created as part of the FreeCodeCamp Front End Development Certification path. This weather app uses the Dark Sky API to retrieve the weather information in JSON format, the Weather Icons CSS library to load the weather icons, Moment.js to load in the days of the week, month and year, Google Maps API to load the user’s location, jQuery, and Bootstrap. The layout is inspired by the day change animation that plays in the game Persona 4.
These are the three reference photos I used while creating my weather apps. You can see the strong influence each one gave as I was working on my site styles.
This is actually the second version of a Weather App I created using Persona 4 as inspiration for the layout. With the last app, I focused more on the form of the app, making sure it looked as close to the weather app as shown in the game, then connected the API and icons with hopes it would work correctly.
The first version of my weather app. It didn't turn out as well as I had hoped, but I was successful in getting my information to populate to the site using the OpenWeatherApp API and have my weather and air speeds convert to metric. You can view this app here: https://codepen.io/Qwicksilver/full/dNVwxv/
This time around, I focused on function over form, making sure the API was pulling in the information I wanted displayed and making some subtle changes to the layout as I progressed with my work. I also connected the Weather Icons CSS at this point to make sure they would also load in correctly.
At first I had the variables for the days of the week hard coded in so I could see how the layout was working. I had tried to use a loop to fill in the content, but ran into several roadblocks with how to set up the loop and the best way to load in the information from Moment.js and the Dark Sky API. It took the aid of two of my peers to help me get the loop working correctly, as well as getting the temperature conversion button working correctly. It’s times like this that I’m glad I know other coders or can contact other coders for aid when I end up coding myself into a corner.
The other difficult thing I needed to figure out was how to get the media queries working correctly so the site can be viewed on different devices. Media queries and I usually don’t get along well, so it was not a surprise that I needed to dedicate much of my time to getting these correct. Really glad I have the Google developer console to help me in this area since I can test different break-points and make sure the layout would scale correctly. I know media queries are a necessary evil at this point in web development, but I won’t hesitate to say they are the part of development I like the least.
The Chrome Inspector View with the media queries option turned on. Not going to lie, I cringe when I have to work with this view. Media queries are the bane of my existence but I work on them anyway so the cringe lessens each time.
Overall, I’m very happy with this design. The design layout was very successful, the information from the API is loading correctly as well as the corresponding icons for each day of the week, the user’s location is also loading correctly, and the temperature converts for each day of the week. The user stories for the project as posted on the FreeCodeCamp website required all of these criteria, I would say that I have fulfilled all of them as well as put my own spin on the end result.
