The aim of this puzzle: Make the bulb turn blue when you tap the blue button.
Walkthrough of the solution: You’ll need to create a new function called lightBulbBlue
. You do this using the function() {}
key and then typing in the name of the new function. Inside of the curly brackets {}
, you need to use an .attr()
to change the ‘fill’ of the bulb
to ‘blue’ – just like how the lightBulbRed
function does it for ‘red’. Finally, you need to connect the button to the function using .on('click',...)
You want the lightBlubBlue
function to run when you click on the blueButton
.
Sample code solution:
(Tap below to reveal)
function lightBulbRed(){
bulb.attr('fill', 'red');
}
function lightBulbBlue(){
bulb.attr('fill', 'blue');
}
redButton.on('click', lightBulbRed);
blueButton.on('click', lightBulbBlue);
JavaScript Concepts: Code Block (function), Member Expression
D3 Concepts: .attr(‘fill’,), .on(‘click’,)