Color Clicker pt-br Explainer

Explicação de Controle de cor

Objetivo deste desafio: Faça com que o círculo mude para uma cor aleatória cada vez que tocar nele.

Passo a passo da solução: Quando você executa seu programa, ele vê que você criou uma função chamada changeColor(). Ele não a executa imediatamente, mas espera até que outra parte de seu código a chame à ação. Portanto, a primeira coisa que é de fato executada é o circle.attr('fill', pickRandom(color)); logo no início. Isso define o circle para uma cor aleatória. Em seguida, a função é ignorada e passa para a linha circle.on('click', changeColor);. Essa parte é complicada, mas ajuda se você a ler de trás para frente: ela executará a função changeColor uma vez que você 'click' .on() círculo. Então, você clica no círculo, e ele fica preto porque você precisa olhar dentro da função em que define o atributo 'fill' e mudá-lo para pickRandom(color), assim como faz a primeira linha. Sua função deve executar o mesmo código da primeira linha, mas precisa funcionar toda vez que você tocar no círculo e é exatamente isso que faz a última linha do programa.

Solução do código de exemplo:

(Toque abaixo para revelar)


circle.attr('fill', pickRandom(color));

function changeColor() {

circle.attr('fill', pickRandom(color));

}

circle.on('click', changeColor);

Conceitos de JavaScript: Bloco de Código (função), Funções de Chamada, Aninhamento de Chamada, Identificadores

Conceitos do Grasshopper: pickRandom()

*Conceitos de D3: .attr(‘fill’,), .on(‘click’,)

Código Adicional (código oculto executado antes do código do desafio):

var circle = svg.append('circle').attr('r',window.innerHeight/2-20).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

Preciso de ajuda nao consigo fazer o codigo!!!