<!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;
}