Construyendo un sistema de semáforos con JavaScript

Introducción

En este proyecto, aprenderás a crear un sistema de semáforo que cambia el color de la luz de rojo a verde después de un cierto intervalo de tiempo. Este proyecto te ayudará a entender los conceptos básicos de JavaScript y cómo manipular el DOM para mostrar diferentes elementos basados en eventos basados en el tiempo.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar una estructura básica de proyecto HTML y JavaScript
• Cómo implementar una función para cambiar la visualización del semáforo a rojo después de 3 segundos
• Cómo implementar una función para cambiar la visualización del semáforo a verde después de 6 segundos
• Cómo coordinar la ejecución de las funciones de luz roja y verde utilizando async/await
• Cómo probar el sistema de semáforos y asegurarse de que funcione como se espera

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Manipular el DOM utilizando JavaScript para cambiar la visualización de los elementos HTML
• Utilizar setTimeout() para programar eventos basados en el tiempo
• Administrar operaciones asincrónicas con async/await
• Probar y depurar tu código JavaScript

Configurar la estructura del proyecto

En este paso, configurarás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

1. Abre el editor. Deberías ver index.html, trafficlights.js y algunos archivos de imagen en el directorio /home/labex/project.
2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.
3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Implementar la función de la luz roja

En este paso, implementarás la función para cambiar la luz a roja.

1. En el archivo trafficlights.js, localiza la función red().
2. Establece una variable encima de la función red y da el valor inicial:

let trafficlightsTimer = 3000;
// función red() {...}

3. La función red() debe cambiar la visualización de la luz predeterminada a none y la visualización de la luz roja a inline-block después de 3 segundos.

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Implementar la función de la luz verde

En este paso, implementarás la función para cambiar la luz a verde.

1. En el archivo trafficlights.js, localiza la función green().
2. La función green() debe cambiar la visualización de la luz roja a none y la visualización de la luz verde a inline-block después de 3 segundos (6 segundos después de que se cargue la página).

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Llamar a las funciones de los semáforos

En este paso, llamarás a la función trafficlights() para iniciar la secuencia de semáforo.

1. En el archivo trafficlights.js, localiza la función trafficlights().
2. La función trafficlights() debe llamar a las funciones red() y green() secuencialmente utilizando la sintaxis async/await.

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

Probar los semáforos

1. Guarda los cambios en el archivo trafficlights.js.
2. Actualiza la página en tu navegador. Deberías ver cómo los semáforos cambian de la luz predeterminada a roja y luego a verde después de 6 segundos. El resultado final es el siguiente:

¡Felicidades! Has completado el proyecto de Semáforo de Cambio de Color. Si tienes alguna pregunta o necesitas ayuda adicional, no dudes en preguntar.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.