Pular para o conteúdo principal

Acender e Apagar Lâmpadas - HTML, CSS e JavaScript - Tutorial

Ligar e Desligar Lâmpadas


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.

Comentários

Mais vistas

Autocode - Significado e Funcionalidade

O Que é Autocode? O Autocode foi uma das primeiras linguagens de programação de computador, desenvolvida em 1952 por Alick Glennie para o computador Mark 1 na Universidade

Semáforo - HTML, CSS e JavaScript - Tutorial

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.

UI vs UX - Diferenças

Entendendo as diferenças entre UI e  Ux: Quando se trata de design de produtos digitais, os termos UI e UX são frequentemente usados juntos, mas representam conceitos distintos. Embora