programacion-web/js/javascript15.js

validacion-formularios

let estudiantes = [];

    function agregarEstudiante() {
      const nameInput = document.getElementById('nameInput');
      const gradeInput = document.getElementById('gradeInput');
      const alerta = document.getElementById('alerta');
      const mensajeError = document.getElementById('mensajeError');
      
      // Validar campos
      if (nameInput.value.trim() === "") {
        mensajeError.textContent = "Por favor ingresa el nombre del estudiante";
        alerta.classList.remove('d-none');
        return;
      }
      
      if (gradeInput.value === "" || isNaN(gradeInput.value)) {
        mensajeError.textContent = "Por favor ingresa una calificación válida (0-100)";
        alerta.classList.remove('d-none');
        return;
      }
      
      const calificacion = parseFloat(gradeInput.value);
      if (calificacion < 0 || calificacion > 100) {
        mensajeError.textContent = "La calificación debe estar entre 0 y 100";
        alerta.classList.remove('d-none');
        return;
      }
      
      // Si todo está bien, ocultar alerta
      alerta.classList.add('d-none');
      
      // Agregar estudiante al arreglo
      estudiantes.push({
        nombre: nameInput.value.trim(),
        calificacion: calificacion
      });
      
      // Limpiar campos
      nameInput.value = "";
      gradeInput.value = "";
      
      // Actualizar lista de estudiantes
      actualizarListaEstudiantes();
    }
    
    function actualizarListaEstudiantes() {
      const studentList = document.getElementById('studentList');
      
      if (estudiantes.length === 0) {
        studentList.innerHTML = '<div class="text-muted text-center">No hay estudiantes agregados</div>';
        return;
      }
      
      let html = '';
      estudiantes.forEach(estudiante => {
        html += `
          <div class="student-item">
            <strong>${estudiante.nombre}</strong>: ${estudiante.calificacion}
          </div>
        `;
      });
      
      studentList.innerHTML = html;
    }
    
    function calcularResultados() {
      const promedioResult = document.getElementById('promedioResult');
      const mejorResult = document.getElementById('mejorResult');
      const peorResult = document.getElementById('peorResult');
      const alerta = document.getElementById('alerta');
      const mensajeError = document.getElementById('mensajeError');
      
      if (estudiantes.length === 0) {
        mensajeError.textContent = "No hay estudiantes para calcular";
        alerta.classList.remove('d-none');
        
        promedioResult.value = "";
        mejorResult.value = "";
        peorResult.value = "";
        return;
      }
      
      // Ocultar alerta si hay estudiantes
      alerta.classList.add('d-none');
      
      // Calcular promedio
      const promedio = estudiantes.reduce((total, estudiante) => total + estudiante.calificacion, 0) / estudiantes.length;
      
      // Encontrar mejor y peor calificación
      const calificaciones = estudiantes.map(e => e.calificacion);
      const maxCalificacion = Math.max(...calificaciones);
      const minCalificacion = Math.min(...calificaciones);
      
      const mejorEstudiante = estudiantes.find(e => e.calificacion === maxCalificacion);
      const peorEstudiante = estudiantes.find(e => e.calificacion === minCalificacion);
      
      // Mostrar resultados
      promedioResult.value = promedio.toFixed(2);
      mejorResult.value = `${mejorEstudiante.nombre} (${maxCalificacion})`;
      peorResult.value = `${peorEstudiante.nombre} (${minCalificacion})`;
    }

    // Agregar estudiante al presionar Enter en el campo de calificación
    document.getElementById('gradeInput').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        agregarEstudiante();
      }
    });