Acender e Apagar Lâmpadas:
Aprenda a criar uma divertida e interativa funcionalidade de ligar e desligar lâmpadas com este tutorial passo a passo.
Este projeto consiste em um mini sistema com quatro Lâmpadas e um interruptor. Onde o interruptor liga e desliga as lâmpadas. Projeto esse indispensável para iniciantes na programação.
Este projeto usa as três linguagens, HTML, CSS e JavaScript.
Veja o projeto em funcionamento neste link. Ligar e Desligar Lâmpadas.
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 name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Ligar e desligar as lâmpadas </title>
<link rel= "stylesheet" href= "style.css" >
</head>
<body>
<div class= "container" >
<div class= "lamp" id= "lamp1" ></div>
<div class= "lamp" id= "lamp2" ></div>
<div class= "lamp" id= "lamp3" ></div>
<div class= "lamp" id= "lamp4" ></div>
<div class= "switch-container" >
<div class= "switch-label" > Desligado </div>
<div class= "switch" onclick= "toggleLights()" >
<div class= "alça de troca" ></div>
</div>
<div class= "switch-label" > Ativado </div>
</div>
</div>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" ></script>
<script src= "script.js" ></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
.lamp {
width: 50px;
height: 80px;
margin: 20px;
background-color: #ccc;
border-radius: 50% 50% 0 0;
position: relative;
display: inline-block;
}
.lamp::before {
content: '';
width: 10px;
height: 20px;
background-color: #666;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.lamp.on {
background-color: #ffd700;
}
.switch-container {
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.switch-label {
font-size: 16px;
margin: 0 10px;
}
.switch {
width: 60px;
height: 30px;
background-color: #666;
border-radius: 15px;
position: relative;
cursor: pointer;
}
.switch-handle {
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
transition: all 0.3s;
}
.switch.on .switch-handle {
left: 30px;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
let isOn = false;
function toggleLights() {
isOn = !isOn;
const lamps = document
.querySelectorAll('.lamp');
lamps.forEach(lamp => {
if (isOn) {
lamp.classList.add('on');
} else {
lamp.classList.remove('on');
}
});
const switchElement = document
.querySelector('.switch');
if (isOn) {
switchElement.classList.add('on');
} else {
switchElement.classList.remove('on');
}
}
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
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!