Construindo um Sistema de Semáforos com JavaScript

Introdução

Neste projeto, você aprenderá como criar um sistema de semáforo que muda a cor da luz de vermelho para verde após um determinado intervalo de tempo. Este projeto o ajudará a entender os fundamentos do JavaScript e como manipular o DOM para exibir diferentes elementos com base em eventos temporais.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar uma estrutura básica de projeto HTML e JavaScript
• Como implementar uma função para mudar a exibição do semáforo para vermelho após 3 segundos
• Como implementar uma função para mudar a exibição do semáforo para verde após 6 segundos
• Como coordenar a execução das funções de luz vermelha e verde usando async/await
• Como testar o sistema de semáforo e garantir que ele funcione conforme o esperado

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Manipular o DOM usando JavaScript para mudar a exibição de elementos HTML
• Usar setTimeout() para agendar eventos baseados em tempo
• Gerenciar operações assíncronas com async/await
• Testar e depurar seu código JavaScript

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

1. Abra o editor. Você deve ver index.html, trafficlights.js e alguns arquivos de imagem no diretório /home/labex/project.
2. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
3. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Função da Luz Vermelha

Nesta etapa, você implementará a função para mudar a luz para vermelho.

1. No arquivo trafficlights.js, localize a função red().
2. Defina uma variável acima da função red e atribua o valor inicial:

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

3. A função red() deve mudar a exibição da luz padrão para none e a exibição da luz vermelha para inline-block após 3 segundos.

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

Implementar a Função da Luz Verde

Nesta etapa, você implementará a função para mudar a luz para verde.

1. No arquivo trafficlights.js, localize a função green().
2. A função green() deve mudar a exibição da luz vermelha para none e a exibição da luz verde para inline-block após 3 segundos (6 segundos após o carregamento da página).

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

Chamar as Funções das Luzes de Trânsito

Nesta etapa, você chamará a função trafficlights() para iniciar a sequência dos semáforos.

1. No arquivo trafficlights.js, localize a função trafficlights().
2. A função trafficlights() deve chamar as funções red() e green() em sequência, usando a sintaxe async/await.

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

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

Testar as Luzes de Trânsito

1. Salve as alterações no arquivo trafficlights.js.
2. Atualize a página no seu navegador. Você deve ver os semáforos mudarem da luz padrão para vermelho e, em seguida, para verde após 6 segundos. O resultado final é o seguinte:

Parabéns! Você concluiu o projeto de Luz com Mudança de Cor. Se tiver alguma dúvida ou precisar de mais assistência, sinta-se à vontade para perguntar.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.