🎯 Counter Application

Una aplicación web simple y elegante para contar números, desarrollada con tecnologías web básicas. Permite incrementar, decrementar y reiniciar un contador visualmente atractivo.

📖 Descripción Breve

Esta aplicación resuelve la necesidad de un contador interactivo básico, ideal para demostraciones, pruebas de interfaz o como componente educativo en desarrollo web. El proyecto destaca por su simplicidad, responsividad y animaciones suaves, ofreciendo una experiencia de usuario intuitiva. Está dirigido a desarrolladores principiantes que buscan ejemplos prácticos de manipulación del DOM, manejo de eventos y estilos CSS dinámicos.

✨ Características Principales

• ➕ Incremento: Aumenta el contador en 1 con cada clic.
• ➖ Decremento: Reduce el contador en 1 con cada clic.
• 🔄 Reset: Reinicia el contador a 0.
• 🎨 Indicadores Visuales: Cambia el color del número (verde para positivo, rojo para negativo, azul para cero).
• 📱 Responsivo: Diseño adaptable a diferentes tamaños de pantalla.
• ✨ Animaciones: Transiciones suaves y animación de entrada del contenedor.

🖼️ Demo/Vistas Previas

Para ver la aplicación en funcionamiento, abre el archivo index.html directamente en tu navegador web o visita la demo en vivo. La interfaz muestra un número central con tres botones debajo. Al interactuar, el número cambia de color dinámicamente y se anima suavemente.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
	5	Estructura de la página web
	3	Estilos y animaciones
	ES6+	Lógica interactiva y manipulación del DOM

🚀 Instalación y Configuración

No se requieren dependencias externas ni instalación compleja. La aplicación es completamente estática.

1. Clona o descarga los archivos del proyecto.
2. Abre index.html directamente en tu navegador web.
3. ¡Listo! La aplicación funcionará inmediatamente.

# No hay comandos de instalación necesarios
# Simplemente abre index.html en tu navegador

Requisitos del sistema:

• Navegador web moderno con soporte para ES6+ (Chrome, Firefox, Safari, Edge).

📚 Guía de Uso

Uso Básico

1. Abre index.html en tu navegador.
2. Haz clic en Increase para aumentar el contador.
3. Haz clic en Decrease para disminuir el contador.
4. Haz clic en Reset para volver a cero.

Casos de Uso Comunes

• Demostración de conceptos: Ideal para enseñar manipulación del DOM.
• Contador de eventos: Útil en aplicaciones simples de seguimiento.
• Pruebas de UI: Verificar cambios visuales en respuesta a interacciones.

Configuración Avanzada

La aplicación no requiere configuración adicional, pero puedes modificar los estilos en style.css o la lógica en script.js para personalizar el comportamiento.

⚙️ Explicación Técnica

📁 index.html

Propósito: Define la estructura básica de la página web, incluyendo el contenedor del contador y los botones de control.

Conceptos Clave:

• Estructura semántica HTML5
• Vinculación de archivos CSS y JS externos
• Elementos interactivos con IDs para manipulación del DOM

Fragmentos Destacados:

<div class="container">
    <h1>Counter</h1>
    <span id="value">0</span>
    <div>
        <button class="btn" id="decrease">Decrease</button>
        <button class="btn" id="reset">Reset</button>
        <button class="btn" id="increase">Increase</button>
    </div>
</div>

API/DOM: Utiliza elementos <span> y <button> con IDs únicos para acceso directo vía document.querySelector(). Los botones disparan eventos de clic que son capturados por JavaScript.

📁 script.js

Propósito: Implementa la lógica de negocio del contador, manejando eventos de usuario y actualizando la interfaz dinámicamente.

Conceptos Clave:

• Manipulación del DOM
• Manejo de eventos (Event Listeners)
• Lógica condicional para cambios de estado
• Actualización de estilos CSS dinámicos

Fragmentos Destacados:

btns.forEach( btn => {
    btn.addEventListener("click", e => {
        let elementID = e.currentTarget.id;

        if(elementID == "decrease") {
            count--;
        } else if(elementID == "reset") {
            count = 0;
        } else {
            count++;
        }

        value.textContent = count;
        value.style.color = count > 0 ? "green" : count < 0 ? "red" : "#007bff";
    });
});

API/DOM:

• Selección: document.querySelector() y querySelectorAll() para acceder a elementos por ID y clase.
• Eventos: addEventListener("click") para capturar interacciones del usuario.
• Manipulación: textContent para actualizar el texto del contador; style.color para cambios visuales basados en estado.
• Flujo de Datos: Entrada (clic) → Procesamiento (lógica condicional) → Salida (actualización DOM y estilos).

📁 style.css

Propósito: Define la apariencia visual de la aplicación, incluyendo layout, colores, animaciones y responsividad.

Conceptos Clave:

• CSS Grid para centrado
• Animaciones con @keyframes
• Transiciones suaves
• Diseño responsivo con unidades relativas

Fragmentos Destacados:

body {
    background-color: #b0b0b0;
    min-height: 100vh;
    color: #333;
    line-height: 1.5;
    display: grid;
    place-items: center;
}

@keyframes containerAnimation {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#value {
    font-size: 72px;
    font-weight: bold;
    color: #007bff;
    transition: color 0.3s ease-in-out;
}

API/DOM:

• Layout: display: grid y place-items: center para centrado perfecto.
• Animaciones: @keyframes para entrada del contenedor; transition para cambios de color suaves.
• Estilos Dinámicos: El color del #value se modifica vía JavaScript, aprovechando transition para efectos visuales.
• Responsividad: Unidades vh, px y porcentajes para adaptabilidad; box-sizing: border-box para consistencia.

🎯 Arquitectura

Este proyecto sigue una arquitectura simple de aplicación web estática:

• Frontend Único: Todo el código reside en el lado cliente.
• Separación de Preocupaciones: HTML para estructura, CSS para presentación, JS para comportamiento.
• Patrón de Diseño: Event-Driven Programming, donde los cambios de estado se disparan por eventos de usuario.
• Flujo de Datos: Unidireccional (Usuario → Evento → Lógica → Actualización DOM).

(Diagrama simple: Usuario clica botón → JS procesa → DOM actualiza → CSS anima)

---