Started From The Top pt-br Explainer

Explicação de Começar do zero

Objetivo deste desafio: Criar um círculo vermelho que tenha um raio de 35 e colocá-lo em um local aleatório na parte superior da tela.

Passo a passo da solução: Como, provavelmente, vamos querer ver nossa forma mais tarde, vamos criar uma nova variável chamada balloon usando o comando let. Após o sinal de igual de let balloon = , precisamos criar a forma SVG usando svg.append(). Para dizer ao código que a forma deve ser um círculo, colocamos a string 'circle' dentro dos parênteses append(). Em seguida, podemos definir todos os atributos do círculo usando chamadas .attr(). Para tornar o círculo vermelho, defina o 'fill' como 'red'. Para que o raio seja 35, use .attr('r', 35). Como o círculo deve estar na parte superior, queremos que o valor de 'cy' seja 35, que é o mesmo do raio. Por último, para tornar a localização horizontal aleatória, escolhemos uma posição aleatória usando pickRandom(position) e usamos esse valor como o atributo 'cx'.

Cartões de revisão: Se você está procurando praticar em algumas lições anteriores para ajudá-lo em Começar do zero, estes 3 devem ajudá-lo. Ao resolvê-los, tente descobrir o que cada parte do código faz e quando a ordem das chamadas de função é importante.

  • Fazer um boneco de neve

  • No meio

  • Mapa de lugares

Solução do código de exemplo:

(Toque abaixo para revelar)

Como isso é parte do tópico final do curso Animações II e está testando seus conhecimentos, não há solução do código de exemplo.

Conceitos de JavaScript: Identificadores, Expressão de Membro, Declaração de Variável

Conceitos de JavaScript: pickRandom()

Conceitos de D3: .append(), .attr('fill',), .attr('r',), .attr('cx',), .attr('cy',)

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


var position = [];

for (var i = 35; i <= window.innerWidth - 35; i += 5) {
position.push(i);
}

svg.append('rect').attr('fill', 'silver').attr('y',165 + 35).attr('width', window.innerWidth).attr('height', window.innerHeight - 200);

2 Likes

Obrigado pela força valeu mesmo.

Executei o Código de trás para a frente após declarar a variável baloon! Foi a única forma que encontrei de fazê-lo.