Resumo da Live TikTok 29082024 – Desvendando o Código

Olá Pessoal!

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

Condicional Aninhada;
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>IMC</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <div class="container">

            <div class="title">
                IMC - Calculadora</div>
            
            <div class=" input">
                <label>Altura:</label>
                <input type="number" 
                id="altura">
            </div>

            <div class=" input">
                <label>Peso:</label>
                <input type="number" 
                id="peso">
            </div>

            <div class=" input">
                <label>Nome:</label>
                <input type="text" 
                id="nome">
            </div>
            <button id="calcular">
                Calcular IMC</button>
            
                <div class="result"
                 id="resultado"> </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

JAVASCRIPT

const calcular =
 document.getElementById('calcular');

function imc(){
    const nome =
     document.getElementById('nome').value;

     const altura = 
     document.getElementById('altura').value;

     const peso = 
     document.getElementById('peso').value;

     const resultado = 
     document.getElementById('resultado');

     if(nome !== ' ' && altura
         !== ' ' && peso !== ''){

            const valorIMC =
             (peso / (altura * altura)).toFixed(1);
        
        let  classificacao = '';

        if(valorIMC < 18.5){
            classificacao = 'abaixo do peso.';
        }else if(valorIMC < 25){
            classificacao = 'Com peso ideal.';
        }else if(valorIMC < 30){
            classificacao =
             'Levemente acima do peso.';
        }else if(valorIMC < 35){
            classificacao =
            'com obesidade grau 1.';
        }else if(valorIMC < 40){
            classificacao =
            'com obesidade grau 2.';
        }else{
            classificacao =
            'com obesidade grau 3.';
        }
        resultado.textContent = `${nome} 
        seu IMC é ${valorIMC}
         e você está ${classificacao}` 

     }else{
        resultado.textContent =
         "Preencha todos os campos"
     }

    }

    calcular.addEventListener('click', imc);


CSS


main{
    display: flex;
    width:100vw;
    height: 100vh;
    justify-content: center;
    align-items: center; 
}

.container{

    display: flex;
    flex-direction: column;
    background: rgb(126,189,244);
    width: 400px;
    height: 600px;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(88, 3,15);
}

.title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font: bold 2.5rem serif;
    margin-bottom: 20px;
    color: rgb(80, 79 ,79);
}
.input{

    display: flex;
    width: 300px;
    height: 50px;
    justify-content: space-between;
    align-items: center;
}

.input input{
    width: 200px;
    height: 50px;
    border-radius: 5px;
    border: none;
    outline: 0;
    font: bold 1.5rem serif;
    text-align: center;
    color: rgb(80, 79,79);
    background: #e9e7e7;
}
.input label{
    font: bold 1.5rem serif;
    color: rgb(80, 79,79);
}
button{
    width: 300px;
    height: 40px;
    font: bold 1.2rem serif;
    background: #e9e7e7;
    color: #ec5959;
    outline: none;
    border-radius: 5px;
    cursor: pointer;

}

.result{
    display: flex;
    margin-top: 20px;
    align-items: center;
    width: 300px;
    height: 150px;
    border-radius: 5px;
    font: bold 1.2rem serif;
    box-shadow: 0 0 10px rgb(88, 3,15);
    background: #e9e7e7;
    color: #ec5959;
    padding: 20px;
    box-sizing: border-box;
    user-select: none;
}