Resumo da Live TikTok 11072024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 11/07/2024 foram abordados os seguintes temas:

Laço de Repetição For, While e do-While;
Condicional, composta e aninhada;
Eventos;
Exercícios.

EXERCÍCIO DO WHILE

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício do While</title>
</head>
<body>
    <script>
        var num 

        do{
            num = Number(prompt("Número: "))
            if(num == 0 || isNaN(num)){
                alert("Digite um nº válido!")
            }
        }while(num == 0 || isNaN(num))
            var pares = `Pares entre 1 e ${num}`

            for(var i = 2; i <= num; i = i + 2){
           // Parte que estava errada na live era i = i + 2 faltou o i =
                pares = pares + i + ","
            }
            
            document.write(pares);
        
    </script>
    
</body>
</html>

EVENTOS

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos</title>
    <style>
        #area{

            font: normal 20pt Arial;
            color: rgb(47 ,231, 231);
            background-color: rgb(0, 128, 0);
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    

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

    <script>
     var a = document.getElementById('area'); 
     
     a.addEventListener('click', clicar);
     a.addEventListener('mouseout', sair)


     function clicar(){
        a.innerText ='Clicou!!!'
     };


     function sair(){
        a.innerText ='Saiu!!!'
     };


    </script>

</body>
</html>

MENU HAMBÚRGUER

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Hambúrguer</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=sans-serif;
}

.menu-container{
    position: relative;
}

.menu-botton{
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’,
()=>{
const menuButton =
document.getElementById(‘menu-button’)
const navMenu =
document.getElementById(‘nav-menu’)

    menuButton.addEventListener('click',
    ()=>{
        if(navMenu.style.display == 'block'){
            navMenu.style.display = 'none'
        }else{
            navMenu.style.display = 'block'
        }

    })
})