Back to Setup Page

Building More Lite-Brite Functionality

We have an almost-working Lite-Brite that you can probably partly or fully explain how it’s working. This is huge! In this section, we will add one final piece of functionality.

Reminder: We won’t go deep with how each little thing in JavaScript works today.

Planning for New Functionality

A lot of people have the misconception that coding is all about typing really fast, in a basement, usually alone, etc. That’s not really the case. Most software developers say they spend at least 40% of their time planning and/or collaborating with other developers on how to design solutions in code.

Planning a PB&J

Before we worry about the code, let's engage in an important exercise.

You are trying to program a robot to make you or your kids a peanut butter and jelly sandwich. Jot down the steps you would tell the robot to take.

Here's a video of a dad following the directions his kids gave him.

Planning Functionality

Similar to the way we had to list out every specific step (and the fact that it was probably good to make a rough draft for our robot before sending it into the kitchen!), we should do the same thing with code.

Before we plan though, let’s get clear on what we want our next piece of functionality to be:

  • When the user clicks one of the color boxes, then clicks a dot, that dot should change to the color of the color box that was most recently clicked
  • When the user clicks a different color box, then clicks a dot, that dot should change to the newly selected color
  • Next level: provide some sort of indication to the user as to which color is currently selected (like an outline around the color box)

Let’s write the pseudo-code in the file. You can follow along or just watch!

Implementing Functionality

Option 1: Live code solution (code along or watch)

Option 2: Un-comment next chunk of code in starter kit

A final working solution can be found here

JavaScript Functionality Summary

  • Planning how we will approach a solution is just as important as the code itself
  • The planning/pseudo-coding process is usually more fun and effective when done collaboratively
  • You likely have some gaps in fully understanding the final solution - again, that is OKAY - the goal of this was not to go deep, but spark some interest for what is possible!

Next Section: Extensions
Wrap Up