Exploring Lite-Brite Functionality

Back to our human metaphor: the JavaScript code is the brain and muscle of our webpage! Similar to how the neural and muscular systems are much more complex than the skeleton, the JavaScript work we do will be more complex that our work with HTML and CSS. Please remember: the goal is not for you to be a pro at the end of this, but to get a little bit of exposure!

Understand the Existing Functionality

Click around your Lite-Brite; see if you can “color in” any of the dots. What happens?

Explore to Learn:

On line 1 of the JS file, change black to red. Save the program and click a dot.

Breakdown:

Now, let’s walk through each line of the existing JavaScript to understand what’s happening:

Line 1: A variable called activeColor is set to “red”. This doesn’t mean much yet.
Line 2: A new variable is declared called dotContainer, which stores a reference to the dot-container element from the HTML file and then only the div elements within that element. This helps for line 4…
Line 4: We told the program to be on the lookout for our user to click on the dotContainer. If/when that does happen, a function called changeDotColor will run.
Line 6: We declare the changeDotColor function and pass in the event as a parameter, which in this case will be a click.
Line 7: We change the background color of the dot that was clicked on, to the color stored in the activeColor variable.

Break Code to Learn

That was a LOT of info! Sometimes it soaks in better when we have a chance to poke at the code.

On line 1, change activeColor to active. Run the program and click on a dot (it should no longer work). Now, on line 7, change activeColor to active and then run the program. It should be back to working!
Finally, on line 2, change dotContainer to dots. Run the program (you guessed it, it should no longer work). Why did things break? What else could you modify at this point to get the functionality back?
Sometimes, looking at the errors generated by an action can help. Click on the `Console` button along the bottom to see some of these errors (you may need to resize your window).

Exploring Functionality Summary