Criei um Calculadora de IMC para meu SITE com essa AULA de JS...

CSS

main{
    width: 100%;
    margin: 0 auto;
    background-color:  rgb(240,255,248);
}
.formulario{
    display: flex;
    justify-content: space-around;
}
form{
    margin: 40px 0;
    background: #eeeeee;
    padding: 2%;
    font-family: 'Roboto', sans-serif;
    width: 40%;
    border-radius: 5px 10px 5px 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.322);
}

.resultado{
    margin: 40px 0;
    padding: 2%;
    font-family: 'Roboto', sans-serif;
    width: 40%;
    position: relative;
    justify-content: space-between;
    background: #84f7ff;
    border: 1px solid #5fddfd;
    border-radius: 5px 10px 5px 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.322);
    color: #000000;
}
.imc{
    display: block;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.349);
    padding: 1.5em 0;
    font-size: 5em;
}
.classificacao{
    display: block;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.349);
    padding: 1em 0;
    font-size: 2em;

}
.risco{
    display: block;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.349);
    padding-top: 1em;
    font-size: 1em;
    padding: 0 1em 1em 1em;

}

form label, form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}
.input-padrao{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
.input-padrao:hover{
    transform: scale(1.02);
    transition: 1s transform;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.enviar:hover{
    background: darkorange;
    transform: scale(1.1);
    transition: 1s transform;
}
@media screen and (max-width: 1024px) {

    .enviar{
        width: 60%;
    }
}
@media screen and (max-width: 800px) {
    .formulario{
        position: relative;
        display: block;

    }
    form,.resultado{
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 2em auto 2em auto;

    }
    .enviar{
        width: 50%;
        font-size: 16px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 480px) {
    .enviar{
        font-size: 16px;
    }
    .imc{
        font-size: 3.5em;
    }
    .classificacao{
        font-size: 1.5em;
    }
    .risco{
        font-size: 0.8em;
    }
}

@media screen and (max-width: 380px) {

    .enviar{
        font-size: 14px;
    }
}

JS

var botaoImc = document.querySelector(".enviar");


function calculaImc(event){
    event.preventDefault();
    var form = document.querySelector("#calculo-imc");

    var nome = form.nome.value;
    var idade = form.idade.value;
    var peso = form.peso.value;
    var altura = form.altura.value.replace(',','.');
    var imc = (peso/(altura*altura)).toFixed(2);

    var resultadoIMC = document.querySelector(".imc");
    resultadoIMC.textContent = imc;

    var classificacao = document.querySelector('.classificacao');
    classificacao.textContent = classificadorImc(imc);

    var riscos = document.querySelector('.risco');
    riscos.textContent = identificadorRiscos(imc);

    resultadoIMC.style.color = corImc(imc);
    classificacao.style.color = corImc(imc);

    resultadoIMC.style.backgroundColor = corBgImc(imc);
    classificacao.style.backgroundColor = corBgImc(imc);
    riscos.style.backgroundColor = corBgImc(imc);

}
function corImc(imc){
    var cor = "nada" ;

    if(imc < 15.99){
        cor = "red";
    }
    if(imc >= 16 && imc <= 16.99){
        cor = "red";
    } 
    if(imc >= 17 && imc <= 18.5){
        cor = "red";
    }
    if(imc >= 18.5 && imc <= 24.9){
        cor = "green";
    }
    if(imc >= 25 && imc <= 29.9){
        cor = "orange";
    }
    if(imc >= 30 && imc <= 34.9){
        cor = "red";
    }
    if(imc >= 35 && imc <= 39.9){
       cor = "red";
    }
    if(imc >= 40){
        cor = "red";
    }
    return cor 
}
function corBgImc(imc){
    var cor = "" ;

    if(imc < 15.99){
        cor = "rgb(251, 255, 0)";
    }
    if(imc >= 16 && imc <= 16.99){
        cor = "rgb(251, 255, 0)";
    } 
    if(imc >= 17 && imc <= 18.5){
        cor = "";
    }
    if(imc >= 25 && imc <= 29.9){
        cor = "rgb(251, 255, 0)";
    }
    if(imc >= 30 && imc <= 34.9){
        cor = "rgb(251, 255, 0)";
    }
    if(imc >= 35 && imc <= 39.9){
       cor = "rgb(251, 255, 0)";
    }
    if(imc >= 40){
        cor = "rgb(30, 255, 0)";
    }
    return cor 
}
function classificadorImc(imc){
    var classificacao = "nada" ;

    if(imc < 15.99){
        classificacao = "Magreza Grave";
    }
    if(imc >= 16 && imc <= 16.99){
        classificacao = "Magreza Moderada";
    } 
    if(imc >= 17 && imc <= 18.5){
        classificacao = "Magreza Leve";
    }
    if(imc >= 18.5 && imc <= 24.9){
        classificacao = "Saudável";
    }
    if(imc >= 25 && imc <= 29.9){
        classificacao = "Sobrepeso";
    }
    if(imc >= 30 && imc <= 34.9){
        classificacao = "Obesidade Grau 1";
    }
    if(imc >= 35 && imc <= 39.9){
        classificacao = "Obesidade Grau 2 (Severa)";
    }
    if(imc >= 40){
        classificacao = "Obesidade Grau 3 (Mórbida)";
    }
    return classificacao
}
function identificadorRiscos(imc){
    var classificacao = "nada" ;

    if(imc < 15.99){
        classificacao = "Risco alto - Anorexia, Bulimia, Osteoporose e auto consumo de massa muscular, Transtornos digestivos, debilidade, fadiga crônica, stress, ansiedade e disfusões hormonais e sexuais.";
    }
    if(imc >= 16 && imc <= 16.99){
        classificacao = "Risco alto - Anorexia, Bulimia, Osteoporose e auto consumo de massa muscular, Transtornos digestivos, debilidade, fadiga crônica, stress, ansiedade e disfusões hormonais e sexuais.";
    } 
    if(imc >= 17 && imc <= 18.5){
        classificacao = "Risco moderado - Transtornos digestivos, debilidade, fadiga crônica, stress, ansiedade e disfusões hormonais.";
    }
    if(imc >= 18.5 && imc <= 24.9){
        classificacao = "Baixo risco - Estado normal, bom nível de energia, vitalidade e boa condição física. Mantenha o seu peso e IMC.";
    }
    if(imc >= 25 && imc <= 29.9){
        classificacao = "Risco moderado - Fadiga, problemas digestivos, problemas circulatórios, má circulação nas pernas, varizes.";
    }
    if(imc >= 30 && imc <= 34.9){
        classificacao = "Risco alto - Diabetes, angina de peito, enfartes, tromboFlebites, arteroscleroses, alterações mestruais, disfunções sexuais.";
    }
    if(imc >= 35 && imc <= 39.9){
        classificacao = "Risco Muito alto - Falta de Ar, apneia, sonolência, trombose pulmonar, úlceras varicosas, cancro do colon uterino e mamário, refluxo esofágico,disfunções sexuais, discriminação social, laboral e sexual.";
    }
    if(imc >= 40){
        classificacao = "Risco Muito alto - Diabetes, angina de peito, enfartes, tromboFlebites, arteroscleroses, alterações mestruais, Falta de Ar, apneia, sonolência, trombose pulmonar, úlceras varicosas, cancro do colon uterino e mamário, refluxo esofágico,disfunções sexuais, discriminação social, laboral e sexual.";
    }
    return classificacao
}

botaoImc.addEventListener('click', calculaImc)

Oi Jônatas, tudo bem?

Que projeto incrível! Você o juntou com projeto do outro curso de HTML e CSS e ficou maravilhoso, muito completo! Meus parabéns, de verdade.

Você está indo além do esperado!

Espero que esteja curtindo a experiência de aprendizado.

Um abraço e bons estudos.

Sensacional!!!

Parabéns pela dedicação, seu projeto ficou muito bom. Obrigado por compartilhar com a gente.

abraços e bons estudos!