FCC Speedrun: Local Weather App
It’s been a minute, but I finally finished my Local Weather App and after putting it through all the validations and speed tests, I am pretty proud of my work, albeit there’s still plenty of room for improvement. Unfortunately for me, my chingu cohort has ended for this session, but fortunately I have my trusty friend Stack Overflow to aid me when needed. I found myself spending a considerable amount of time there trying to make sense of all the new JavaScript I was writing.
Despite not being in a chingu cohort right now because they’re doing their Summer Voyage (I didn’t feel quite ready for that yet, but Chance Taken I’m hoping to accelerate my learning and be a part of the next cohort), I’m still determined to push through the FCC projects and am going to try accelerating my pace to turn my Speedcrawl into a Speedjog. Soon my craft will sharpen and I can actually run through these projects. But until then, learning is far more important than actually finishing in shorter periods of time.
Project 2: Local Weather App
The third front-end project on my Speedjog is to create an app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/bELRjV
Requirements:
- Shows weather in current location
- Shows different icon or background image depending on the weather
- Includes a button to toggle between Fahrenheit or Celsius
After finishing the Random Quote Generator, I felt as though I had a better grasp on working with jQuery and using APIs. While that was true, this in no way made me feel like I had it down yet. Practice does indeed make for better coding, and I soon felt a lot more comfortable with JavaScript after this project.
In the beginning, I again started off with basic HTML and CSS to create the skeleton of my app and used colored borders to help me visualize my code so I can make proper adjustments. When my structure was complete, I needed to decide what the best way was to implement my weather content. I decided that first I would need to get the user’s location using a geolocation API. After playing around with multiple kinds, I settled on ipapi.co to get the coordinates of the local IP address for the user. I used a getJSON request and stored the latitude and longitude coordinates in variables which I could later use for the weather API. For this I used the OpenWeatherMap API which gave me all the weather content I was planning on implementing into my app. It requires a unique ID key, so if you’re planning on using this API be sure to register to get one. Lastly, I needed to decide between using background images or icons for reflecting the weather description. I ended up choosing weather icons because I wanted to implement all my content in one area and create a cleaner aesthetic background color. For this I used Erik Flower’s weather icons to generate a different colored icon depending on the weather description given by the weather API. When all the mechanics were finally strung together I was happy to be finished… SIKE! Now comes all the debugging.
First I checked to see how my app looked across all browsers (i.e. Mozilla Firefox, Google Chrome, Safari) and it seemed to be okay. Then I checked it on mobile. Woof. At first I had issues with the IP API not being able to find the geolocation so I had to switch from using that to the location in the weather API based on the coordinates retrieved. This seemed to be a fix, yet in the end it wasn’t necessary because it was the internet connection that was causing the problem not my app or the API being used. The next problem seemed to be that my app would appear with the size intended when using codepen.io, but not when shown on my GitHub Pages (see image). To mitigate this issue, I continued the research and discovered I needed some metadata in my HTML code to make the viewport adjusted for mobile devices. This was the crucial code I was missing:
<meta name="viewport" content="width=device-width, initial-scale=1.0">A couple of other issues I ran into were style-related such as properly getting a circular border for my button, or creating a background color that transitions between two colors as a gradient. I again ran into the CORS issue from the last project, and ended up putting “https://cors-anywhere.herokuapp.com/” before my URLs that were http instead of https. But in the end, I was able to push past these hurdles and finally figure everything out that I wanted to.
Things I learned along the way:
- Nesting getJSON isn’t the most efficient (implemented this for now but want to maximize efficiency for the future)
- Having the order of the jQuery script tag before the JavaScript script tag is pretty important for getting the content to load properly
- How to change a color attribute in JavaScript
- On mobile, additional padding can sometimes be added if the content is bigger than what would fit (needed to making padding = 0px for the border around my temperature unit button)
In conclusion I had fun making this project and am glad with the end result. While there is still so much to learn about JavaScript and coding in general, I’m more excited as my journey progresses to not only sharpen my craft but to also start coding more with others and am hoping to do some pair programming in the near future. I’m looking forward to the next project and am hoping to code more efficiently than the last!
