# 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()`