Half and Half explainer


#1

The aim of this puzzle: Make the rectangle on the right side change color whenever you tap it

Walkthrough of the solution: The left rectangle is already working, so you just need to copy its code and change left to right. Let’s start with the changeRight() function definition. This function should set the 'fill' attribute of the right rectangle to a random color. pickRandom(color) will give you a random color which can be used as the 2nd argument of right.attr('fill',...).

To make that function run whenever the right rectangle is tapped, you use an event handler. The .on('click',...) method can be applied to the right rectangle, so that whenever the right rectangle is tapped or clicked, it will run the callback function in the 2nd argument. At the bottom of your code, add right.on('click', changeRight). Be sure to use the changeRight without parentheses, because it’s being used as a callback function.

Sample code solution:
(Tap below to reveal)

function changeLeft() {
  left.attr('fill', pickRandom(color));
}
function changeRight() {
  right.attr('fill', pickRandom(color));
}

left.on('click', changeLeft);
right.on('click', changeRight);

JavaScript Concepts: Code Block (function)

Grasshopper Concepts: pickRandom()

D3 Concepts: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr(r,), .on('click',...)