Explicador de Luz roja, luz verde
Objetivo de este acertijo:
Usar el control boolean para determinar el color 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, hay una variable, greenLight
, 3 círculos SVG, topCircle
, middleCircle
y bottomCircle
, y una if statement. La if statement verifica el valor de greenLight
. Si greenLight
es true
, al atributo 'fill'
de bottomCircle
se define en 'green'
; de lo contrario, el atributo 'fill'
de topCircle
se define en 'red'
. Como está, el valor de greenLight
es false
y el semáforo está en rojo. En este acertijo, cambiarás el valor de greenLight
para que el semáforo esté en verde.
Para completar el acertijo, cambia el valor de greenLight
a true
.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
let greenLight = true;
let topCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 50);
let middleCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 100);
let bottomCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 150);
if (greenLight === true){
bottomCircle.attr('fill', 'green');
} else {
topCircle.attr('fill', 'red');
}
Conceptos de JavaScript: variable, if statement, control boolean
Conceptos de D3: atributo, .append()