Day 58 – 72 Finished FCC Weather App

Screenshot 2017-06-27 at 7.48.57 AM

I’ve finished the second intermediate Front End project, the FCC Weather App! You can see my codepen here.

The project felt easier than the first one, as I’ve already learned about the API and getJSON methods. Nevertheless, there were a series of road blocks I had to overcome.

Looking back, here were the key steps I took, and resources I consulted, that helped me complete this challenge —

  • Understanding how to get user location data. I read through the related FCC course material and W3 school documentation to have a better grasp of the concept.
  • I used the dark sky API to get the relevant data. To get the right data from the API, I also researched how to access nested arrays.From Stack Overflow: “You can access it this way : data.items[1].name or data[“items”][1][“name”] . Both ways are equal. “I also had to refresh my memory to research about the difference between single quote and double quote in JS : turned out they are the same and can be used interchangeably!
  • Btw, I kept running across the crossorigin issue – the fact that the API data can’t be displayed on Codepen correctly b/c compatibility between HTTP and HTTPS. In the end, the easiest way I found was to simply add https://crossorigin.me/  in front of the actual URL – boom, problem solved!
  •  To get the location data to HTML using JQuery, I googled and figured out that there should be no quotation marks around the variables. e.g.  url = “https://crossorigin.me/https://api.darksky.net/forecast/a24805f95bcff8508810dda799ced947/” + locationLat + “,” + locationLong 
  • I also learned how to add parameters from the API data. I could have added a chinese version of the weather info, but I didn’t. The method was worth learning nevertheless. You use the question mark here to access the Chinese version —  https://crossorigin.me/https://api.darksky.net/forecast/a24805f95bcff8508810dda799ced947/38.9104844,-77.0593264?lang=zh
  • Learning how to change CSS of certain HTML elements using JQuery took the longest time. The format is actually pretty easy — $(‘img’).attr(‘src’, ‘url’) for example. Or  $(‘body’).css(“background-image”, ‘url’)
  • It also took me a while to find the right weather icon that would work with my conditions. Turned out the openWeather app has all the icons you can access through URLs directly.
  • I learned how to switch between F and C by watching the Code360 Tutorial on youtube.
  • I also tried both “if … else” and “switch” statements to set the conditional weather icons and background images. I learned that the switch statement is simpler and faster to process. switch(){case x: action; break;}
  • It was hard lesson learned that special attention needs to be paid to the “OR” conditions in if…else or switch conditions. In If … else, you need to write newWeather === “cloudy”||newWeather === “partly-cloudy-day” instead of newWeather === “cloudy”||”partly-cloudy-day”. Trust me, the second won’t work because the second Or condition , if “partly-cloudy-day” = “partly-cloudy-day” will always evaluate to True and screw up all the rest of the conditional statements … !!With Switch, it’s easier — you can just use case x: case y : followed by the action statement.
  • Also, when I figured out all the functionalities, I finally got to sketch out the structure of my app, to make my CSS work. Having an idea of what you want your app to look always help guide your actions. FullSizeRender

Besides these steps, there are two resources I found particularly useful to boost my productivity —

  • Microsoft Onenote. You can probably use Evernote too. I found that during those days when I was productive, I used OneNote to break down all the big, and small steps, and make them into To DO list to break the Big project into small actionable steps, and that helped me getting “unstuck” easily. Each time I got stuck on something, I asked myself, what action item on my OneNote page can this problem turn into. Sometimes it’s simple as “google this method this evening”. See below example of my OneNote page for this challenge. I used the right side to jot down important lessons/examples I learned. Screenshot 2017-06-27 at 8.26.20 AM
  • the FCC forum, or stack overflow. When I got confounded by why the conditional statements wouldn’t work, I googled for the longest time, and finally decided to ask a question on the FCC forum — for the first time … !I got an answer within about 10 min, and my question was solved!! And I learned so much more about the if else statements, and the person even suggested other ways to improve my codes. I learned so much by posting … !

Finally, one last thing I learned through this project is that, the key is to get “unstuck” as soon as possible. When I couldn’t figure out the “if … else…” statements, I tried the “switch” statement instead, and it worked … ! that helped me move forward, without pondering over this question I wouldn’t have solved on my own.

In the future, I think I’ll learn to keep trying different ways to solve a problem, and keep using the FCC forum as a resource, and maybe ask more question and have someone review my codes — the world is more willing to help than you think it is …!

The Wikipage challenge here we go!

 

 

 

Day 38 – Day 57 Finished FCC’s Quote Machine Challenge

Screenshot 2017-06-11 at 6.47.52 PM

Almost 3 weeks has gone by since my last post. But I’ve learned a lot in the past three weeks — I’ve been working on the first intermediate front end dev challenge — build a quote machine. And I finally finished it today!

Looking back, here are the processes and steps that helped me tackle this challenge effectively. I’ll have to say FCC didn’t explain the concept of API that well, as most of the codes were given to you to complete the sandbox tutorials. Therefore, when I first started the challenge, learning what API was all about, and how to use JQUERY to get JSON/JSONP data proved to be a steep learning curve. But looking back, below are the major hurdles I needed to overcome to complete this challenge, and here’s how I did it —

  1. Understand JQUERY’s getJSON method. Below are the two links that I found useful, and I recommend reading through these documentations carefully to get a grasp of the key conceps.
    1. http://api.jquery.com/jQuery.ajax/
    2. http://api.jquery.com/jquery.getjson/
  2. Understand  the cross-origin issue – JSON vs JSONP
    • You will soon find out that even if you’ve used the correct methods, and found an API (I used the forismatic API for the quotes), the quotes won’t show correctly on Codepen. As a lot of people say, this was the biggest time suck during the project, and a lot of the stackoverflow answers weren’t straightforward enough. In the end I found a workaround through one Codepen example. And here’s the correct code for the Forismatic API to work on Codepen: url = “https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?”
    • I also found this youtube video, which was highly engaging btw, that touched upon the difference between JSON and JSONP — highly recommend.
  3. Add the tweet function. I googled this on youtube, and at first there were lots of complex examples which again turned out to be too confusing. I also googled Twitter’s developer page, but then there was too much to red … Finally, one youtube video had the most simple solution: $(‘#tweetButton’).on(‘click’, function(){
    window.open(“https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&text=”+encodeURIComponent(newQuote));
    });
  4. Make the API data a global parameter. This is related to making the quotes work with the tweet button. I was able to understand the concept, and the solution better thanks to the Code360 tutorial.

 

That’s it. It’s amazing to see how many web resources helped me during the project. And I felt one of the abilities coding really helped me hone, is the ability to problem solve through identifying the correct resources online — efficiently.

Again you can see my finished codepen project here. Just to learn things from another angle, I also completed another draft project using the array method, which you can find here. Although the first API challenge took more time than I originally budgeted. I’m glad I took the time to really understand the fundamentals, and am hoping that the foundation will help me tackle the other challenges more efficiently.