Light Switch pt-br Explainer

Explicação de Interruptor de luz

Objetivo deste desafio: Faça a função turnOn girar o interruptor e acender a luz.

Passo a passo da solução: Ao tocar no interruptor de luz, ele executará a função turnOn, mas essa função está vazia. Precisamos fazer duas coisas: mudar o interruptor de luz para 35 e mudar a cor da lâmpada para amarelo. Isso pode ser feito com duas chamadas .attr(). Primeiro, lightSwitch precisa ter uma nova localização vertical, o que significa que seu atributo 'y' deve ser definido. Para tornar a lightBulb amarelo, é necessário mudar seu atributo 'fill' para 'yellow'.

Solução do código de exemplo:

(Toque abaixo para revelar)


function turnOn() {

lightSwitch.attr('y', 35);

lightBulb.attr('fill', 'yellow');

}

lightSwitch.on('click', turnOn);

Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores

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

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


var switchPlate = svg.append('rect');

switchPlate.attr('width', 40).attr('height', 70).attr('fill', 'white').attr('x', 50).attr('y',30).attr('stroke','grey');

var innerPlate = svg.append('rect');

innerPlate.attr('width', 30).attr('height', 60).attr('fill', 'lightgrey').attr('x', 55).attr('y',35);

var lightSwitch = svg.append('rect');

lightSwitch.attr('width', 30).attr('height', 30).attr('fill', 'grey').attr('x', 55).attr('y', 65);

var stem = svg.append('rect');

stem.attr('width', 2).attr('height', 100).attr('fill', 'grey').attr('x', 180);

var base = svg.append('rect');

base.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 100).attr('stroke','grey');

var base2 = svg.append('rect');

base2.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 107).attr('stroke','grey');

var base3 = svg.append('rect');

base3.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 114).attr('stroke','grey');

var lightBulb = svg.append('circle');

lightBulb.attr('r', 30).attr('fill', 'black').attr('cx', 181).attr('cy', 152);
1 Like

It’s very nice. Thanks

1 Like