JavaScript Practice | Day 14 – Color Picker Game

Posted in JavaScript, Programming Tagged: , , , ,
Color Picker Game - JavaScript Practice

Hello and welcome back to JavaScript Practice! Long time, no see!

I apologize for my lengthy absence. Hawaii tried to ruin me and almost succeeded. I didn’t think I was one for sunny, warm, colorful paradise until I went there and experienced it first hand (Normally, I like my cold, gray, rainy Oregon weather). While I was there, I danced my heart out (The trip was for a West Coast Swing event), ate a hell of a lot of good food, and even tried surfing (Keyword here is tried)! I came back and have been a complete mess for the last week or so, but I’m back now, hopefully for good.

Color Picker Game

Admittedly, this game is not of my own idea. I first learned it within the Web Developer Bootcamp by Colt Steele, but honestly, it probably wasn’t his idea either. It’s been long enough since I learned it, that I’ve completely forgotten how to build it. I need to add cool stuff to my “Cool Stuff” portfolio, so here we are. Plus, I’m a web developer by trade, so I need to try to keep these practices more in the web development world vs the software engineering world for now.

Essentially, the game is what it sounds like it is. We’re going to create a number of boxes of different colors, then try to choose the box which is holding the secret color. Almost like a “choose a number between 1 and 6”, but with colors instead. If an incorrect color is chosen, that box fades away. When the correct color is chosen, all boxes (re)appear and change to the secret color! We may even add in some kind of point system where the possible score decreases with each incorrectly chosen color.

The Look. The Feel.

For whatever reason, I started with designing the look of the game first. I thought it the right way to go, because if you can’t visualize the game, it’s going to be harder to know what we’re trying to do in the functionality. Also, and I guess the main point, without the being able to link to the boxes in the HTML, we won’t have any functionality anyway. So here’s what I did. Pretty simple design with 6 boxes.

Day 14 Section 1 HTML

In the bootcamp, Colt made two difficulties between 3 boxes and 6 boxes. I like this idea and may take it one step further, but for now, we have 6 boxes. I’ve included the HTML with this because we’re going to need a pretty specific set up to make our functionality work correctly. If you need help making your design look like mine, please let me know and I can give you my CSS, but try to add your own spin on it first.

Why Did I Start My JavaScript Here?

I feel like I may have started my JavaScript backwards, in a way. I went straight for the recognition of the boxes vs color creation. Then I kind of saw this and doubled back, so my JavaScript is kind of a mess. Luckily, I didn’t get far into it before the hour came up, so I don’t have much to show you.

JavaScript Code

First, I created a variable for the various boxes on the page. I defined it using getElementsByClassName because this will identify all the boxes at once vs assigning them each ID’s. You all should know by now I’m big into console.log’s, so of course, I tested this out to make sure we were seeing all of them (hint: we were!). After that, I ran a loop to cycle through each box and threw in a console.log to make sure we were getting the correct number of passes through the loop.

Within the loop, we want to add our functionality for our buttons. If you’re wondering why, this is the shortcut path we get to take for identifying the boxes by class. It’s easier, believe me. So, we add a “click” event listener on each box at i. Add a console log and you get a result where when you click any of the boxes, you log a comment of your choice.

At the bottom of the document, I started the random color idea. I’m a little rough with the Math dot library, so this took a little doing. Essentially, you’re just defining a variable with a number between 0 and 256. We’ll later run this a few times and turn it into an rgb color. Math.random gives you a number between 0 and 1. Multiply that by 256 to get a decimal between 0 and 256. Then, use Math.floor to bring that number back to a plain integer.


Yes, that’s all I got done today, but that’s good! Breaking the project down into smaller steps makes it easier to comprehend. Plus, I have other things to do. 🙂

Tomorrow, we’re going to try to identify each individual box, assign each box it’s own color, and who knows what else. It doesn’t mean we’ll accomplish it all, but it’s good to set some goals.

For now, Thank you much.

Written by Tyson Hood

One comment on “JavaScript Practice | Day 14 – Color Picker Game

Leave a Reply

Your email address will not be published. Required fields are marked *

Like what you see and want more info?

Click below to get on the mailing list.

Yes, send me some info!