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()