Free Code Camp – Local Weather App (FINISHED!)

I guess doing something new really was the way to kick myself into gear. A few days later and I have successfully fufilled all user stories for this project on Free Code Camp.

  1. User Story: I can see the weather in my current location.
    When you load the app, it will request that you share your location. If you hit “Allow,” it will display your current city/town and the weather there. If you deny, it should throw an error at you.
    I do this by using

    navigator.geolocation.getCurrentPosition

    to send a notification to the user that requests the location. Then, there’s an AJAX function that takes in the coordinates from the navigator, returns the weather for those coordinates (in Fahrenheit), the weather conditions. It also converts those coordinates to a city and state, and displays those on the page.

  • User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. 
    I used this icon set by Erik Flowers and Lukas Bischoff. to display icons that match the current weather conditions. When I first started coding, the weather here in Austin was consistently ‘clear’ so I had no idea if it actually worked well. Then, when I took the screenshot, I noticed it had changed to “Partly Cloudy.” Yay!
    They have nice functionality that works with the Weather Underground API, and some other popular APIs as well.
  • User Story: I can push a button to toggle between Fahrenheit and Celsius.
    When you hover over the temperature, the cursor will change to indicate that it is clickable. When you click it, it toggle between Celcius and Fahrenheit.

And, now, I have a functioning weather app! And I never would have gotten it done if I hadn’t been willing to shift my focus elsewhere for some time.

I noticed when I went for my screenshot that it displays the weather in decimals, which I don’t typically see (or look for) in weather apps. I am considering adding some code to round that number to the nearest whole number.

Screenshot 2016-02-29 23.14.10 (2)

Advertisements

Oops!: I Fixed a Bug in My Random Quote Generator

Turns out, my Quote Generator wasn’t quite complete. I tweeted it out for all the world to see, and @FreeCodeCamp caught something I missed.

When I was first coding this project, I was trying to use a for loop to cycle through all of the quotes. I took it out once I realized that I didn’t want to cycle through since I’m using randomized values. So, for a second, I thought I screwed something up and the code reverted back to that point.

I clicked the button a handful of times and it seemed to be working as expected. But clearly there was a problem somewhere, so I kept clicking. Lo and behold, my quote div completely disappeared!

In my last post, I mentioned how Bonfires are helping me get better at approaching solving these problems. I’m also getting better at debugging. I instantly opened the console to look and see what happened when I clicked my generator button. I printed to the console log to show me when it generated a number and when it displayed successfully. It took about 15 tries before my code broke and I got that cute little error box that told me what was wrong.

This is my code before:

var x = Math.floor((Math.random() * quotes.length) + 1);

And this is my code after:

var x = Math.floor((Math.random() * quotes.length - 1) + 1);

Can you spot the difference?

Turns out, I wasn’t giving my code a proper range to pull the number from. Although quotes.length might equal 13, that also means that I need the random number to stop at index 12. My code was including 13, which doesn’t exist, and broke my generator.

Thanks again to Free Code Camp for finding that error for me. It’s always a little disheartening when you are proud of a project then someone finds a flaw that you missed. But, I’m learning it’s actually pretty difficult to accurately test your own code. My goal was to make my code work, so I tested it to make sure it worked and it did. But when FCC tested it, they tested it to see if it would break; something I didn’t even think about.  After realizing that, I ran my generator over and over again until I was sure there would be no more errors (over 300 times!).

Here’s my now fully functioning Random Quote Generator.

http://codepen.io/cerita/full/BoMzLr/

AJAX Basics: jQuery, APIs

Time to cross another course off of my list: AJAX Basics. Done.

AJAX is definitely no walk in the park, but it’s also a little bit less intimidating than it seemed when I first started this course. While there’s still some things I didn’t completely understand from the lecture-type videos, I was able to complete this course and it’s DIY challenges without a headache. Win.

jQuery and AJAX

We revisited the Office Status project from the previous section. Nothing changed in the details of the project except changing the vanilla JavaScript to jQuery. And, once again, the challenge for this project was to add AJAX for the room numbers, this time using jQuery.

Challenge

The challenge

Office Status Code

My code

Office Status

AJAX and APIs

API stands for Application Programming Interface.

We used Flickr’s API to build an app that lets you click on a button with a type of animal (cat, dog, or moose) and AJAX displays recent photos with the appropriate tag.

The big challenge this time was to change the code to use a search form field instead of the pre-selected animal buttons from before.  To do this, I had to replace the button’s click event handler with a form submit handler. Since I’m using AJAX, I don’t want the submit button to open up a new HTML page which means preventing the browser’s default action.

Screenshot 2015-01-25 17.06.52

Should you choose to accept it…

Workspaces

My code

I was able to complete the challenge with my own knowledge once again! By now, I shouldn’t be surprised that I was able to handle it, but I spent most of the lecture-type videos scratching my head going “WTH?!” I may not completely understand everything about AJAX, but I can create working code which is still pretty awesome in my book.

After the challenge, I added a change to the submit button that changes its text to “searching…” after you hit submit and switches back to its original text when the AJAX request is over.

Flickr API

It’s Always Cold In Chicago

jQuery definitely helps to make working with AJAX easier (which is great becuase jQuery is here to make our lives easier) and I feel like I’m really starting to get the hang of using jQuery, especially with extra practice using CodeSchool’s Try jQuery course.


Now, all I’ve got left are Console Foundations and Git Basics before I complete this track. Wish me luck!

jQuery Is Fun + A Learning Experience

I really enjoyed the jQuery Basics course on Team Treehouse. I think it really helped that there were 5 projects to do instead of just 5 minute lectures followed by quizzes. Each project was different, but they built on each other with knowledge. With every project, I was able to imagine what the code might look like before it was explained to me. It’s an amazing feeling when you realize you’re really starting to understand what’s going on.

But jQuery is also a pain in the butt. Or, rather, syntax is.

With one of the projects in Treehouse, I built Drawing application where the user could pick an existing color or add a new color and draw on the canvas.  It was the longest project in the course and introduced the HTML5 canvas, but the coding wasn’t the hardest part. The hardest part was getting to the end and trying to figure out why the only color that worked was red, and only if you didn’t choose a different color first. Weird.

I re-read my code over and over to make sure it made sense.  I even re-watched videos to make sure I didn’t miss anything. Then, I realized that there was one thing Andrew did throughout the whole process that I simply watched him do instead of doing it myself.

Open the Dev Tools!

If I had been doing it from the get-go, I may have noticed that when I click on any color but red, the value was always undefined. Always. Even if I went back to red afterwards. And, if I had caught that when I was coding that part of the project, I probably would have noticed that I forgot one stupid little semi-colon.

Dozens of lines of code and it was broken by a semi-colon. Womp.

TL;DR:

jQuery is fun, but don’t wait til the end to test your code. Just don’t.

jQuery Basics: Spoiler Alert!

The first project in the jQuery Basics course was to create a basic button that hides the biggest Star Wars spoiler and reveals it when a user clicks on it.

.hide()

The hide() method is pretty self-explanatory. It hides an element  from view.
We didn’t use it in this project, but you can also control the speed (slow or fast) and duration (in milliseconds) it takes to hide the element.
And, of course, if there’s a hide there must be a show. Then, there is the toggle function which toggles between show and hide. They work the same way as hide, taking in speed and duration as parameters.

 $(".spoiler span").hide(); 

.append()

The append function attaches an element after the selected element. We used this to add the “Show Spoiler” buttons to the HTML.

 $(".spoiler").append("<button>Reveal Spoiler</button>"); 

this

.click()

Click is a mouse event that requires user interaction. Specifically, a mouse click. After the mouse click, you would define a function. For this project, when the user clicks, an unnamed function will simultaneously show the hidden spoiler and hide the button.

 $("button").click( function(){});  

.remove()

Another self-explanatory function, remove simply removes an element from the HTML.
As I was watching the videos, I started moving ahead and used hide() to hide the button we created earlier, but Treehouse used this one instead. Visually, they do the same thing but after some Googling, it seems that remove cuts out some of the overhead. There’s no reason to hide the buttons unless I plan on using them again (practice project idea!).

  $(this).remove(); 

.prev()

The prev function was a bit confusing at first. It selects the previous element in the HTML.

Initially, we had used show() on the span but because there are more than one span elements on the page, the result was kind of wonky. With prev(),  we were able to select and show the spoiler that came directly before the button we clicked, instead of all of the spoilers.

 $(this).prev().show(); 

And that is the basic jQuery code used to build this project. It’s really short and sweet but adds some fun dynamics to what could have been a really boring webpage. See? jQuery is fun!

If, by some miracle, you don’t know the major Star Wars spoilers and still plan on watching them, you might not want to click on anything and just take my word for it.  Otherwise, click away!