The Odin Project – JavaScript Track

I’m very pleased with myself for thinking of a better title than simply ‘JavaScript Sucks’. I’ll likely have to use that one at some point, so at least now I still can. JavaScript just tends to drive me nuts. I don’t like the syntax. I feel like I always have a zillion closing brackets to keep track of and I get confused. And arrow functions are often hard to read. Or maybe I’m just dumb.

However, I actually did something reasonably fun today with JavaScript (on a beginner level; don’t get excited).

I’ve spent some time the last few days trying to improve my JavaScript because I suck at it. It’s also probably closer to what I ‘should’ be working on, since I don’t think Django is used at the place I might get a job. I’m definitely not done with Django, because I like it, and may need it after all if I fail and have to go looking for a job somewhere else. But it was time for a little break.

As I mentioned in my last post, the Odin Project has recently released a full stack JavaScript curriculum. Originally they only had a Ruby based track, which people say is very good, but I wasn’t interested in learning Ruby so I didn’t bother looking. Now I’m finally checking it out since I can always use some more help trying to learn the dreaded JavaScript. One really big bonus here is that all the content is completely free. I love free stuff.

The JavaScript track is split into five sections:

  • Web Development 101
  • JavaScript
  • HTML & CSS
  • Node.js
  • Getting Hired

For those interested, the Ruby track has a similar layout:

  • Web Development 101
  • Ruby Programming
  • Databases
  • Ruby on Rails
  • HTML & CSS
  • JavaScript
  • Getting Hired

I’m currently in the Web Development 101 section of the JavaScript track. It covers basic HTML, CSS and JavaScript, and how to use Git. It also takes you through setting up Ruby. This probably should be removed because who wants to go through all that when they aren’t planning on using it? As a Windows user, they were recommending I set up a virtual machine for installing Ruby, so I just skipped over all that stuff. I can see what they’ve done – the only actual new content is probably the Node.js section, the others are all just the same as their Ruby track. That’s fine but they should edit where required to keep the content relevant.

I skimmed over the non-JavaScript stuff so far since I didn’t need to study HTML, CSS or Git. From what I can see though, this is a great resource. There are explanations and exercises on the Odin Project’s website itself, as well as a bunch of projects, but there are also lots of links to other free resources that are meant to supplement the content provided.

I’ve been working through the JavaScript parts of the Web Development 101 section. I had to make a rock, paper, scissors game that ran in the console, and then I did a bunch of exercises and didn’t struggle too badly with them, so that was pretty cool. I did, however, get frustrated a few times with how awkward it was to do some things that are easy in Python.

Today I completed the next project which was to take the rock, paper, scissors game and put it into an actual web page. I sighed, as I usually do when faced with doing a bunch of JavaScript, and began. I did finish, but my code is horrible. I have this gigantic block of if statements. And a bunch of global variables. It’s probably twice as long as it should be. But it works!

I did cheat a little though. I have yes/no buttons that are hidden initially and then show up when you finish so that you can indicate whether or not you want to play again. When I try to add the class that hides them after the player selects ‘yes’, it can’t seem to see the global variable that I set for the element here:

const again = document.querySelector("#reset");

That exact same variable is accessed just fine by other functions using this:

again.classList.toggle("hidden");

Just not by my reset one. And yeah, I know what you’re probably thinking. What kind of variable name is ‘again’ anyway? Probably not a very good one. I ended up making it work by doing this instead of using the variable:

document.querySelector("#reset").classList.toggle("hidden");

This bothers me though. Obviously I’m doing something wrong. I’ll go back and refactor this, probably, and hopefully discover what the problem is.

If you want to see my code I’ll show you the Github link but otherwise I am not posting it on here because it’s so bad it’s embarrassing. Not only is the code messy but the web page isn’t very pretty either since I just don’t care a lot about front end stuff. I think it would be more beneficial for me to move on at this point then spend a bunch of time refactoring though, so I’m going to start work on the next project which is an Etch-A-Sketch. I have to admit that although I don’t like JavaScript, I do like making games, even if they are small and silly, so I’m glad that the projects have been games so far.

It’s getting to be about time to set up a job interview, but I’m scared. I’m worried about failing the technical test. I’m also not really a people person so I may just do something else wrong. But I guess I have to at least try.

I hope all you US people are having a great 4th of July. We’re celebrating by eating pizza because pizza is awesome.