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.
- 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:
- Nombre del estudiante
- Carnet del Estudiante
- Nombre de la asignatura
- Nota del taller 1
- Nota del taller 2
- Nota del parcial
Datos a imprimir:
- Nombre del estudiante
- Carnet del Estudiante
- Nombre de la asignatura
- Nota del taller 1
- Nota del taller 2
- Nota final del laboratorio
- Nota del parcial
- 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:
<!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="" 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.
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.
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.
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:
<!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 onclick="javascript:window.history.back();" class="btn btn-success">Volver al formulario</button>
</div>
</div>
</div>
<script src="imprimir.js"></script>
</body>
</html>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;
});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.
