A Pen by Hélio Dourado on CodePen.
Created
May 29, 2021 11:44
-
-
Save heliohdd/7858bdc99921702d458a9cd82af99f85 to your computer and use it in GitHub Desktop.
WNpZMMM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head></head> | |
| <body> | |
| <div class="container"> | |
| <h1>Calcule seu IMC<h1> | |
| <form> | |
| <p>Digite seu <em>peso:</em></p> | |
| <div> | |
| <input id="peso" type="number"/> | |
| <span class = "medida">Kg</span> | |
| </div> | |
| <div> | |
| <p>Digite sua <em>altura:</em></p> | |
| <input id="altura" type="number"/> | |
| <span class="medida">cm</span> | |
| </div> | |
| <div> | |
| <input id="btnCalcular" class="botao-calcular" type="button" value="Calcular" /> | |
| </div> | |
| </form> | |
| <div id="resultado"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let botaoCalcular = document.getElementById('btnCalcular'); | |
| function calculandoIMC() { | |
| let peso = document.getElementById("peso").value; | |
| let altura = document.getElementById("altura").value/100; | |
| let resultado = document.getElementById("resultado"); | |
| if(peso !== '' && altura !== ''){ | |
| let imc = (peso / (altura * altura)).toFixed(2); | |
| let mensagem = ""; | |
| if(imc < 18.5){ | |
| mensagem = "Você está abaixo do peso!" | |
| }else if(imc < 25){ | |
| mensagem = "Voce está com o peso ideal!" | |
| }else if(imc < 30){ | |
| mensagem = "Você está levemente acima do peso!" | |
| }else if (imc < 35){ | |
| mensagem = "Cuidado! Obesidade grau I" | |
| }else if (imc < 40){ | |
| mensagem = "Cuidado! Obesidade grau II" | |
| }else{ | |
| mensagem = "Cuidado! Obesidade grau III" | |
| } | |
| resultado.textContent = `Seu IMC é ${imc}. ${mensagem}`; | |
| }else{ | |
| resultado.textContent = "Preencha todos os campos!!!" | |
| } | |
| } | |
| botaoCalcular.addEventListener('click', calculandoIMC); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| p{ | |
| font-size: 20px; | |
| } | |
| .medida{ | |
| font-size: 20px | |
| } | |
| .container{ | |
| border: 5px solid #ddd; | |
| box-shadow: 0px, 0px, 10px; | |
| padding: 30px; | |
| background-color: #ddd; | |
| } | |
| .botao-calcular{ | |
| font-align: center; | |
| font-size: 18px; | |
| width: 100%; | |
| margin-top: 20px; | |
| padding: 10px; | |
| background-color: #1b2845; | |
| color: white; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment