Solución alumnos definitiva

<!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() {
    // Rcupero los datos del storage esto se hace solo una vez
    getStorageData();
    pintarAlumnos();
}


function nuevoAlumno() {
    // Recuperar los datos del modal
    let alumno = getDatosAlumno();
    if (alumno.nota<0 || alumno.nota>10){
        alert("Nota incorrecta")
        return
    }
    // 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();
}
function borrarAlumno() {
    let idalumno=this.dataset.idalumno
    estado.alumnos=estado.alumnos.filter((x,i)=>i!=idalumno);
    pintarAlumnos();
}
// Funciones de localStorage
function getStorageData(){
    let alumnos=localStorage.getItem("alumnos") || "[]";
    alumnos=JSON.parse(alumnos);
    estado.alumnos=alumnos
}
function setStorageData(){
    localStorage.setItem("alumnos",JSON.stringify(estado.alumnos))
}

// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarAlumnos() {
    setStorageData();
    pintarDatos(estado.alumnos, estado.tabla)
}
function pintarDatos(alumnos, destino) {
    lista = "";
    let suma=0;
    let i=0;
    for (let alumno of alumnos) {
        lista += `<tr><td>${alumno.nombre}</td><td class=${alumno.nota >= 5 ? "text-success " : "text-danger"}>${alumno.nota}</td><td>
        <button data-idalumno="${i}" type="button" class="btn btn-danger btn-sm  borrar_alumno">
        Borrar
    </button>
        </td></tr>`;
        i++
        suma+=alumno.nota
    }
    let media=Math.round(suma*100/alumnos.length)/100
    lista += alumnos.length>0?`<tr><td>Media</td><td class=${media >= 5 ? "text-success " : "text-danger"}>${media}</td></tr>`:"";

    destino.innerHTML = lista;
    for (let boton of document.getElementsByClassName("borrar_alumno")) {
        boton.addEventListener("click",borrarAlumno);
    }
}

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos