Red Light Green Light explainer

Aim of this puzzle:
Use boolean control to determine the color of an SVG shape.

Walk through of the solution:
The boolean values of true and false can be used with if statements to control the flow of your code. If a condition is true, then one block of code runs. If it’s false, a different block of code runs instead.

In the code that you start off with, there’s a variable, greenLight, 3 SVG circles, topCircle, middleCircle, and bottomCircle, and an if statement. The if statement checks the value of greenLight. If greenLight is true, the 'fill' attribute of bottomCircle is set to 'green', otherwise the 'fill' attribute of topCircle is set to 'red'. As it is, the value of greenLight is false and the traffic light is red. In this puzzle, you’ll change the value of greenLight to make the traffic light green.

To complete the puzzle, change the value of greenLight to true.

Sample code solution:
(Tap below to reveal)

let greenLight = true;
let topCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 50);
let middleCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 100);
let bottomCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 150);

if (greenLight === true){
    bottomCircle.attr('fill', 'green');
} else {
    topCircle.attr('fill', 'red');
}

JavaScript Concepts: Variable, If Statement, Boolean Control
D3 Concepts: Attribute, .append()