Half And Half pt-br Explainer

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');