I remember slamming my head against the wall trying to figure out how to get the weather application to work, too. It took me quite a while, a about 2 weeks to figure it out. The entire time I was cursing Javascript for it’s weird asynchronous nature and use of callbacks, trying to work out how to get the API to work, all that stuff. (Hint: I started with using console.log() to log the responses from my API calls until I could narrow it down to the point I could extract what I wanted). It required me to break everything down into smaller, more digestible chunks. A lot of people have already said this, but I’ll try to help by showing my thought process for tackling larger problems like this without just giving the answer away (because, like I said, I struggled a lot on this too).
For instance, to get the weather for a user’s location, I had to know 2 things: their location, and the weather there. To find their location, there are APIs and functions you can use. To find the weather at a location, there are weather APIs you can use by sending them location information to get weather for that location.
I picked out which API to try using for the weather, then figured out what it was asking me for: in my case, it was the zip code and country. I hard coded my zip code and country into the javascript and made sure I could get weather that way. Using console.log(), I was able to log individual chunks of the JSON response until I figured out exactly which chunks told me what I wanted to know (current weather conditions, and temperature). Then I started putting that on the webpage. The temperature was returned to me in Kelvin, so I had to build a function to calculate either Fahrenheit or Celsius temperature from that, put the temperature in a <div>
, and then a button to toggle between the two.
After I got that ironed out, I had to figure out how to do it for all locations, not just my apartment at the time. I had to know what a user’s address was, and found the easiest way was to use the Google Maps API to find the address from coordinates. I googled around and found navigator.geolocation.getCurrentPosition()
, which I had to learn to use to get coordinates. That took a day. From those coordinates, I could feed them to the Google Maps API, which in turn would send me JSON data about the location. I then followed the method from before of using console.log() to make sure I could extract the parts I wanted from it. From those parts, I isolated the zip code and country, and passed them to the function I built to get and render the weather data.
I felt triumphant after I got everything to work! I loved it and quickly ran to my friends apartments and the local Chick-fil-A to see everything working and showing the addresses of these places. It all worked out fine.
And then, without warning, it broke 2 months later. The API I used for my weather had changed, so I had to go back, and use console.log() to start logging JSON responses manually and figure out, once again, how to get the information I needed from the JSON because it had changed. Using the method I used to initially build the page and figure out how to query the APIs, I was able to fix it in under an hour when I figured out what the problem was.
The finished product is here, if you want a look at it. I enjoy javascript and programming logic more than design, if that wasn’t apparent. If you look at the javascript code and are intimidated, just remember, in June I was just like you, and this final product looks nothing like the way it was written. Every function was changed and rewritten several times, as well as several functions that are no longer there because I figured out a different/more efficient way of doing it. I started out with just $(document).ready(function(){});
and started putting one thing inside at a time.
In a few weeks, you’ll be stuck on the PomoDoro clock or Tic-Tac-Toe, thinking about how much harder those are than projects like this, and you’ll look back at these times and realize how much you improved, and how much you’ve learned. The fact you’re pushing through something difficult means you’re improving. And, I’m not gonna lie, on the stuff I’ve been stuck on recently, I look back at the mid-level an advanced-level front-end challenges for reminders on how to do, or how I did certain things. Once you write the code yourself, and don’t just copy/paste, you not only know you can solve that problem again, but you can look at code you wrote for reference in the future. That’s WAY more helpful than someone else’s code on StackOverflow.
I’ve been stuck trying to make some of the final back-end challenges. After 2 weeks I still can’t make a user authentication mechanism despite many tutorials online about how to do it. The key is to keep trying. If you don’t stop you keep slowly getting better, without realizing it.
You can do this.