Exploring Lite-Brite Functionality
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 2, change
red. Re-run the program and click a dot.
- Line 2: A variable called
activeColoris set to “black”. This doesn’t mean much yet.
- Line 5: We accessed the
dot-containerelement from the HTML file, and stored a reference to it in our JavaScipt code. This helps for line 7…
- Line 7: We told the program to be on the lookout for our user to click anywhere inside the
dot-container. If/when that does happen, a function called
- Line 10: We declare the
- Line 12: We ask the program if it was a dot that was actually clicked on (as opposed to the black background in between the dots)
- Line 14: We change the color of the dot that was clicked on, to the color stored in the
Here is a marked-up screenshot that illustrates what-is-connected-to-what.
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 5, change
container. Run the program (it should no longer work). Now, on line 7, change
containerand then run the program. It should be back to working!
- Finally, on line 2, change
active. 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?
Exploring Functionality Summary
- Each piece of the puzzle has to be connected to the other (this is why spelling and capitalization can be really important!)