Disclaimer: I started learning JS after already having a solid foundation on Ruby and OOP concepts, and I also took the quick course in CodeCademy the day before to get acquainted with the new syntax, so in this sense we could say I had a headstart.

Day 1 (24 hours of Javascript basics)

Day one started by writing some rapid-fire exercises to use the new syntax just learned. In the morning I wrote 7 functions that are very basic programming exercises, such as reversing a string, outputting an array of primes up to an inputted number, and writing `myMap`which was my Javascript version of Ruby’s map method. The full list of functions can be found here. After this, I moved on to more complex algorithms, such as writing bubble sort, merge sort, and quick sort. Ahh, my head was starting to hurt by now, so it seemed like a good stopping point to break and eat lunch.

In the afternoon, I worked in a simple roulette game. This was my first attempt of bringing Javascript to the browser, and it proved to be a challenge of its own. Fast forwarding 6 hours later, I finished the game which can be played here. With that day one of Javascript was finally over, and it felt like there was still so much to learn, so before going to bed I quickly reviewed some of what I learned the night before about functions, objects, etc, and I learned the very basics of jQuery DOM traversal and modification. Sounds good, let’s call it a day.

Concepts learned/used: Javascript types, operators, flow control, looping, arrays, objects and object constructors, functions, and “this”.

Note: Source code for Day 1 of Javascript can be found in my public Github repository.

Day 2 (24 hours of jQuery basics)

It’s a brand new day! And what a better way to solidify my reading on jQuery, than to actually build the jQuery functions that allow you to traverse the DOM. So that’s what I did! I built:

The jQuery() function and $ alias that takes a string and returns an object with an array of tags that match the selector string / DOM node

DOM modification functions: hasClass(), addClass(), removeClass(), toggleClass(), val(), css(), height(), width(), attr(), html()

Extension to jQuery() function so it allowed the chaining of selectors (e.g. jQuery(“div .some-class .some-other-class”) ).

Wow, what a day! I’ll admit at first I was a bit intimidated by the idea of building jQuery because it seemed like such an advanced library, and while it is, I managed to replicate the very basic functionality of some of the core jQuery methods, which I learned to love because of the succinctness of its use. Lastly, the reading for the night included jQuery events, callbacks, and effects.

Concepts learned/used: The basics of jQuery, and DOM traversal and modification using vanilla Javascript and jQuery.

Note: Source code for Day 2 of Javascript can be found in my public Github repository.

Day 3 (24 hours of dynamic jQuery)

This is where things get interesting. Applying jQuery to dynamically modify the DOM and transitioning from one state to the other via effects is the core of front-end web development. It also lets you use your creativity to create really cool animations that will enhance your user experience. Day 3 went by quicker and was composed of pulling together 3 common DOM effects:

A form validator that gives you feedback as you type into the form (e.g. number of characters remaining, do password and password confirmation match? etc).

A drop-down menu that slides up and down as the user clicks and that changes the background color on hovering an element.

A photo tagging box which may be better explained by using that telling (try it here). In essence, you can tag a person by clicking on their face on a picture and selecting from a drop-down of names.

Concepts learned/used: The Javascript event loop, jQuery events, callback functions, effects, intervals, and timeouts.

Note: Source code for Day 3 of Javascript can be found in my public Github repository.

Day 4 (24 hours of JS design patterns)

In the reading the night before I learned about how to better organize my code (which by now was starting get big and to look like spaghetti code). The easiest way to refactor code so it doesn’t pollute global variables and functions is to wrap everything that is related in an object. Also, having some experience with using Ruby on Rails, it made sense to organize my objects following an MVC pattern, so right off the bat, learning how to use this object pattern helped me write cleaner code. Day 4 I put these concepts into practice by building:

A card matcher game in the morning. The goal is to match two cards from memory.

In the afternoon/evening, I built snake! Yes, the oldie, but goodie game we all played in the Nokia cellphones. Give it a try, it’s fun!

Concepts learned/used: The object pattern, front-end MVC, and old games for kids.

Note: Source code for Day 3 of Javascript can be found in my public Github repositories here (card matcher) and here (snake).

Day 5 (24 hours of Game Development)

I spent all day trying to build Scrabble. It was a bit more complicated than I initially thought, but at the end of the day we (Olga, my pair programming partner, and I) managed to deliver a “working” prototype. Some of the biggest challenges we faced were finding out what constitutes a valid player move, and the switching of players between turns. Luckily, nothing was impossible, and with a little more time and dedication, we managed to implement this logic.

Note: Source code for Day 5 of Javascript (Scrabble script) can be found in my public Github repository.

Recap

This brings to an end my first 120 hours of Javascript. It definitely felt like drinking from a firehose, but I feel like sometimes getting out of your comfort zone and what you are used to is the key to exponentially grow your learning curve, and I definitely feel like I learned a lot. I’m looking forward to building more projects using Javascript, learning about front-end frameworks such as Angular.js, Ember.js and Backbone.js, refactor some of my old code, and add more Javascript to my Rails apps that wasn’t copy-pasted from Stack Overflow (now I can build it!).

PS: Please play Snake for me and tell me what you think! I loved building this game, and had fun playing it.

Thanks for reading my first-ever blog post!