Coding Log — January 29th, 2018 — Day 31

Coding Time: Half Day

Here’s what I did today:

Started Building Thing #6

I decided to take a pretty huge leap and go from building small components in tinyjs to a full-page app that deserves its own Github repository.

This project is a code-along from The Web Developer Bootcamp, but I’m choosing to tackle it all on my own.

The end result should look something like this.

It feels so big. It took me a few days to even reach the point where I was comfortable writing down the requirements for the project. They’re not very clear, but here they are:

  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

The core functionality is only in the first 7 requirements. After that, it’s just styling. I can focus on that later.

I got requirements 1 & 2 fairly easily. However, when it came to displaying 6 random blocks of color, I knew I could do it randomly with 6 different functions that all align to 6 different element IDs. But, that just isn’t clean and it won’t work with the later portions of the requirements.

I think I need to start with requirement #3. I need to somehow use arrays or objects to have one function apply to 6 different things. I don’t really know enough about arrays and objects to do this, so this is a great excuse to actually go back and review the JS Basics part of the bootcamp!

I got to the point where it displays 6 random colors and there’s a string output of one of the colors of the 6. This means I mainly just have all the clicking logic left.

  1. Click on a color that doesn’t match: that one turns black
  2. Click on one that does match: all 6 colors go to that color

& then the styling/different modes. Meh on that part.

I think the hard part is done, and I can hopefully easily do the rest tomorrow. I set down a good foundation today that I can build on tomorrow.

Continued Watching The Web Developer Bootcamp

I went back and rushed through Intro to JavaScript, then skipped forward to the sections on Arrays & Objects.

I didn’t get very far until I remembered all I needed to about Arrays, so I didn’t even fully finish the first video of that section. Oh well.

Tomorrow’s To-Do’s

Finish the Color Game Project!

Comments can be sent via email.

Subscribe via RSS Feed.