├── readme.md ├── index.html ├── imc.js └── style.css /readme.md: -------------------------------------------------------------------------------- 1 | # Calculadora IMC 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IMC 7 | 8 | 9 | 10 |
11 |
12 |
Calculadora - IMC
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /imc.js: -------------------------------------------------------------------------------- 1 | 2 | const calcular = document.getElementById('calcular'); 3 | 4 | 5 | function imc () { 6 | const nome = document.getElementById('nome').value; 7 | const altura = document.getElementById('altura').value; 8 | const peso = document.getElementById('peso').value; 9 | const resultado = document.getElementById('resultado'); 10 | 11 | if (nome !== '' && altura !== '' && peso !== '') { 12 | 13 | const valorIMC = (peso / (altura * altura)).toFixed(1); 14 | 15 | let classificacao = ''; 16 | 17 | if (valorIMC < 18.5){ 18 | classificacao = 'abaixo do peso.'; 19 | }else if (valorIMC < 25) { 20 | classificacao = 'com peso ideal. Parabéns!!!'; 21 | }else if (valorIMC < 30){ 22 | classificacao = 'levemente acima do peso.'; 23 | }else if (valorIMC < 35){ 24 | classificacao = 'com obesidade grau I.'; 25 | }else if (valorIMC < 40){ 26 | classificacao = 'com obesidade grau II'; 27 | }else { 28 | classificacao = 'com obesidade grau III. Cuidado!!'; 29 | } 30 | 31 | resultado.textContent = `${nome} seu IMC é ${valorIMC} e você está ${classificacao}`; 32 | 33 | }else { 34 | resultado.textContent = 'Preencha todos os campos!!!'; 35 | } 36 | 37 | } 38 | 39 | calcular.addEventListener('click', imc); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | main{ 2 | display: flex; 3 | width: 100vw; 4 | height: 100vh; 5 | justify-content: center; 6 | align-items: center; 7 | 8 | } 9 | 10 | .container{ 11 | display: flex; 12 | flex-direction: column; 13 | background: rgb(255,198,0); 14 | width: 400px; 15 | height: 600px; 16 | align-items: center; 17 | justify-content: space-evenly; 18 | border-radius: 20px; 19 | box-shadow: 0 0 10px black; 20 | } 21 | 22 | .title{ 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | width: 100%; 27 | height: 50px; 28 | font: bold 2.5rem serif; 29 | border-bottom: solid 5px black; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .input { 34 | display: flex; 35 | width: 300px; 36 | height: 50px; 37 | justify-content: space-between; 38 | align-items: center; 39 | } 40 | .input input { 41 | width: 200px; 42 | height: 50px; 43 | border-radius: 5px; 44 | border:none; 45 | outline: 0; 46 | font: bold 1.5rem serif; 47 | text-align: center; 48 | } 49 | 50 | .input label { 51 | font: bold 1.5rem serif; 52 | } 53 | 54 | button{ 55 | width: 300px; 56 | height: 40px; 57 | font: bold 1.2rem serif; 58 | background: #000; 59 | color: rgb(255,198,0); 60 | outline: none; 61 | border-radius: 5px; 62 | cursor: pointer; 63 | } 64 | 65 | .result{ 66 | display: flex; 67 | margin-top: 20px; 68 | align-items: center; 69 | width: 300px; 70 | height: 150px; 71 | border-radius: 5px; 72 | font: italic 1.5rem serif; 73 | box-shadow: 0px 0px 10px black; 74 | background: #000; 75 | color: rgb(255,198,0); 76 | padding: 20px; 77 | box-sizing: border-box; 78 | user-select: none; 79 | } --------------------------------------------------------------------------------