Acabei de terminar a formação front-end e percebi que tenho tido bem mais dificuldade com javascript do que com o HTML e o CSS, então resolvi fazer os cursos desde o início de javascript, e essa foi a minha solução para exibir o IMC (vou atualizando o programa conforme for pedido no curso, como o acréscimo de condições e etc.). Estou postando para caso alguém tenha alguma dica de como melhorar o código, eu ficaria muito feliz em saber,
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="container__titulo">Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente" >
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
</section>
</main>
<script src="./js/main.js"></script>
</body>
</html>
CSS:
.botao-imc{
background-color: #12d48a;
border-radius: 5px;
border: none;
color: #f9f9f9f9;
padding: 5px 10px;
width: 6rem;
transition: 400ms;
}
.botao-imc:hover{
cursor: pointer;
transform: scale(1.125);
background-color: #5eeeb7;
box-shadow: 5px 5px 10px #373636;
}
Javascript:
// Criando a função que vai calcular o imc;
function calculaIMC(altura,peso){
const imc = peso/(altura*altura)
return imc;
}
// Capturando todas as tr's com a classe paciente
const listaPaciente = document.querySelectorAll('.paciente');
// Utilizando o forEach para criar dinâmicamente um botão em todos os pacients para calcular o IMC;
listaPaciente.forEach((elemento) =>{
const botaoIMC = document.createElement('input')
const linha = document.createElement('td');
linha.classList.add('info-botao');
botaoIMC.classList.add('botao-imc')
botaoIMC.type = 'button';
botaoIMC.value = 'IMC';
// Inserindo os botões em seus respectivos lugares no HTML
linha.appendChild(botaoIMC);
elemento.appendChild(linha);
})
const titulo = document.querySelector(".container__titulo");
titulo.textContent = "Aparecida Nutricionista";
// capturando os botões criados para inserir a função calcularIMC
const listaBotao = document.querySelectorAll('.botao-imc');
// Utilizando o forEach para inserir um evento com a função em todos os botões
listaBotao.forEach((elemento) =>{
elemento.addEventListener("click", (evento) => {
// Capturando dinamicamente a posição dos valores que serão passados a função
const paciente = evento.composedPath()[2];
const peso = parseFloat(paciente.childNodes[3].textContent);
const altura = parseFloat(paciente.childNodes[5].textContent);
const resultadoIMC = paciente.childNodes[9];
const imc = calculaIMC(altura,peso ).toFixed(2);
// Exibindo os valores na tabela
resultadoIMC.innerHTML = imc;
})
})