<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lista alumnos</title> <link rel="stylesheet" href="./css/bootstrap1.css"> </head> <body> <div class="container "> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAlumno"> Añadir alumno </button> <!--Utilizo la tabla para que quede más o menos bonito--> <table class="table table-striped m-4"> <thead> <tr> <th>Alumno</th> <th>Nota</th> <!-- Tengo el id para borrar todas las tareas--> <th> <button type="button" class="btn btn-danger" id="borrar_alumnos"> Eliminar todos </button></th> </tr> </thead> <tbody id="lista_alumnos"> </tbody> </table> <!-- Utilizamos el Modal de w3school ¡copiado! --> <div class="modal fade" id="modalAlumno"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Nuevo alumno</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- El input tiene un id porque necesito el valor --> <div class="modal-body"> <input id="nombreAlumno" class="form-control " type="text" placeholder="Introduzca el nombre del alumno"> <input id="notaAlumno" class="form-control " type="number" placeholder="Introduzca la nota del alumno"> </div> <!-- El boton de nueva tarea tiene un id por la misma razón --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-success" id="nuevo_alumno">Añadir alumno</button> </div> </div> </div> </div> </div> <script src="./js/bootstrap.bundle.js"></script> <script src="./js/alumnos.js"></script> </body> </html>
let estado = {} // Para guardar todos los componentes que me hacen falta window.onload = function () { // Guardo todos los accesos a los elementos html que necesito // Me olvido del html para el resto del código estado.nuevo = document.getElementById("nuevo_alumno"); estado.nuevo.addEventListener("click", nuevoAlumno); estado.borrar = document.getElementById("borrar_alumnos"); estado.borrar.addEventListener("click", borrarAlumnos); estado.tabla = document.getElementById("lista_alumnos"); estado.nombre = document.getElementById("nombreAlumno"); estado.nota = document.getElementById("notaAlumno"); estado.modal = document.getElementById("modalAlumno"); estado.alumnos = []; iniciar(); } function iniciar() { estado.alumnos = [{ nombre: "Ana", nota: 5 }, { nombre: "Eva", nota: 8 }, { nombre: "Pep", nota: 3 }]; pintarAlumnos() } function nuevoAlumno() { // Recuperar los datos let alumno = getDatosAlumno(); // Añadirlos al estado estado.alumnos.push(alumno); // Pintar los datos pintarAlumnos() ocultarModal() } function borrarAlumnos() { estado.alumnos = []; pintarAlumnos(); } function getDatosAlumno() { return { nombre: estado.nombre.value, nota: Number(estado.nota.value) } } function ocultarModal() { bootstrap.Modal.getInstance(estado.modal).hide(); } // Una capa intermedia entre la función pura y nuestro programa // Con el fin de que todo sea más escalable function pintarAlumnos() { pintarDatos(estado.alumnos, estado.tabla) } function pintarDatos(alumnos, destino) { lista = ""; let suma=0; for (let alumno of alumnos) { lista += `<tr><td>${alumno.nombre}</td><td class=${alumno.nota >= 5 ? "text-success " : "text-danger"}>${alumno.nota}</td></tr>`; suma+=alumno.nota } let media=Math.round(suma*100/alumnos.length)/100 lista += `<tr><td>Media</td><td class=${media >= 5 ? "text-success " : "text-danger"}>${media}</td></tr>`; destino.innerHTML = lista; }