hay algún error que no ejecuta mi codigo | JavaScript: Introducción al lenguaje de la web | Alura Latam

3
respuestas

por STIVE ALEJANDRO GONZALEZ ALMANZA

| 38.8k xp | 86 posts

hola buenas tardes comunidad, estoy tratando de mirar mi programa y encontrar el error pero realmente no lo hallo, pueden darme una mano con mi programa ? gracias

<!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" id="primer-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">73</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>
                        <tr class="paciente" >
                            <td class="info-nombre">Pedro</td>
                            <td class="info-peso">70</td>
                            <td class="info-altura">1.68</td>
                            <td class="info-gordura">23</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nombre">Maria</td>
                            <td class="info-peso">55</td>
                            <td class="info-altura">1.60</td>
                            <td class="info-gordura">17</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

        <section class="container">
            <h2 id="titulo-form">Adicionar nuevo paciente</h2>
            <form>
                <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/principal.js"></script>         
    </body>
</html>

código javaScript

var titulo = document.querySelector(".titulo");

titulo.addEventListener("click",mostrarMensaje);

function mostrarMensaje(){
    console.log("usted hizo clic en el titulo");
}

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


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.document.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.style.backgroundColor = "orange";
    }

    if(pesoEsValido && alturaEsValida){
    var imc = peso / (altura * altura)
    tdIMC.textContent = imc;
    }
}

3 respuestas

por STIVE ALEJANDRO GONZALEZ ALMANZA

| 38.8k xp | 86 posts

14/09/2022

código Css

*{
    box-sizing: border-box;
 }

body{
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

header{
    background-color: #333;
    height: 3em;
    color: #FFF;
    margin-bottom: 1em;
}

header h1{
    font-size: 2em;
    display:inline-block;
    vertical-align:    middle;
}
header h2{
    font-size: 2em;
    display:inline-block;
    vertical-align:    middle;
}

header .container:before{
    content: '';
    display:inline-block;
    height: 100%;
    vertical-align:    middle;
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

section{
    margin: 2em 0;
    overflow: hidden;
}

section h2{
    font-size: 3em;
    display: block;
    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5em;
}

table{
    width: 100%;
    margin-bottom : .5em;
    table-layout: fixed;

}

td, th {
    padding: .7em;
    margin: 0;
    border: 1px solid #ccc;
    text-align: center;
}

th{
    font-weight: bold;
    background-color: #EEE;
}

label{
    color: #555;
    display: block;
    margin-bottom: .2em;
}

.campo{
    margin: 0;
    padding-bottom: 1em;
    width: 100%;
    border: 1px solid #ccc;
    padding: .7em;
    width: 100%;
}

.campo-medio{
    display: inline-block;
    padding-right: .5em;
}

.grupo{
    width: 32%;
    display: inline-block;
    padding: 10px 0px;
}

button{
    padding: .5em 2em;
    border: 0;
    border-bottom: 3px solid;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: -3px;
    color: #fff;
    background-color:#0c8cd3;
    border-color: #04324c;
    width: 20%;
    display: block;
    clear: both;
    margin: 10px 0px;

}

button:active{
    margin-top:0px;
    border: 0;
}

button[disabled=disabled], button:disabled {
    background-color: gray;
    border-color: darkgray;

}

.adicionar-paciente{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}

.paciente-incorrecto { 
    background-color: lightcoral;
}

adjunto pantallazo del programa Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por STIVE ALEJANDRO GONZALEZ ALMANZA

| 38.8k xp | 86 posts

14/09/2022

en la parte del IMC no se ve reflejado los porcentajes, cuando doy clic en la pagina tampoco me sale en el console.log del browser, cuando le di a poner colores a 2 personas de la tabla tampoco salía reflejado, entonces espero que puedan entender el problema ya que no lo he podido encontrar . gracias

por Evelyn Reis

| 2529.4k xp | 9133 posts

Instructor Instructora

30/09/2022

Hola Stive, espero que estés muy bien.

En relación a tu bucle for, recuerde que todas las matrices comienzan en la posición 0. En tu condición dentro del bucle, la matriz sólo será recorrida, mientras tu indíce for mayor que la posición de tu matriz pacientes. Lo correcto para que recorra toda la matriz és que la condición sea: mientras i < pacientes.length

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

// está incorrecto

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

// deberia ser así

Espero haberte ayudado!

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