Création d'un système de feux de circulation avec JavaScript

Introduction

Dans ce projet, vous allez apprendre à créer un système de feux de circulation qui change la couleur de la lumière de rouge à verte après un certain intervalle de temps. Ce projet vous aidera à comprendre les bases de JavaScript et à manipuler le DOM pour afficher différents éléments en fonction d'événements basés sur le temps.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer une structure de projet HTML et JavaScript de base
• Comment implémenter une fonction pour changer l'affichage du feu de circulation en rouge après 3 secondes
• Comment implémenter une fonction pour changer l'affichage du feu de circulation en vert après 6 secondes
• Comment coordonner l'exécution des fonctions des feux rouges et verts à l'aide de async/await
• Comment tester le système de feux de circulation et s'assurer qu'il fonctionne comme prévu

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Manipuler le DOM à l'aide de JavaScript pour changer l'affichage d'éléments HTML
• Utiliser setTimeout() pour planifier des événements basés sur le temps
• Gérer les opérations asynchrones avec async/await
• Tester et déboguer votre code JavaScript

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

1. Ouvrez l'éditeur. Vous devriez voir index.html, trafficlights.js et quelques fichiers images dans le répertoire /home/labex/project.
2. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
3. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement pour voir la page.

Implémenter la fonction du feu rouge

Dans cette étape, vous allez implémenter la fonction pour changer la lumière en rouge.

1. Dans le fichier trafficlights.js, localisez la fonction red().
2. Définissez une variable au-dessus de la fonction red et donnez-lui la valeur initiale :

let trafficlightsTimer = 3000;
// fonction red() {...}

3. La fonction red() devrait changer l'affichage de la lumière par défaut en none et l'affichage de la lumière rouge en inline-block après 3 secondes.

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

Implémenter la fonction du feu vert

Dans cette étape, vous allez implémenter la fonction pour changer la lumière en vert.

1. Dans le fichier trafficlights.js, localisez la fonction green().
2. La fonction green() devrait changer l'affichage de la lumière rouge en none et l'affichage de la lumière verte en inline-block après 3 secondes (6 secondes après le chargement de la page).

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

Appeler les fonctions des feux de circulation

Dans cette étape, vous allez appeler la fonction trafficlights() pour démarrer la séquence des feux de circulation.

1. Dans le fichier trafficlights.js, localisez la fonction trafficlights().
2. La fonction trafficlights() devrait appeler les fonctions red() et green() séquentiellement en utilisant la syntaxe async/await.

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

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

Tester les feux de circulation

1. Enregistrez les modifications dans le fichier trafficlights.js.
2. Raffraîchissez la page dans votre navigateur. Vous devriez voir les feux de circulation passer de la lumière par défaut au rouge, puis au vert après 6 secondes. Le résultat final est le suivant :

Félicitations ! Vous avez terminé le projet Feu de circulation à changement de couleur. Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à demander.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.