Building More Lite-Brite Functionality

We have an almost-working Lite-Brite and you can probably partly (or even 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, drinking lots of coffee, 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 options, we want the active color to change to the selected color.
When the user clicks a dot, that dot should change to the color of the most recently selected color.
Next level: Provide some sort of indication to the user as to which color is currently selected.

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

Implementing Functionality

Option 1: Code the solution (code-along).

Option 2: Copy and paste from the final solution.

JavaScript Functionality Summary