Coding Log — February 3rd, 2018 — Day 32

Coding Time: Full Day

Here’s what I did today:

Finished Building the Color Game

It’s done! It took 2 days, but it’s done.

This project is 200 lines of JavaScript despite Colt saying the end result is about 100 lines. I wonder where I went wrong. I will be watchin his codealong below.

Here are the requirements, all fulfilled. There were more than I expected in the end. I didn’t map out every single feature of the app. This didn’t cause much grief, but I need to get better at this. I need to make my requirements lists thorough, even if they’re absurdly long.

  1. Generate an RGB color randomly and convert it into text form.
  2. Convert that text form into a block of color.
  3. Display 6 random blocks of color.
  4. One of those 6 is the same color as the top text form of that color.
  5. That spot always changes to a random one of the 6.
  6. Click on a color that doesn’t match: color block turns black
  7. Click on the right color: All 6 + background turn to that color
  8. Difficulty toggle: Easy has 3 blocks, Hard has 6
  9. When choosing the wrong anwer, a try again message appears
  10. Site is mobile-responsive

This app wasn’t too hard, but I learned a lot.

I finally figured out what arrays are for. They’re not just a list. Gordon & Colt both explained it this way. I think it helped a lot once I realized it’s more like a list of variables. You can do anything that you can with a variable, but you can also have the JavaScript talk to multiple variables at once with an array.

I also sort of got better at forEach. I can’t say I’m a master yet, but I’ve at least used it.

Other than that, it’s a real app! I styled it using Bootstrap (thought I’d hate it, I was righht). It looks super professional compared to just listing it all out using text. My only regret is that there’s no transitions. I still don’t know how to do those in JavaScript or CSS. I should probably learn.

Continued Watching The Web Developer Bootcamp

I decided to watch the code along for the Color Game to see what I missed. Here are my notes:

Well, first is the biggest mess-up which added 70 more lines of code. querySelectorAll + an array apparently work just fine together.

So, instead of the ridiculous workaround with ids I had, this should’ve worked just fine:

for (var i = 0; i<.squares.length; i++) {
    squares[i].style.backgroundColor = colors[i];

The squares variable represents a class in HTML. Apparently, those are naturally arrays. The colors is are just the random colors that get generated.

That’s all the code I needed to push 6 (later random) colors to my HTML & I could use that base to add click listeners to all 6 colors at once. Seriously. The more you know.

I also noticed I forgot an entire part of the app. Once you win the game, the “New Colors” text changes to “Play Again?” This isn’t a big deal since I obviously know the code to achieve this, but I’m disappointed that I didn’t even see it as part of the requirements.

I also noticed I still don’t have enough practice with function arguments/parameters to use them. I could’ve used them to cut down on another 20 lines of my code. There’s a lot of rewriting the exact same code in different places and in reptitive ways in my code.

I didn’t do too bad. My code just needs to be quite heavily refactored. The only question is if it’s more correct to refactor immediately or to build more projects and come back to it later? I don’t know. For now, I’m moving on.

Tomorrow’s To-Do’s

There’s a lot of possibilities for tomorrow.

There’s 1-2 more apps to make in The Web Developer Bootcamp. There’s You Don’t Know JS. There’s JavaScript30. There’s learning APIs and OOP so I can do the FCC Projects.

I probably want to at least start JavaScript30 tomorrow, and then move onto whichever other option I want to pursue.

Comments can be sent via email.

Subscribe via RSS Feed.