Resumo da Live TikTok 28/09/2024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 28/09/2024 estudamos os Laços While e Do While com HTML CSS e JavaScript.

WHILE1
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>While 1</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;

        }
        ul{
            list-style-type: none;
        }

        li{
            background-color: #f0f0f0;
            margin: 5px;
            padding: 10px;
            border-radius: 5px;
            max-width: 50%;
            text-align: center;
        }

    </style>
</head>

<body>
    
    <h1>Números Pares de 0 a 20</h1>
    <ul id="lista-numeros">    </ul>

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

</body>
</html>


let i = 0;

const lista = document.getElementById('lista-numeros');

while( i <= 25){

    if(i % 2 === 0){

        const li = document.createElement('li');
        li.textContent = i;
        lista.appendChild(li);
    }
    i++;
}








WHILE2

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contagem Regressiva</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        #resultado{
            font-size: 2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
   

        <h1> Contagem Regressiva </h1>

        <input type="number" id="numero"
        placeholder=" Digite um número">
        <button id="iniciar-contagem">

         Iniciar Contagem</button>

        <div id="resultado"> </div>



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

function inciarContagem(){
    const resultado = document.getElementById('resultado');
    let numero =
    Number(document.getElementById('numero').value);

    if(  !isNaN(numero) ){
        resultado.textContent = "";

        while(numero >= 0){
           const div = document.createElement('div');
           div.textContent = numero;
           resultado.appendChild(div);
           numero --;     
        }

        // LIMPAR O CAMPO DO INPUT
        document.getElementById('numero').value = ""
    }else{
        resultado.textContent = " Insira um número válido!"
    }
    
}

//EVENTO DO CLICK

document.getElementById('iniciar-contagem')
.addEventListener('click', inciarContagem);


document.getElementById('numero')
.addEventListener('keydown', function(event){

    if(event.key === 'Enter'){
        inciarContagem();       

    }
})




DO WHILE 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #mensagem{
            font-size: 1.2em;
            color: rgb(11,128,151);
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <h1>Bem vindo!</h1>
    <button id="inserir-nome"> Digite seu nome  </button>
    <p id="mensagem">     </p>
    

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


document.getElementById('inserir-nome')
.addEventListener( 'click', function(){  
    let nome;

    do{
        nome = prompt('Digite seu nome');

    }while(!nome)

        document.getElementById('mensagem')
        .textContent = " Olá, " + nome + 
        "! Seja bem vindo." ;

   });