Proyecto: Calculadora de promedio

Objetivo general

Lograr que los estudiantes comprendan cómo construir una aplicación web funcional que permita calcular el promedio de notas utilizando HTML para la estructura, CSS para el diseño visual y JavaScript para la lógica. El proyecto tiene como finalidad reforzar el uso de formularios, operaciones aritméticas, estructuras condicionales y manipulación del DOM.

Objetivos específicos

• Utilizar etiquetas HTML para construir un formulario que reciba varias notas.

• Aplicar estilos CSS básicos para organizar visualmente la calculadora de notas.

• Implementar funciones en JavaScript para tomar los valores ingresados, calcular el promedio y mostrar un mensaje dependiendo del resultado.

• Mostrar el resultado de forma dinámica sin recargar la página.

• Reforzar el uso de funciones, eventos (click) y la manipulación del DOM con getElementById, innerHTML, etc.

  
  

Glosario

🔵 HTML

• <label>: Etiqueta descriptiva para campos de entrada.

• <input type="number">: Campo de entrada numérica para ingresar cada nota.

• <button>: Botón que ejecuta el cálculo.

• <div>: Contenedor para organizar los elementos.

• <h1>, <p>: Títulos y descripciones.

• <script>: Donde se enlaza o escribe el código JavaScript.

• <style>: Donde se escribe CSS embebido.

  
  

🟢 CSS

• margin, padding: Espaciado interno y externo.

• font-size, font-family: Estilos tipográficos.

• background-color, color: Colores de fondo y texto.

• display, flex, text-align: Organización visual y centrado.

  
  

🔴 JavaScript

• getElementById(): Accede a los elementos del formulario.

• parseFloat(): Convierte los valores de texto a número decimal.

• addEventListener('click', ...): Detecta el clic sobre el botón.

• innerText / innerHTML: Muestra el resultado final.

• function: Permite definir una función personalizada.

• if / else: Estructuras condicionales para evaluar si el estudiante aprueba.

Desarrollo paso a paso

Estructura HTML

Crear el formulario de entrada con etiquetas <input> para las notas, <label> para guiar al usuario, y un <button> para ejecutar el cálculo.

Paso 2: Estilos en CSS

Aplicar estilos básicos para mejorar la apariencia. Centrar el contenido usando flex, aplicar colores, márgenes, bordes suaves (border-radius) y sombras (box-shadow).

Paso 3: Programación con JavaScript

• Leer los valores desde los campos usando getElementById().

• Usar parseFloat() para convertir los datos.

• Calcular el promedio.

• Mostrar un mensaje condicional:

  • "Aprobado" si el promedio ≥ 3.0

  • "Reprobado" si el promedio < 3.0

Criterios de logro

• El formulario permite ingresar al menos 3 notas.

• El botón ejecuta correctamente el cálculo y muestra el resultado.

• Se aplicaron estilos visuales claros y legibles.

• El promedio se muestra dinámicamente en pantalla.

• El código es organizado y funcional.