🎯 Calculadora de Edad

📖 Descripción Breve

Esta aplicación web es una calculadora de edad simple y eficiente que permite a los usuarios ingresar su fecha de nacimiento y obtener un desglose detallado del tiempo transcurrido desde entonces. Resuelve la necesidad de calcular edades precisas en múltiples unidades de tiempo, útil para aplicaciones personales, educativas o profesionales.

El proyecto está dirigido a desarrolladores que buscan ejemplos de manipulación de fechas en JavaScript, así como a usuarios finales que requieren cálculos de edad rápidos y precisos.

✨ Características Principales

• 📅 Cálculo preciso de edad: Convierte fechas a años, meses, semanas, días, horas, segundos y milisegundos.
• 🛡️ Validación de entrada: Verifica formatos de fecha válidos y alerta sobre errores.
• 🎨 Interfaz responsiva: Diseño atractivo con gradientes y sombras para una experiencia visual agradable.
• ⚡ Procesamiento en tiempo real: Cálculos instantáneos sin recargas de página.
• 📱 Compatible con dispositivos móviles: Funciona en diferentes tamaños de pantalla.

🖼️ Demo/Vistas Previas

Para ver la aplicación en funcionamiento, simplemente abre el archivo index.html en tu navegador web o visita la demo en vivo. La interfaz presenta un formulario simple donde puedes ingresar tu fecha de nacimiento en formato DD-MM-YYYY y obtener resultados detallados.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
HTML5	-	Estructura de la página web
CSS3	-	Estilos y diseño responsivo
JavaScript (ES6+)	-	Lógica de cálculo y manipulación del DOM

🚀 Instalación y Configuración

Este proyecto no requiere instalación compleja. Simplemente clona o descarga los archivos y ábrelos en un navegador web moderno.

# Clona el repositorio (si aplica)
git clone https://github.com/Seb-RM/Javascript_Html_Css-Age-Calculator.git

# Navega al directorio del proyecto
cd calculadora-edad

# Abre index.html en tu navegador
# En Windows: doble clic en index.html
# O desde terminal: start index.html

Requisitos del sistema:

• Navegador web moderno (Chrome, Firefox, Safari, Edge)
• No se requieren dependencias externas ni servidor

📚 Guía de Uso

1. Ingreso de datos: En el campo "Enter your birthdate", ingresa tu fecha de nacimiento en formato DD-MM-YYYY (ejemplo: 15-08-1990).

2. Cálculo: Haz clic en el botón "Calculate Age".

3. Resultados: La aplicación mostrará:

   • Edad en años, meses y días
   • Meses totales transcurridos
   • Semanas totales
   • Días totales
   • Horas totales
   • Segundos totales
   • Milisegundos totales

Ejemplo de uso:

• Entrada: 01-01-2000
• Salida: Edad actual basada en la fecha del sistema

Configuración avanzada: No aplica, ya que es una aplicación cliente-side sin configuraciones adicionales.

⚙️ Explicación Técnica

📁 index.html

Propósito: Archivo principal HTML que define la estructura de la página web, incluyendo el formulario de entrada y el contenedor de resultados.

Conceptos Clave:

• Estructura semántica HTML5
• Integración de CSS y JavaScript externos
• Formulario con validación básica (required)
• Elementos del DOM para manipulación dinámica

Fragmentos Destacados:

<form action="" id="ageCalculator">
    <div class="form-group">
        <label for="birthDate">Enter your birthdate:</label>
        <input type="text" name="birthDate" id="birthDate" placeholder="DD-MM-YYYY" required>
    </div>
    <div class="form-group">
        <button type="submit">Calculate Age</button>
    </div>
</form>

API/DOM: Utiliza elementos estándar del DOM como form, input, button y div. El evento submit del formulario es capturado por JavaScript para prevenir el comportamiento por defecto y ejecutar la función de cálculo.

📁 style.css

Propósito: Hoja de estilos que define la apariencia visual de la aplicación, incluyendo layout, colores y responsividad.

Conceptos Clave:

• CSS Grid/Flexbox implícito (usando márgenes y anchos fijos)
• Gradientes lineales para fondos
• Box-shadow para efectos de profundidad
• Selectores CSS para elementos específicos
• Diseño responsivo básico

Fragmentos Destacados:

body {
    background: linear-gradient(to right, #aa7e66, #feb47b);
}

.container {
    width: 600px;
    margin: 100px auto;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

API/DOM: Manipula propiedades visuales del DOM a través de CSS. Consideraciones de UX incluyen colores contrastantes, fuentes legibles y transiciones suaves (aunque no se implementan animaciones explícitas).

📁 script.js

Propósito: Archivo JavaScript que contiene la lógica principal para calcular la edad basada en la fecha de nacimiento ingresada.

Conceptos Clave:

• Manipulación de objetos Date en JavaScript
• Cálculos matemáticos para conversión de unidades de tiempo
• Validación de fechas
• Manipulación del DOM para mostrar resultados
• Event listeners para interacciones del usuario

Fragmentos Destacados:

const ageInMiliSeconds = today - birthDate;
const ageInSeconds = Math.floor(ageInMiliSeconds / 1000);
const ageInMinutes = Math.floor(ageInSeconds / 60);
const ageInHours = Math.floor(ageInMinutes / 60);
const ageInDays = Math.floor(ageInHours / 24);
const ageInWeeks = Math.floor(ageInDays / 7);
const ageInMonths = Math.floor(ageInDays / 30.436875);
const ageInYears = Math.floor(ageInDays / 365.25);

API/DOM:

• Manejo de DOM: Accede a elementos por ID (getElementById), modifica innerHTML para inyectar resultados, cambia estilos CSS (display: block).
• Eventos: Escucha el evento submit del formulario, previene el comportamiento por defecto con preventDefault().
• Flujo de datos: Entrada (fecha string) → Procesamiento (parsing y cálculos) → Salida (HTML generado dinámicamente).
• Gestión de estado: No hay estado persistente; los cálculos son stateless y se ejecutan por demanda.

Cómo se agregan los resultados a la estructura HTML: Los resultados se generan dinámicamente mediante la modificación del innerHTML del elemento con ID result. Se construye una cadena de HTML que incluye múltiples div con clase result-item, cada uno conteniendo un encabezado h3 y un párrafo p con el valor calculado. Por ejemplo:

result.innerHTML = `
    <div class="result-item">
        <h3>Age:</h3>
        <p>${ageInYears} Years ${ageInMonths % 12} Months ${ageInDays % 30} Days</p>
    </div>
    <!-- Más elementos similares para semanas, días, etc. -->
`;

Esto permite que los resultados se integren directamente en la estructura HTML existente, utilizando las clases CSS definidas en style.css para el estilo visual. El contenedor de resultados (resultContainer) se muestra cambiando su propiedad display a block.

🎯 Arquitectura

Esta es una aplicación web simple de una sola página (SPA básica) sin frameworks. La arquitectura sigue el patrón de separación de responsabilidades:

• HTML: Estructura y contenido estático
• CSS: Presentación y estilos
• JavaScript: Comportamiento y lógica

Flujo de ejecución:

1. Usuario ingresa fecha → 2. JavaScript valida y calcula → 3. Resultados se renderizan en el DOM

No se implementan patrones de diseño complejos como MVC, ya que la aplicación es pequeña y directa.