Green Blue Red Puzzle explainer

Aim of the puzzle:
Use the remove method .remove() to delete an SVG shape.

Walk through of the solution:
The remove method .remove() deletes an SVG shape. To use it, add .remove() to the end of the shape you want to delete.

In the code that you start off with, there is a function, removeRed, and an event handler that calls removeRed when red is tapped. The removeRed function is incomplete so nothing happens when you tap on red. In this puzzle, you’ll update the removeRed function so that when you tap on red it disappears.

To complete the puzzle, attach .remove() to the end of the red variable inside the removeRed function. Now, whenever red is tapped, the removeRed function will run and red will be removed.

Sample code solution:
(Tap below to reveal)

function removeRed() {

red.on('click', removeRed);

JavaScript Concepts: Variable, Function Declaration, Event Handler
D3 Concepts: .remove()
Additional Code (hidden code that runs before the puzzle’s code):

var svg = canvas.append('g');


let red = svg.append('rect').attr('fill', 'rgb(241,37,2)').attr('height', '190').attr('width', '240').attr('x', -120).attr('y', -100)
let blue = svg.append('ellipse').attr('fill', 'rgb(0,114,203)').attr('rx', 50).attr('ry', 80).attr('cx', 69).attr('cy', -5)
let green = svg.append('rect').attr('fill', 'rgb(1,161,35)').attr('height', '160').attr('width', '80').attr('x', -115).attr('y',-85)

1 Like