Lâmpada inteligente:
Descubra como criar uma interface de controle para uma lâmpada inteligente com este tutorial detalhado. Aprenda utilizando HTML, CSS e JavaScript. Este projeto consiste em uma lâmpada que acende e apaga através de cliques nos botões , para quebrar a lâmpada dê dois cliques em cima da lâmpada, depois disso atualizar a página.
Veja a Lâmpada inteligente em funcionamento neste link. Lâmpada inteligente.
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>Lâmpada inteligente em JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Smart light bulb</h1>
<div>
<img src="https://i.ibb.co/zf7HBwZ/desligada.jpg" alt="lampada" id="lamp">
</div>
<br>
<div>
<button id="turnOn">LIGAR</button>
<button id="turnOff">DESLIGAR</button>
</div>
<br>
<br>
<h6>
Atenção! clique duplo na lâmpada para quebrar.</h6>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body, html {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: white;
color: #ddd;
font-family: 'Montserrat', sans-serif;
}
img {
width: 350px;
height: 400px;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const turnOn = document
.getElementById(
"turnOn");
const turnOff = document
.getElementById("turnOff");
const lamp = document
.getElementById(
"lamp");
function isLampBroken() {
return lamp.src.indexOf(
"quebrada") >
-1
}
function lampOn() {
if (!isLampBroken()) {
lamp.src =
"https://i.ibb.co/xzXWCX3/ligada.jpg";
}
}
function lampOff() {
if (!isLampBroken()) {
lamp.src =
"https://i.ibb.co/zf7HBwZ/desligada.jpg";
}
}
function lampBroken() {
lamp.src =
"https://i.ibb.co/8DDC1Bp/quebrada.jpg";
}
turnOn.addEventListener("click",
lampOn);
turnOff.addEventListener("click",
lampOff);
lamp.addEventListener("mouseover",
lampOn);
lamp.addEventListener(
"mouseleave",
lampOff);
lamp.addEventListener("dblclick",
lampBroken);
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!