Resumo da Live TikTok 28082024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 28/08/2024 foram abordados os seguintes temas envolvendo o nosso mini projeto:

Condicional Aninhada;
Laço do While;
Eventos;
DOM;
HTML;
CSS;

HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Projeto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h1>Bem vindo à Balada!</h1>
        <div id="result">       </div>
    </div>
    
    <script>

        var idade = Number(prompt("Digite sua idade"));

        if(idade < 18){
            document.getElementById('result').textContent =
            "Entrada somente para maiores";
        }else{
            var hm;

            do {
                hm =
                 Number(prompt("Digite 1 para homem ou  2 para mulher"))
            
            if( hm !==1 && hm !==2 ){
                alert("Opção inválida, Digite 1 ou digite 2")
            }

          }while(hm !==1 && hm !==2);

          if( hm === 1 && idade < 60){
            document.getElementById('result').textContent =
            "Homem menor de 60 paga 50";
          }else if(hm === 1 && idade >= 60){
            document.getElementById('result').textContent =
            "Homem com 60 ou mais paga 25";

          }else if(hm === 2 && idade < 60){
            document.getElementById('result').textContent =
            "Mulher menor de 60 paga 10";
          }else{
            document.getElementById('result').textContent =
            "Mulher com 60 ou mais paga 5";
          }

       } 

    </script>
</body>
</html>

CSS
body{
    background:
     linear-gradient(to bottom, #333333, #000000);
     color: #e5e5e5;
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
     margin: 0;
     padding: 0;
}
/*adicionar borda no container*/
.container{

    background: rgba(0,0,0,0.8);
    border: 5px solid #FF4500;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.7);
    padding: 20px;
    max-width: 600px;
    margin: 50px auto;

}

h1{
    font-family: 'Impact', sans-serif;
    font-size: 3em;
    color: #FF4500;
    margin: 0;
    padding: 0;
    text-shadow: 3px 3px 0 #000000, 6px 6px 0 #FF4500;
}

#result{
    font-size: 1.5em;
    margin-top: 20px;
    color: #FF6347;
}

@keyframes piscar{
    0%, 100%{
        opacity: 1 ;
    }
    50% {
        opacity: 0.6;
    }
}

h1, #result{
    animation: piscar 1.5s infinite;
}