Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

Lo que hicimos en el aula

Referente al curso JavaScript: Introducción al lenguaje de la web, en el capítulo Buenas prácticas con JavaScript y actividad Haz lo que hicimos en el aula

por Renzo Giraudo
| 54.2k xp | 59 posts

Archivo Index.html

<!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">70</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">1.70</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>
        <section class="container">
            <h2 id="titulo-form">Adicionar nuevo paciente</h2>
            <form id="form-adicionar" >
                <div class="grupo">
                    <label for="nombre">Nombre:</label>
                    <input id="nombre" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite la altura del paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" type="text" placeholder="digite el porcentaje de gordura del paciente" class="campo campo-medio">
                </div>
                <button id="adicionar-paciente" class="boton bto-principal">Adicionar</button>
            </form>
        </section>
   <script src="js/calcular-imc.js"></script>
   <script src="js/form.js"></script>
    </body>
</html>
4 respuestas
por Renzo Giraudo
| 54.2k xp | 59 posts

Archivo calcularIMC.js

var pacientes = document.querySelectorAll(".paciente");
console.log(pacientes);

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

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

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

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


    pesoEsValido = true;
    alturaEsValida = true;

    if((peso < 0) || (peso > 1000)){
      console.log("Peso incorrecto");
      tdIMC.textContent = "Peso Incorrecto";
      pesoEsValido = false;
      paciente.classList.add("paciente-incorrecto");

    }

    if((altura < 0) || (altura > 3.00)){
      console.log("Altura incorrecta");
      tdIMC.textContent = "Altura Incorrecta";
      alturaEsValida = false;
      paciente.classList.add("paciente-incorrecto");

    }

    if(pesoEsValido && alturaEsValida){
      tdIMC.textContent = calcularIMC(peso,altura);
    }

}    

function calcularIMC(peso,altura){
  var imc = peso / (altura*altura);
  return imc.toFixed(2);
}
por Renzo Giraudo
| 54.2k xp | 59 posts

Archivo form.js

var botonAdicionar = document.querySelector("#adicionar-paciente");

botonAdicionar.addEventListener("click",function(event){
    event.preventDefault();

    var form = document.querySelector("#form-adicionar");

    var nombre = form.nombre.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value;

    var tabla = document.querySelector("#tabla-pacientes");

    pacienteTr = document.createElement("tr");
    nombreTd = document.createElement("td");
    pesoTd = document.createElement("td");
    alturaTd = document.createElement("td");
    gorduraTd = document.createElement("td");
    imcTd = document.createElement("td");

    nombreTd.textContent = nombre;
    pesoTd.textContent = altura;
    alturaTd.textContent = peso;
    gorduraTd.textContent = gordura;
    imcTd.textContent = calcularIMC(peso,altura);

    pacienteTr.appendChild(nombreTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);

    tabla.appendChild(pacienteTr);


});
por Jose Gonzalez
| 2169.9k xp | 6782 posts
Instructor

Hola Renzo

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
por Jorge Arturo Vanegas Isaza
| 150.4k xp | 143 posts

Renzo, muchas gracias.