Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript
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.
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.
Datos a solicitar:
Datos a imprimir:
Porcentajes a tomar en cuenta:
La nota de la unidad se divide en:
El laboratorio es el promedio de la nota de dos talleres
Veamos entonces la solución a este ejercicio propuesto de programación con JavaScript.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcular nota de la unidad</title>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row align-items-start">
<form action-xhr="#" id="formulario">
<div class="col">
<div class="mb-3">
<label for="nombreEstudiante" class="form-label">Nombre:</label>
<input type="text" class="form-control" id="nombreEstudiante"
placeholder="Nombre del estudiante">
</div>
<div class="mb-3">
<label for="carnetEstudiante" class="form-label">Carnet:</label>
<input type="text" class="form-control" id="carnetEstudiante"
placeholder="Carnet del estudiante">
</div>
<div class="mb-3">
<label for="nombreAsignatura" class="form-label">Asignatura:</label>
<input type="text" class="form-control" id="nombreAsignatura"
placeholder="Nombre de la asignatura">
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="notaTaller1" class="form-label">Nota del taller 1:</label>
<input step="0.01" type="number" class="form-control" id="notaTaller1"
placeholder="Nota del taller 1">
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="notaTaller2" class="form-label">Nota del taller 2:</label>
<input step="0.01" type="number" class="form-control" id="notaTaller2"
placeholder="Nota del taller 2">
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="notaParcial" class="form-label">Nota del parcial:</label>
<input step="0.01" type="number" class="form-control" id="notaParcial"
placeholder="Nota del parcial">
</div>
</div>
</div>
<button class="btn btn-success">Calcular</button>
</div>
</form>
</div>
</div>
<script src="enviar.js"></script>
</body>
</html>Por cierto, el formulario no tiene validaciones (ninguno dice required ni min o max) pues lo vamos a validar desde JavaScript con enviar.js.
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.
document.addEventListener("DOMContentLoaded", () => {
const $formulario = document.querySelector("#formulario");
const $notaTaller1 = document.querySelector("#notaTaller1"),
$notaTaller2 = document.querySelector("#notaTaller2"),
$notaParcial = document.querySelector("#notaParcial");
$formulario.onsubmit = function (evento) {
// Prevenir envío de formulario
evento.preventDefault();
// Recorrer elementos input y si alguno está vacío detenernos
const elementos = $formulario.elements;
for (const elemento of elementos) {
if (elemento.tagName === "INPUT" && elemento.value === "") {
return;
}
}
// Hasta aquí todos los campos están llenos
for (const $nota of [$notaTaller1, $notaTaller2, $notaParcial]) {
const valor = parseFloat($nota.value);
if (valor < 0 || valor > 10) {
return alert(`El valor de ${$nota.placeholder} debe estar entre 0 y 10`);
}
}
// Hasta aquí las notas son correctas
const datos = {};
for (const elemento of elementos) {
if (elemento.tagName === "INPUT") {
let valor = elemento.value;
if (elemento.type === "number") {
valor = parseFloat(elemento.value);
}
datos[elemento.id] = valor;
}
}
sessionStorage.setItem("datosEstudiante", JSON.stringify(datos));
window.location.href = "./imprimir.html";
}
});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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imprimir datos</title>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h2>Resultados</h2>
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>Nombre</strong></td>
<td colspan="2">
<p id="nombreEstudiante"></p>
</td>
</tr>
<tr>
<td><strong>Carnet</strong></td>
<td colspan="2">
<p id="carnetEstudiante"></p>
</td>
</tr>
<tr>
<td><strong>Asignatura</strong></td>
<td colspan="2">
<p id="nombreAsignatura"></p>
</td>
</tr>
<tr>
<td><strong>Nota del taller 1</strong></td>
<td><strong>Nota del taller 1</strong></td>
<td><strong>Nota final de laboratorio</strong></td>
</tr>
<tr>
<td>
<p id="notaTaller1"></p>
</td>
<td>
<p id="notaTaller2"></p>
</td>
<td>
<p id="notaLaboratorio"></p>
</td>
</tr>
<tr>
<td><strong>Nota del parcial</strong></td>
<td colspan="2">
<p id="notaParcial"></p>
</td>
</tr>
<tr>
<td><strong>Nota final de la unidad</strong></td>
<td colspan="2">
<h3 id="notaFinal"></h3>
</td>
</tr>
</tbody>
</table>
<button >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:
document.addEventListener("DOMContentLoaded", () => {
const datosEstudianteCodificados = sessionStorage.getItem("datosEstudiante");
// No hay datos
if (!datosEstudianteCodificados) {
return alert("No hay datos guardados. Asegúrate de enviar el formulario");
}
const datosEstudiante = JSON.parse(datosEstudianteCodificados);
const notaLaboratorio = (datosEstudiante.notaTaller1 + datosEstudiante.notaTaller2) / 2;
const notaUnidad = (notaLaboratorio * 4 / 10) + (datosEstudiante.notaParcial * 6 / 10);
document.querySelector("#nombreEstudiante").textContent = datosEstudiante.nombreEstudiante;
document.querySelector("#carnetEstudiante").textContent = datosEstudiante.carnetEstudiante;
document.querySelector("#nombreAsignatura").textContent = datosEstudiante.nombreAsignatura;
document.querySelector("#notaTaller1").textContent = datosEstudiante.notaTaller1;
document.querySelector("#notaTaller2").textContent = datosEstudiante.notaTaller2;
document.querySelector("#notaParcial").textContent = datosEstudiante.notaParcial;
document.querySelector("#notaLaboratorio").textContent = notaLaboratorio;
document.querySelector("#notaFinal").textContent = notaUnidad;
});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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.