Sun Or Moon es-419 Explainer

Explicador de Sol o luna

Objetivo de este acertijo:
Usar el control boolean para determinar el resultado de una forma SVG.

Tutorial de la solución:
Los valores boolean de true y false se pueden usar con las if statements para controlar el flujo de tu código. Si una condición es true, se ejecuta un bloque de código. Si es false, se ejecuta un bloque de código diferente.

En el código con el que comienzas, la función sunOrMoon selecciona un time del arreglo times. Si time incluye'pm', entonces genera una luna. Si time no incluye'pm', genera un sol. Como está, el control boleean dentro de la if statement es incorrecto; los valores boolean no son strings. Como resultado, la función siempre genera un sol. En este acertijo, cambiarás el valor del string 'true' a true boolean para que la función se ejecute correctamente.

Para completar el acertijo, cambia 'true' a true dentro de la if statement. Pulsa un par de veces el botón de reproducción dentro de la solución de ejemplo para ver la luna cuando se elija un time con 'pm'.

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

let times = ['7am', '9am', '5pm', '8pm'];
let circle = svg.append('circle').attr('r',50).attr('cx', 100).attr('cy', 50);

function sunOrMoon (times) {
    
    let time = pickRandom(times);
    
    if (time.includes('pm') === true){
       circle.attr('fill', 'rgb(227,224,219)');
       svg.append('circle').attr('r', 50).attr('cx', 130).attr('cy', 50).attr('fill', 'rgb(19,50,74)');   
    } else {
       circle.attr('fill', 'rgb(252, 212, 64)');
    }    

    console.log(time);
}

sunOrMoon(times);

Conceptos de JavaScript: variable, if statement, control boolean, string
Conceptos de D3: atributo, .append()

1 Like