1
respuesta

Haz lo que hicimos en aula

Comparto código desarrollado en el aula.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Buona Vita Nutrición</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">Buona Vita Nutrición</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Mis pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabla-pacientes">
                        <tr class="paciente">
                            <td class="info-nombre">Pablo</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-nombre">Juan</td>
                            <td class="info-peso">8000</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-nombre">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">3.5</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nombre">Diego</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-nombre">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>
var pacientes=document.querySelectorAll(".paciente");//capturar todos los pacientes


for (var i = 0; i<pacientes.length; i++) {

    var paciente =pacientes[i];

    var tdPeso=paciente.querySelector(".info-peso")

    var tdAltura= paciente.querySelector(".info-altura")

    var tdIMC=paciente.querySelector(".info-imc")


    var altura = tdAltura.textContent;
    var peso = tdPeso.textContent;


     pesoEsvalido=true;
     alturaEsvalida=true;


     if((peso<0) || (peso>1000)){
         console.log("Peso incorrecto");
         tdIMC.textContent="Peso incorrecto";
         pesoEsvalido = false;
         paciente.classList.add("paciente-incorrecto");//añadir una clase

     }

practica

1 respuesta

Hola Verónica

Gracias por compartir tu código, está muy bien felicitaciones.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios