Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript

JavaScript: calcular nota de estudiante con formulario (ejercicio resuelto)

Hoy vamos a resolver un ejercicio con JavaScript, HTML y CSS. La solicitud dice así:

Diseñar y desarrollar un formulario para calcular la nota de la unidad de una asignatura.El usuario debe enviar los datos mediante un formulario en HTML

 

Por medio de JavaScript procesar los datos recibidos y enviarlos a otra página donde debe imprimir el nombre del estudiante, el nombre de la asignatura y las notas obtenidas y el calculo de la nota del laboratorio, de la nota del parcial y de la unidad.

Evitar que el formulario se envíe si hay uno o más campos vacíos.

Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript
Calcular nota final de unidad y laboratorio – Ejercicio resuelto con JavaScript

Si hay notas menores a 0.0 y/o mayores a 10.0 evitar que el formulario se envíe y mandar un alert al usuario para que corrija los datos.

  • Aplicar diseño mediante boostrap en css
  • Los datos deben solicitarse en una página e imprimirse en otra
  • Usar el session storage.

Datos a solicitar:

  1. Nombre del estudiante
  2. Carnet del Estudiante
  3. Nombre de la asignatura
  4. Nota del taller 1
  5. Nota del taller 2
  6. Nota del parcial

Datos a imprimir:

  1. Nombre del estudiante
  2. Carnet del Estudiante
  3. Nombre de la asignatura
  4. Nota del taller 1
  5. Nota del taller 2
  6. Nota final del laboratorio
  7. Nota del parcial
  8. Nota final de la unidad

Porcentajes a tomar en cuenta:

La nota de la unidad se divide en:

  • 40% laboratorio
  • 60% parcial

El laboratorio es el promedio de la nota de dos talleres

  • 50% taller 1
  • 50% taller 2

Veamos entonces la solución a este ejercicio propuesto de programación con JavaScript.

Solución del ejercicio

Primero veamos el formulario, es un simple formulario con varios input. No tiene action pero tiene un id que vamos a usar para obtener una referencia al mismo desde JavaScript:

Por cierto, el formulario no tiene validaciones (ninguno dice required ni min o max) pues lo vamos a validar desde JavaScript con enviar.js.

Manejar envío de formulario

Desde JavaScript vamos a cancelar el evento del envío del formulario con preventDefault, luego vamos a recorrer los elementos del formulario, comprobar si son input y ver si todos están llenos.

Luego de comprobar que todos tienen valor, obtenemos los elementos de tipo numérico para validar que el valor está entre 0 y 10.

Finalmente creamos un diccionario vacío, recorremos el formulario de nuevo y vamos agregando los valores del formulario a un objeto que luego codificamos como JSON. Después de eso guardamos el JSON en sessionStorage y redireccionamos.

Es importante notar que la clave del diccionario será el id del input y su valor la propiedad value. Además, si el elemento es numérico su valor se convierte a flotante con parseFloat.

Lo he hecho de esta manera para que si se agregan más campos todo funcione de la misma manera y se siga guardando sin agregar más código.

Nos vemos en imprimir.html.

Imprimiendo valores

Ahora en la siguiente página debemos mostrar los valores. Recuerda que en realidad no enviamos el formulario, solo lo guardamos en sessionStorage y ahora lo vamos a recuperar para mostrar los datos.

Todos los datos se van a mostrar en un párrafo o encabezado, mismos que vamos a recuperar a través del ID:

Todo está en una tabla pero los elementos que muestran la información son un header o un párrafo.

Luego desde JavaScript recuperamos el valor, calculamos y mostramos resultados:

Conclusión

Lo único que no coloqué fue el código de Bootstrap. Ese lo obtienes de getbootstrap.com o de cualquier otro lugar, además no afecta en el desarrollo del ejercicio.

Solo para que quede claro, la versión que yo utilicé fue Bootstrap v5.2.2.

Por aquí te dejo más tutoriales de JavaScript en mi blog.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario