[Johnny Palaguachi]

Hola Grupo comparto mis respuestas a Retos 4-primera parte, para finalizar esta semana.

Reto1objetoE.html 6 KB HTML - Click to view

• Copy Download Link

<title>Calificaciones del curso Javascript</title> <h1>RETO 1 OBJETOS ESTANDAR JAVASCRIPT</h1> <section id="contenedor"> <section id="contenedorInterno"> <div id="opcionAgregar"> Ingrese nombre del alumno: Ingrese nota: <button type="button">Agregar Calificaciones</button> </div> <table id="tabla1"> <caption> Un resumen de las notas obtenidos por los estudiantes de javascript. </caption> <tr> <td>Rango de Calificaciones</td> <th>0 - 3.99</th> <th>4 - 5.99</th> <th>6 - 7.99</th> <th>8 - 8.99</th> <th>9 - 10</th> </tr> <tr> <td>N° de Alumnos</td> <th id="R1"></th> <th id="R2"></th> <th id="R3"></th> <th id="R4"></th> <th id="R5"></th> </tr> </table> <p> El promedio de las notas de los alumnos del curso de javascript es:</p> <p id="promedio"></p> </section> <aside> <table id="tabla2"> <caption> Nota de los estudiantes de javascript. </caption> <tr> <td>Nombre</td> <th>Calificacion</th> </tr> <tr> <td id="N1"></td> <th id="C1"></th> </tr> <tr> <td id="N2"></td> <th id="C2"></th> </tr> <tr> <td id="N3"></td> <th id="C3"></th> </tr> <tr> <td id="N4"></td> <th id="C4"></th> </tr> <tr> <td id="N5"></td> <th id="C5"></th> </tr> <tr> <td id="N6"></td> <th id="C6"></th> </tr> <tr> <td id="N7"></td> <th id="C7"></th> </tr> <tr> <td id="N8"></td> <th id="C8"></th> </tr> <tr> <td id="N9"></td> <th id="C9"></th> </tr> <tr> <td id="N10"></td> <th id="C10"></th> </tr> <tr> <td id="N11"></td> <th id="C11"></th> </tr> <tr> <td id="N12"></td> <th id="C12"></th> </tr> <tr> <td id="N13"></td> <th id="C13"></th> </tr> <tr> <td id="N14"></td> <th id="C14"></th> </tr> <tr> <td id="N15"></td> <th id="C15"></th> </tr> <tr> <td id="N16"></td> <th id="C16"></th> </tr> <tr> <td id="N17"></td> <th id="C17"></th> </tr> <tr> <td id="N18"></td> <th id="C18"></th> </tr> <tr> <td id="N19"></td> <th id="C19"></th> </tr> <tr> <td id="N20"></td> <th id="C20"></th> </tr> <tr> <td id="N21"></td> <th id="C21"></th> </tr> <tr> <td id="N22"></td> <th id="C22"></th> </tr> <tr> <td id="N23"></td> <th id="C23"></th> </tr> <tr> <td id="N24"></td> <th id="C24"></th> </tr> <tr> <td id="N25"></td> <th id="C25"></th> </tr> <tr> <td id="N26"></td> <th id="C26"></th> </tr> <tr> <td id="N27"></td> <th id="C27"></th> </tr> <tr> <td id="N28"></td> <th id="C28"></th> </tr> <tr> <td id="N29"></td> <th id="C29"></th> </tr> <tr> <td id="N30"></td> <th id="C30"></th> </tr> <tr> <td id="N31"></td> <th id="C31"></th> </tr> <tr> <td id="N32"></td> <th id="C32"></th> </tr> <tr> <td id="N33"></td> <th id="C33"></th> </tr> <tr> <td id="N34"></td> <th id="C34"></th> </tr> <tr> <td id="N35"></td> <th id="C35"></th> </tr> <tr> <td id="N36"></td> <th id="C36"></th> </tr> <tr> <td id="N37"></td> <th id="C37"></th> </tr> <tr> <td id="N38"></td> <th id="C38"></th> </tr> <tr> <td id="N39"></td> <th id="C39"></th> </tr> <tr> <td id="N40"></td> <th id="C40"></th> </tr> </table> </aside> </section>

Expand

Reto1objetosE.js 4 KB JavaScript - Click to view

• Copy Download Link

/* Reto 1: Objetos estándar Registro de calificaciones Escribe un programa que almacene un listado de calificaciones de un grupo de alumnos inscritos al curso de JavaScript. El programa debe ser capaz de poder clasificar las calificaciones usando la siguiente tabla. Rangos 0 a 3.99 4 a 5.99 6 a 7.99 8 a 8.99 9 a 10 El programa debe, además, calcular el promedio de calificación del grupo. Se debe crear una tabla en pantalla donde podamos visualizar la relación de alumnos que han quedado en los diferentes rangos. Con cada nueva calificación ingresada, la tabla debe actualizarse de manera automática, asi como el resultado del promedio grupal. Datos: Calificación Donde: Calificación: Variable de entrada que representa la calificación de un alumno Consideraciones: Solo se aceptan calificaciones entre 0 y 10 El programa solo puede almacenar como máximo 40 calificaciones Cada calificación se debe ingresar de manera individual, sin perder el registro de las calificaciones ingresadas previamente. */ const calif=[]; /*Aqui se guardan las calificaciones ingresadas por el usuario */ const nombres=[];/*Aqui se guardan llos nombres ingresadas por el usuario */ /*array que contienen el rango para facilitar el codigo */ let piso=[0, 4, 6, 8, 9]; let techo=[3.99, 5.99, 7.99, 8.99, 10 ]; /*Contructor recibe a=array calificaciones, l=longuitud del array calificaciones, piso y techo son rangos*/ let numcalif = (a, l, piso, techo) => { return{ obtenerPromedio: function() { /*Suma elementos de array a y devuelve promedio*/ let suma=0; for(var k=0; k<=l-1; k++){ suma=suma+a[k]; } let prom=suma/(l); return prom; }, guardarConteo: function(){ let cont=0; let conteo=[]; for(var j=0; j<=4; j++) {/*ciclo que guarda el numero de calificaciones segun el rango*/ cont=0; for(var i=0; i=piso[j] && a[i]<=techo[j]){ cont=cont+1; /* contador que resgistra si la nota esta del rango requerido*/ } } conteo[j]=cont; } return conteo; /* array que guarda el numero de calificaciones para cada rango*/ }, } } function ejecutar () { /* crea objetos, Actualiza calificaciones, nombres, promedio y numero de califiaciones */ l=calif.length; /*calcula la longuitud del array calif (numero de notas registradas) */ const objnumcalif = numcalif(calif, l, piso, techo); for(var y=1; y<=l; y++){ /*ciclo que actualiza los nombres de los alumnos*/ document.getElementById('N'+y).innerHTML=nombres[y-1]; } for(var x=1; x<=l; x++){ /*ciclo que actualiza los calificaciones de los alumnos*/ document.getElementById('C'+x).innerHTML=calif[x-1]; } for(var z=1; z10 || newcal=40){ /*Si el arreglo contiene mads de 40 registros mostrara alerta que no se guardara mas*/ alert('La cantidad maxima de alumnos es 40! \n No puede ingresar mas'); } else{ /*Agrega los datos del registro a los arrays respectivos y llama actualizar la pagina*/ newcal = new Number(newcal); calif.push(newcal); nombres.push(newnom); ejecutar(); } }

Expand

style.css 993 B CSS - Click to view

• Copy Download Link

*{ font-family: arial; font-size: 16px; box-sizing:border-box ; } h1 { font-size: 20px; text-align: center; } #contenedor{ max-width: 100%; margin-top: 25px; margin-bottom: 25px; display: flex; } #contenedorInterno{ flex-grow: 1; padding: 10px; margin-left: 50px; } #opcionAgregar{ margin-top: 10px; margin-bottom: 25px; } #newnom{ width: 170px; } #tabla1 { border: 1px solid #000; justify-content: center; } #contenedor aside{ margin-right: 100px; width: 300px; padding: 10px; } #tabla2 { border: 1px solid #000; justify-content: center; } tr, th { width: 15%; text-align: center; vertical-align: center; border: 1px solid #000; border-collapse: collapse; padding: 0.25em; } caption { padding: 0.3em; color: #fff; background: #000; } td { width: 25%; background: #eee; } button { margin-top: 15px; } input { width: 50px; }

Expand