jQuery

Thinkful Week 2: Delving Into jQuery and JavaScript

It’s my second week in with the Thinkful Front-End Developer Career Path Program and I must say, things are going a lot faster than I thought they would. In my first week, I just tried to get the hang of the program and balance my schedule with work and Etsy and y’know…life stuff. But, for my second week, I was truly ready to kick it in high gear. So, how did I do?

jQuery and Manipulating the DOM

Going through Treehouse, I got semi-comfortable with jQuery, at least to the point where I could add plug-ins and attach the functionality to certain elements. Though it took a great deal of finagling, I was able to get most of it to work. But, what I learned after going through the first few lessons of Thinkful was that I wasn’t really using jQuery. I mean, sure I was copying and pasting and this and that, but I wasn’t truly learning it.

So, as I made my first “Hello World” document, got a feel for the Document Object Model (DOM), and practiced some jQuery basics with searching and traversing the DOM, I felt as though I was really getting a feel for the utility and understanding how and when and why to use the jQuery library. With those basic tools in hand, I was able to take on the jQuery Street Fighter Project.

I thought that Thinkful did a great job with the content on this project, showing you the basic set-up and some best practices, but letting you go at a certain point to make it all happen. I was able to put the basic project together, so it looked like most other students’ projects, but I decided to go the extra mile. As a former avid Street Fighter fan, spending much of my youth throwing hadoukens and striking the cool pose with Ryu, I was able to find a level background image to include, as well as the Street Fighter logo, which I thought was pretty cool. And for the finishing touch, some brilliant web philanthropist had posted the Ryu Theme Song as an mp3 for download. Hadouken! Project defeated:

http://jasonwalkow.github.io/jQuery-streetfighter/main.html

More jQuery with The Shopping List

Next up was a project that allowed me to build upon the principles I picked up in the Street Fighter project: The Shopping List. This time, we were told to start with a basic wireframe of the app, then build a static version using HTML and CSS, and then once we got all of that worked out, basically delete all content (minus the divs) and dynamically fill in content using jQuery click and key methods.

This project was a little more difficult and took a bit more work with my mentor Matt. Although I remember building almost the same sort of app using vanilla JavaScript with Treehouse, this was much different. But, as always, Matt was extremely helpful and not only showed me the way to get bugs fixed, but the best way to make sure that each operation was nearly error-proof. That was a huge step and a big learning jump for me. Here’s how it turned out:

http://jasonwalkow.github.io/shopping-list/index.html

Learning the Basics of JavaScript

I hadn’t touched much JavaScript since I stopped learning with Treehouse and I admit that I had pretty much lost most of what I had learned. I hadn’t kept up the practice, which I learned was 100% necessary, and I felt a little overwhelmed. Thinful’s courses started out simple, which was a relief, but I was getting a little worried working toward the section project… The FizzBuzz Challenge.

I had read about the Fizzbuzz Challenge here and there and everywhere. Supposedly, it’s a pretty common interview tool to see how a programmer thinks and processes functions. Some people hated it, some people didn’t mind it, and a lot of people didn’t really seem to understand why it was used as such a barometer of skill. Needless to say, FizzBuzz sounded rough.

The FizzBuzz Challenge

What is the FizzBuzz Challenge? Well, basically, you are assigned the following problem: “For each number from 1 to 100, if it’s not divisible by 3 or 5, print the number. If it’s divisible by 3, print ‘fizz’. If it’s divisible by 5, print ‘buzz’. And finally, if it’s divisible by both 3 and 5, print ‘fizz buzz’.” Sounds…complicated, right? Well, it is, until you break it down to it’s most basic pieces. First, you figure you need a loop. Good, easy, make a for loop: “If, else”. Next, you decide which numbers are divisible 3, then which numbers are divisible by 5, and which numbers are divisible by both – just to get an idea of what result should print out. What’s the magic number? 15. So, I started building the thing and I was able to get a solid loop going using the division operator. But, as I soon found out, I was dead wrong. Sure, the division operator works for 3, and 5, and 15, but what about 6 or 9 or 10 or 30 or 90? You can’t set a parameter to give you the results you need. What you need is the modulo operator. That will give you the remainder of the operation, which of course, you will need to be 0 after dividing each of the denominators.

Even with the stigma surrounding it, I was truly happy to see it as a project goal on Thinkful. It shows that they really create their content based on making you a job-ready developer. And they didn’t just glaze over it, they made it a serious checkpoint. A checkpoint which they prepare you for during the coursework. Again, we were told that we didn’t necessarily need to worry about style, but I couldn’t help it:

http://jasonwalkow.github.io/fizzbuzz-challenge/index.html

Functions and Scope

After finishing the FizzBuzz Challenge, we learned a little more about JavaScript in the way of functions. Practice, practice, practice…that’s all I can say about functions. That’s really the only way to understand it and get a hang of the syntax and the methods. For a small project, we had to refactor our FizzBuzz Challenge to allow for the user to enter a max number (I set mine between 1 and 1000), and the function would print out the FizzBuzz up until that max. It took a little bit of jQuery, and a few little JavaScript changes here and there, but I got it to work and learned the power of functions and how much time and energy it saves both you and your program. Take a look:

http://jasonwalkow.github.io/fizzbuzz-refactor/index.html

Lastly, as a finish up project, we were assigned the Hot or Cold App, which generates a number between 100 and allows the user to guess the number, telling them along the way if they are getting “warmer” or “colder” to the number. This project was a little different than the rest, as the static page was provided for us (set-up and design) and we just had to add functionality. We were supposed to focus solely on the JavaScript. Now, the design piece is often a big part for me. I love designing things from start to finish and tinkering away until they’re perfect – so I wasn’t nearly as excited for this project. But, then I noticed that the app was designed by a former student named Jeya Karthika. If you don’t know about Jeya, she wrote a pretty solid blog post discussing her learning journey with both Thinkful and Bloc and is also a pretty great designer. A lot of what I read from her journey helped me to choose Thinkful in the first place, so I really dig her work. This made me totally okay with working from a template. And, the programming was pretty straightforward and fairly similar to the things we had already built on, so I won’t go into it much here. Here’s the finished project:

http://jasonwalkow.github.io/hot-cold-app/index.html

Stay Tuned

Well, that seems like enough for this week’s post, so I’ll go ahead and wrap it up. Thinkful’s courses for jQuery and beginning JavaScript were extremely helpful and I hardly had to look at other sites for help or extended learning. I really can’t explain the importance of having a mentor through all of this. As the lessons have gotten more and more complex, Matt has really helped to break things down practically and show me some cool extra things along the way. Knowing that I have three separate days of “safety net talks” with Matt every week really takes the pressure off and allows me to just learn and practice and learn and practice some more. Again, if you’re thinking about taking a course with Thinkful, don’t be afraid to contact me and get an idea about the program. Thanks for reading!

Coming Next Week: Object Oriented Programming, AJAX, and APIs

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s