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.

 

Day 26 – 37 Finished Basic Javascript and Basic Algorithm Scripting

These two week I felt completely in love with coding … ! For 12 straight days, I’ve devoted some time of the day to Free Code Camp. The first week, I finished the basic javascript lessons.

Then the past week, I devoted time in the morning, after work, to tackle the basic algorithm scripting challenges one at a time. Most challenges took an hour to complete, some I was able to do in 20 min, but some could take 2 hours, even 3 …

And the more I got stuck, the more I learned how to get UNstuck. Usually it’s a simple thing that you just need to google about: how to count all the letters in a word? How to get the third letter of a word? How to combine two conditions in an “if” statement?

And a lot of times I got stuck making simple mistakes: coding if 65<i<90 instead of if i>65&&i<90 for example. Or making a for loop exit too quickly. And so on.

Sometimes I spent more than an hour staring at my code without realizing the most simple mistakes. But looking back I am glad I didn’t just google the answer. Because I really relish every moment of the trial-and-error process. And the mistake that I spent one hour staring at and overlooking? Turned out I would seldom make it again.

I originally planned to finish the Basic Algorithm challenges by the end of May. But since I met my goal 10 days in advance, now I’m excited to continue to JSON APIs and the intermediate front-end projects in May!

Coding my way through these challenges reminded me of the middle school days when I would sit in front of my desk cracking the math problems for hours. Oh I miss those days when I was in a complete creative problem-solving flow, and am so glad coding brings these precious moments back.

Day 18 – 25 Finished the Portfolio Page, and started Javascript

I haven’t blogged last week, but I’ve tried to spend a few hours here and there — a bit more consistently, and today, I finally finished the 10hr “Basic Javascript” session, and started “object-oriented programming”.

I’ve definitely been tempted by social media more than once – after all it’s only a new tab away. But last night (a sunday night), I’ve also resisted the temptation and coded for more than 2 hrs.

I was literally lost in problem-solving. I wanted to figure out the solution by myself so bad, I kept googling, staring at my codes, drawing out the logic …

It reminded me of my love for maths when I was in middle school. Just the pure joy of problem-solving.

Googling the answer might have been more efficient, but then that would’ve ruined the fun.

And after making more mistakes than I could have, I understood the right solution so much better.

Having a goal also helps – I want to finish “Basic Algorithm Scripting” by the end of May!

Day 17 – Devil is in the details & Page 3 of Personal Portfolio Page

Today I built page 3 of my portfolio page.

I encountered so many roadblocks, and many of them in the tiniest things. How come I can’t change the color of the h4 tag? (turns out text-color vs color makes a difference) How do I get rid of the underline of the a tag? How come I can’t put the h tag in the next column?

The last question took me the longest time, I made sure I used the grid system, and some texts was supposed to be the second column … ah … ! That drove me crazy, and I was scratching all over my head trying to figure it out.

Turned out, instead of class=”col-md-6″, i put something like class-“col-md-6”. Of course it won’t work!

Again the devil is in the details. Coding really taught me how to be exact on the small things.

Anyway, couldn’t believe I spent 2 hrs on a friday night coding. Now I think I finally earned me some legitimate youtube video hours!!

Screen Shot 2017-04-28 at 10.58.46 PM

http://codepen.io/codablejoy/full/aWpWJG/

Day 16 Built page two of Personal Portfolio Page – FCC

Today I built page two of my portfolio page! I was able to concentrate more, and get distracted less. At one point, I got so sleepy at 10pm that I just wanted to take a long nap.

But I reminded myself: if it’s not hard, anyone can do it. Train your relentlessness muscle, Joy. Then I got up.

And as I predicted, it only took me 5 min to get back on track again. Because as had happened before, once I got started, I simply couldn’t stop — I just had this strong desire to make things beautiful. And that led me to google, experiment, adjust … I was in the moment.

Screen Shot 2017-04-27 at 11.45.19 PM

https://codepen.io/codablejoy/full/aWpWJG/

 

Day 14-15 Built Page One of Personal Portfolio Page – FreeCodeCamp

Today is Day 15. I spent day 14 watching youtube videos and felt really empowered to build my own page. But day 15 didn’t happen until almost a week later, and it was always so hard to regain momentum after that long of a break.

I procrastinated. Watched some youtube videos. Read some facebook articles. Baked some yummy kale chips. Even took a 30 min nap at 10pm … ahaha.

But then I started coding again … ! So many questions one after another. How do I keep this background image appear?? Please, can you stay there, just not move while I move the h1 tag? Wait, seriously, just don’t move, I’m adding margin to the block element, not you, background image!

After a lot of googling and creative problem-solving, I somehow made it work! I felt soooo in love with the process in the end, because now my mind was all about making the site pretty, and I loooove making things look pretty! It just felt great having the freedom to assign whatever color, margin, width I want to any element of the website.

So here it is, page one of my portfolio website. It’s far from perfect, but I’m really content for now!

Screen Shot 2017-04-27 at 12.09.24 AM

https://codepen.io/codablejoy/full/aWpWJG/