Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

É possível melhorar o código?

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Buscando dados do paciente

por Lúcio Carvalho Almeida
| 181.7k xp | 67 posts

Pausei a aula 2-1 para tentar fazer o javascript da pagina sozinho e cheguei ao seguinte código:

var pacientes = ["#primeiro-paciente", "#segundo-paciente", "#terceiro-paciente", "#quarto-paciente", "#quinto-paciente"]
var i = 0
var imc = [0,0,0,0,0]

//imc
while (i <= 4) {
    //calcula valores
    var paciente = document.querySelector(pacientes[i])
    var peso = paciente.querySelector(".info-peso").textContent
    var altura = paciente.querySelector(".info-altura").textContent
    imc[i] = Math.round(peso/(altura*altura))
    //adiciona a pagina
    var imcPaciente = paciente.querySelector(".info-imc")
    imcPaciente.textContent = imc[i]

    i++
}

O arquivo html a qual esse script esta indexado é essa:

<!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="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" id="primeiro-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" id="segundo-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" id="terceiro-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" id="quarto-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" id="quinto-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/principal.js"></script>
    </body>
</html>
2 respostas
solução!
por Lucas Marcolino Faria da Costa
| 71.2k xp | 7 posts
Front-end

Boa tarde caro amigo. Tudo bem?

Dá sim para melhorar o seu código e muito. Já pensou se o número de pacientes cresce e você tem que alterar o seu código toda hora?

Ao invés de você adicionar na mão (hardcode) todos os Id's das Tr's, podemos selecionar vários elementos com uma mesma classe ou id.

No nosso caso, vemos que todas as Tr's tem a classe "paciente", logo podemos usar essa classe para obter um array com todas as Tr's usando o comando "querySelectorAll()"

Segue o comando: 

var pacientes = document.querySelectorAll('paciente');

A partir desse array, você pode fazer seu código com while ou for, aconselho fazer com o for, porque você sabe exatamente quantas iterações você precisa fazer através do:

pacientes.length

Outra melhoria seria você usar a função toFixed(), que recebe como parâmetro a quantidade de casas decimais desejadas.

Logo ficaria assim seu código refatorado: 


var pacientes = document.querySelectorAll('paciente');

for (let i = 0; i < pacientes.length; i++) {
    var paciente = pacientes[i];
    var peso = paciente.querySelector(".info-peso").textContent;
    var altura = paciente.querySelector(".info-altura").textContent;
    var imc = paciente.querySelector(".info-imc");
    imc.textContent = (peso / (altura * altura)).toFixed(2);
}

Espero ter te ajudado! Abraço,

Marcolino

por Lúcio Carvalho Almeida
| 181.7k xp | 67 posts

Muito obrigado Lucas! Vou tentar aplicar no meu documento