Explicação de Metade e metade
Objetivo deste desafio: Fazer o retângulo do lado direito mudar de cor sempre que você tocar nele
Passo a passo da solução: O retângulo esquerdo já está funcionando, então você só precisa copiar seu código e mudar left para right. Vamos começar com a definição da função changeRight(). Essa função deve definir o atributo 'fill' do retângulo right para uma cor aleatória. pickRandom(color) lhe dará uma cor aleatória que pode ser usada como o 2º argumento de right.attr('fill',...).
Para fazer essa função ser executada sempre que o retângulo right for tocado, você usa um manipulador de eventos. O método .on('click',...) pode ser aplicado ao retângulo right, de modo que sempre que o retângulo right for tocado ou clicado, ele executará a função retorno de chamada no 2º argumento. No final de seu código, adicione right.on('click', changeRight). Certifique-se de usar changeRight sem parênteses, pois ele está sendo usado como função retorno de chamada.
Solução do código de exemplo:
(Toque abaixo para revelar)
function changeLeft() {
left.attr('fill', pickRandom(color));
}
function changeRight() {
right.attr('fill', pickRandom(color));
}
left.on('click', changeLeft);
right.on('click', changeRight);
Conceitos de JavaScript: Bloco de código (função)
Conceitos do Grasshopper: pickRandom()
Conceitos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr(r,), .on('click',...)
Código Adicional (código oculto executado antes do código do desafio):
let left = svg.append('rect').attr('width',(window.innerWidth-50)/2).attr('height',window.innerHeight-50).attr('x',25).attr('y',25);
let right = svg.append('rect').attr('width',(window.innerWidth-50)/2).attr('height',window.innerHeight-50).attr('x',window.innerWidth/2).attr('y',25);
left.attr('fill', 'darkgreen');
right.attr('fill', 'gold');