Started From The Top es-419 Explainer

Explicador de Comenzaste desde arriba

Objetivo de este acertijo: Crear un círculo rojo que tenga un radio de 35 y colocarlo en una ubicación aleatoria en la parte superior de la pantalla.

Tutorial de la solución: Debido a que probablemente querremos ver nuestra forma más adelante, crearemos una nueva variable llamada balloon con la tecla let. Después del signo igual de let balloon = , debemos crear la forma SVG usando svg.append(). Para decirle al código que la forma debe ser un círculo, ponemos el string 'circle' dentro del paréntesis de append(). A continuación, podemos definir todos los atributos del círculo usando llamadas .attr(). Para que el círculo sea rojo, define 'fill' en 'red'. Para que el radio sea 35, usa .attr('r', 35). Dado que el círculo debe estar en la parte superior, queremos que el valor 'cy' sea 35, que es lo mismo que el radio. Por último, para hacer que la ubicación horizontal sea aleatoria, elegimos una posición al azar usando pickRandom(position) y usamos ese valor como el atributo `‘cx’.

Tarjetas de repaso:
Si quieres practicar en algunas tarjetas anteriores como ayuda con Comenzaste desde arriba, estas 3 deberían ayudarte. Cuando las resuelvas, intenta averiguar qué hace cada parte del código y cuándo es importante el orden de las llamadas de función.

  • Haz un muñeco de nieve
  • En el medio
  • Mapa de lugares

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

Dado que esta parte del tema final del curso Animaciones II y evalúa sus conocimientos, no hay solución del código de ejemplo.

Conceptos de JavaScript: identificadores, expresión de miembro, declaración de la variable

Conceptos de JavaScript: pickRandom()

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

Código adicional (código oculto que se ejecuta antes del código del acertijo):

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

Hola, mi código esta bien, peor no lo acepta ¿Qué debo hacer?

2 Likes

Hola nucho gusto te pregunto ya pudiste con este acertijo

2 Likes

No lo acepta porque tienes que hacer todo unido, así: