Resumo da Live TikTok 18/10/2024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 18/10/2024 trabalhamos com mini projeto utilizando o HTML CSS e JavaScript.

HTML 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <title>Lâmpada</title>
</head>
<body>
    
    <main>
        <div>

            <img src="./img/desligada.png" 
            alt="Lâmpada" id="lamp" >

        </div>

        <div>
            <button id="turnOn">Ligar</button>
            <button id="turnOff">Desligar</button>
        </div>


    </main>

    <script src="lampada.js"></script>

</body>
</html>

CSS

body{
    font-family:Arial, Helvetica, sans-serif;
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background-color 0.5s;
}

body.lampada-ligada{
    background-color: #f0f0f0;
}

body.lampada-desligada{
    background-color: #111;
}

main{
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0.7);
    margin-top: 40px;
    padding: 30px;
    text-align: center;

}

img{

    width: 150px;
    height: auto;
    margin: 20px 0;
    transition: transform 0.2s;
}
button{

    background-color: #ff4081;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: bachaground-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.5);

}

button:hover{
    background-color: #e91e63;
    transform: scale(1.1);
}

.lampada-ligada{

    border: 5px solid #FFD700;
    box-shadow: 0 0 15px #FFD700;
}


.lampada-desligada{
    border: 5px solid #555;   
}

.lampada-quebrada{

    border: 5px solid #FF0000;
    animation: shake 0.5s;
}

@keyframes shake {

0% {  transform: translate(0); }
25% { transform: translate(-5px);}
50% { transform: translate(5px);}
75% { transform: translate(-5px);}
100% { transform: translate(0);}

}

JAVASCRIPT

const turnOn = document.getElementById('turnOn');
const turnOff = document.getElementById('turnOff');
const lamp = document.getElementById('lamp');


function isLampBroken(){

    if( lamp.src.indexOf('quebrada') > -1 ){

        return true;
    }else{
        return false;
    }
}

function lampOn(){
    if(!isLampBroken()){

        lamp.src = ' ./img/ligada.png';
        lamp.className = 'lampada-ligada';
        document.body.classList.add('lampada-ligada');
        document.body.classList.remove('lampada-desligada');
    }
}

function lampOff(){
    if(!isLampBroken()){

        lamp.src = './img/desligada.png';
        lamp.className = 'lampada-desligada';
        document.body.classList.add('lampada-desligada');
        document.body.classList.remove('lampada-ligada');
    }
}

function lamBroken(){
    lamp.src = './img/quebrada.png'; 
    lamp.className = 'lampada-quebrada';
    document.body.classList.remove('lampada-ligada', 'lampada-desligada');
}


turnOn.addEventListener('click', lampOn); 
turnOff.addEventListener('click', lampOff); 

lamp.addEventListener('mouseover', lampOn);
lamp.addEventListener('mouseleave', lampOff);
lamp.addEventListener('dblclick', lamBroken);