Resumo da Live TikTok 21082024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 21/08/2024 foram abordados os seguintes temas:

HTML
CSS
JAVASCRIPT

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Hamburguer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-container">
        <button id="menu-button" class="menu-button"> &#9776 </button>
        <nav id="nav-menu" class="nav-menu">

            <ul>
                <li> <a href="#"> Home</a></li>
                <li> <a href="#"> About</a></li>
                <li> <a href="#"> Services</a></li>
                <li> <a href="#"> Contact</a></li>
            </ul>
        </nav>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

body{
    font-family: Arial, sans-serif;
}

.menu-container{
    position: relative;
}

.menu-button{
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}

.nav-menu{
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: #333;
    padding: 10px;
    border-radius: 4px;
}
.nav-menu ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-menu li {
    margin: 10px 0;    
}
.nav-menu a {
    color: white;
    text-decoration: none;
}
.nav-menu a:hover{
    text-decoration: underline;
}
JAVASCRIPT

document.addEventListener('DOMContentLoaded', function(){
const menuButton = document.getElementById('menu-button');
const navMenu = document.getElementById('nav-menu');

menuButton.addEventListener('click', function(){

    if(navMenu.style.display == 'block'){
        navMenu.style.display = 'none';
    }else{

        navMenu.style.display = 'block';
    }

});

});

EVENTOS

<div id="area">     </div>

<script>
    const a = document.getElementById('area');

    a.addEventListener('click', clicar);
    a.addEventListener('mouseenter', entrar);
    a.addEventListener('mouseout', sair)

    function clicar(){
        a.innerText = 'Area clicada!!!!!'
    }

    function entrar(){
        a.innerText = 'Entrou na area!'
    }
    function sair(){
        a.innerText = 'Saiu na area!'
    }

</script>