Semáforo Funcional:
Aprenda a criar um semáforo funcional com este tutorial detalhado. Descubra como implementar a lógica de controle de um semáforo usando HTML, CSS e JavaScript. Este projeto consiste em um Semáforo que funciona de forma automática, as luzes verde, amarelo e vermelho do Semáforo ficam acendendo e apagando em tempos diferentes, assim imitando um Semáforo real.
Esse projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente
nestas 3 linguagens: HTML, CSS e JavaScript.Veja o Semáforo em funcionamento neste link. Semáforo.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semáforo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="semaforo">
<span class="luzes-circulo red" color = "red"></span>
<span class="luzes-circulo" color="yellow"></span>
<span class="luzes-circulo" color="green"></span>
</div>
<div class="poste"></div>
<div class="chao"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
background-color: #00BFFF;
}
.container{
display: grid;
place-items: center;
}
.semaforo{
width: 100px;
height: 200px;
border-radius: 30px;
display: grid;
place-items: center;
background-color: #2c3e50;
padding: 10px;
}
.luzes-circulo{
display: block;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgb(0, 0,0,0.3);
position: relative;
}
.luzes-circulo::after{
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
border-right: 4px solid rgb(255, 255,255,0.6);
top: 5%;
}
.poste{
width: 10px;
height: 240px;
background-color: rgb(0, 0,0,0.5);
}
.chao{
width: 360px;
height: 0px;
background-color: rgb(0,0,0,0.5);
box-shadow: 0 0 10px 1px #a5682a;
}
.red{
background-color: #c0392b;
box-shadow: 0 0 10px 1px #c0392b;
}
.yellow{
background-color: #f1c40f;
box-shadow: 0 0 10px 1px #f1c40f;
}
.green{
background-color: #2ecc71;
box-shadow: 0 0 10px 1px #2ecc71;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const $luzesDelCirculo = document
.querySelectorAll(
'.luzes-circulo');
let contadorDeLuz = 0;
const mostrarLuz = () => {
$luzesDelCirculo[contadorDeLuz]
.className = 'luzes-circulo';
contadorDeLuz++;
if (contadorDeLuz > 2)
contadorDeLuz = 0;
const luzActual =
$luzesDelCirculo[
contadorDeLuz];
luzActual.classList.add(
luzActual.getAttribute(
'color'))
}
setInterval(mostrarLuz, 2000)
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!