Proyecto: Año Bisiesto
- Coachs Desarrollo
- 8 sept
- 2 Min. de lectura
Objetivo del proyecto
Este proyecto te guiará en la creación de una aplicación interactiva para determinar si un año ingresado por el usuario es bisiesto o no. Aprenderás a combinar HTML, CSS y JavaScript para construir una interfaz funcional, dinámica y atractiva.
Al finalizar este proyecto, serás capaz de:
Diseñar una estructura semántica HTML5 usando etiquetas como <main>, <section>, <header>, y más.
Aplicar estilos CSS para mejorar la presentación visual y hacerla adaptable a diferentes dispositivos.
Implementar funciones, condicionales y operadores en JavaScript para aplicar la lógica de validación de un año bisiesto.
Integrar HTML, CSS y JavaScript para crear una experiencia interactiva completa.
Contenidos del proyecto
HTML
Crear una estructura semántica con etiquetas como <header>, <main>, <section>, <footer>, entre otras.
Diseñar una interfaz básica para la entrada del año y visualización del resultado.
CSS
Estilizar el cuerpo del documento con colores de fondo, márgenes, fuentes, y espaciados.
Aplicar border-radius, box-shadow y display: flex para una presentación moderna y responsiva.
JavaScript
Aplicar condicionales (if, else) y operadores para validar si un año es bisiesto.
Usar funciones para organizar el código y responder a eventos como clics.
Explorar estructuras como switch para mostrar mensajes según el año o época.
Glosario de comandos
HTML (Estructura del contenido)
<!DOCTYPE html>: Declara el tipo de documento como HTML5.
<html>: Elemento raíz del documento.
<head>: Sección con metadatos, enlaces a estilos, etc.
<body>: Contiene el contenido visible.
<header>: Cabecera del sitio.
<main>: Contenido principal.
<section>: Agrupación temática de contenido.
<article>: Bloque independiente.
<aside>: Información complementaria.
<footer>: Pie de página.
<input>: Entrada de datos del usuario.
<button>: Botón para interactuar con JavaScript.
CSS (Estilos visuales)
background-color: Color de fondo.
font-family: Fuente del texto.
padding / margin: Espaciado interior / exterior.
border-radius: Esquinas redondeadas.
box-shadow: Sombra decorativa.
display: flex: Activación de Flexbox.
flex-direction: Dirección de los elementos.
align-items: Alineación vertical.
text-align: Alineación de texto.
:hover: Efecto al pasar el mouse.
max-width: Ancho máximo.
responsive: Diseño adaptable a pantallas.
JavaScript (Lógica e interactividad)
document.getElementById(): Selección de elementos por ID.
parseInt(): Convierte texto a número entero.
textContent: Cambia el texto visible.
innerHTML: Inserta/modifica contenido HTML.
if / else: Condicionales.
switch: Alternativas múltiples.
%: Devuelve residuo (útil para lógica de bisiesto).
===: Comparación estricta.
function: Declara funciones.
addEventListener(): Asocia eventos con funciones.
console.log(): Imprime mensajes en la consola.
return: Devuelve valores desde funciones.
Desarrollo paso a paso
Paso 1 – Estructura HTML
Paso 2 – Estilizado con CSS
Paso 3 – Lógica con JavaScript
Paso 4 – Experimentación con Switch
Usa switch para agregar mensajes personalizados según el siglo.
Criterios
✅ Estructura HTML semántica bien aplicada.
✅ Estilos CSS limpios y diseño responsivo.
✅ Función para determinar si un año es bisiesto.
✅ Interacción básica funcional con botones y resultados.
✅ Uso de condicionales y operadores correctamente implementados.
✅ Código organizado, comentado y sin errores visibles.
Retos adicionales
Permitir al usuario ingresar un rango de años para ver cuáles son bisiestos.
Agregar historial de resultados en pantalla.
Mostrar cuántos años faltan para el próximo año bisiesto.
Personalizar estilos con animaciones al mostrar el resultado.
Comentarios