Pular para conteúdo

Projeto 10 - Semáforo Interativo 🚥

Objetivo: Manipular cores e classes CSS baseando-se em eventos para simular um sistema real.

O Desafio

Você deve criar um semáforo digital simples.

  1. Crie três divs redondas no seu HTML (Vermelho, Amarelo, Verde), todas inicialmente "apagadas" (cinzas).
  2. Crie três botões: "Parar", "Atenção" e "Siga".
  3. No JavaScript:
    • Quando clicar em "Parar", a luz vermelha deve ganhar a cor de fundo vermelha e as outras devem ficar cinzas.
    • Quando clicar em "Atenção", a luz amarela deve acender e as outras apagar.
    • Quando clicar em "Siga", a luz verde deve acender e as outras apagar.
  4. Dica: Crie uma classe .acesa no CSS e use o JavaScript para adicioná-la ao elemento correto e removê-la dos outros.

O que entregar?

  • O arquivo .html e .js funcionando.
  • Um print da tela mostrando cada uma das três fases do semáforo (Verde, Amarelo e Vermelho).