AndyBencomoStore - Documentación

Enlace de web desplegada https://andybencomotareaweb1.netlify.app/

Estructura del Proyecto

El proyecto está compuesto por tres archivos principales:

• index.html: Estructura de la página
• style.css: Estilos y diseño visual
• script.js: Lógica y funcionalidad

1. HTML (index.html)

Estructura Principal

<header>: Contiene el título de la tienda y el ícono del carrito
<main>: Contiene dos secciones principales:
  - Sección de productos con filtros por categoría
  - Sección del carrito de compras
<footer>: Información del pie de página

Elementos Importantes

• Filtros de categoría usando botones
• Sección de productos que se llena dinámicamente
• Carrito con subtotal, total y botón de checkout
• Integración de fuentes (Inter) e íconos (Font Awesome)

2. CSS (style.css)

Sistema de Diseño

Variables CSS (:root):
--primary-color: #2563eb (Azul principal)
--secondary-color: #1d4ed8 (Azul secundario)
--background-color: #f8fafc (Fondo claro)
--text-color: #1e293b (Color de texto)
--card-background: #ffffff (Fondo de tarjetas)
--border-color: #e2e8f0 (Color de bordes)

Sistema de Layout

1. CSS Grid

   • Usado en la sección de productos (.products)

   .products {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 1rem;
   }

   • Grid responsivo que se ajusta automáticamente
   • Columnas adaptativas usando minmax()
   • Diferentes tamaños según el viewport:
     • Móvil: minmax(140px, 1fr)
     • Tablet: minmax(200px, 1fr)
     • Desktop: minmax(250px, 1fr)

2. Flexbox

   • Usado en múltiples componentes:
     • Layout principal (main): flex-direction cambia de column a row en desktop
     • Header: justify-content: space-between para logo y carrito
     • Filtros: flex con scroll horizontal en móvil
     • Items del carrito: flex para alinear imagen, info y controles
     • Controles de cantidad: flex para alineación de botones
   • Propiedades principales:
     • display: flex
     • justify-content
     • align-items
     • flex-direction
     • gap
     • flex-wrap

3. Diseño Responsivo Mobile-First

   • Combinación de Grid y Flexbox para layout adaptativo
   • Media queries para tablets (480px) y desktop (768px)
   • Ajustes específicos para cada tamaño de pantalla

4. Optimizaciones Móviles

   • Filtros con scroll horizontal en móvil
   • Botones y controles más grandes para mejor interacción táctil
   • Manejo de texto con ellipsis para evitar desbordamiento
   • Espaciado optimizado para pantallas pequeñas
   • Desactivación de highlight táctil no deseado

5. Efectos y Animaciones

   • Hover effects en desktop
   • Animaciones suaves en el carrito
   • Transiciones optimizadas para móvil
   • Feedback visual para interacciones táctiles

6. Componentes Estilizados

   • Tarjetas de producto adaptativas
   • Botones con estados hover y touch
   • Carrito responsive con diseño flotante en desktop
   • Controles de cantidad optimizados para touch
   • Header y footer adaptables

3. JavaScript (script.js)

Gestión de Datos

- products: Array de productos con sus propiedades (id, nombre, precio, categoría, imagen)
- cart: Array que almacena los items del carrito con cantidades

Funciones Principales

1. Filtrado de Productos

filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        currentCategory = button.dataset.category;
        // Actualiza la vista de productos según la categoría
    });
});

• Maneja el filtrado de productos por categoría
• Actualiza la vista dinámicamente al cambiar de categoría

2. Gestión del Carrito

function addToCart(productId) {
    // Añade productos al carrito o incrementa su cantidad
}

function updateQuantity(productId, delta) {
    // Actualiza la cantidad de productos en el carrito
}

function updateCart() {
    // Actualiza la vista del carrito, conteo y precios
}

• Sistema de añadir/remover productos
• Control de cantidades
• Cálculo automático de subtotal y total con impuestos (10%)

3. Renderizado de Elementos

function renderProducts() {
    // Crea y muestra las tarjetas de productos
}

function renderCartItems() {
    // Actualiza la vista de items en el carrito
}

• Creación dinámica de elementos HTML
• Actualización en tiempo real del carrito

Características Avanzadas

1. Persistencia de Datos

• El carrito mantiene su estado mientras la página está abierta

2. Cálculos Automáticos

• Subtotal de productos
• Impuestos (10%)
• Total final
• Cantidad total de items

3. Interacción Usuario

• Feedback visual al añadir productos
• Animaciones en el contador del carrito
• Validaciones en el checkout
• Controles intuitivos de cantidad

Mejoras Implementadas

1. UI/UX

• Diseño moderno y limpio
• Paleta de colores profesional
• Tipografía moderna (Inter)
• Feedback visual en interacciones

2. Funcionalidad

• Sistema de filtrado por categorías
• Control de cantidades en el carrito
• Cálculos automáticos de precios
• Proceso de checkout simplificado

3. Rendimiento

• Código optimizado
• Carga eficiente de imágenes
• Animaciones suaves
• Actualización dinámica de contenido