En este proyecto nos encontramos con la tarea de desarrollar un e-commerce utilizando HTML5, CSS3 y JavaScript vanilla. El mismo es un trabajo correspondiente a la materia Laboratorio Aplicaciones Web Cliente dictada por el profesor Carlos Alfredo Jesús.
El e-commerce debía contar con ciertos criterios básicos para su aprobación, además la metodología del trabajo fue en equipo, simulando así un trabajo real.
Criterios básicos:
- Tecnologías: HTML5, CSS3 (le sumamos Bootstrap 5) y JavaScript (Recursos: DOM, Fetch, SweetAlerts 2 y Local Storage).
- Responsive: La app debe adaptarse a los diferentes tamaños de dispositivos.
- UX: El diseño debe ser consistente en toda la aplicación, utilizando una paleta de colores, tipografía y elementos visuales coherentes.
- Accesibilidad: Utilizar etiquetas semánticas de HTML5 para el estructurado de la página como
<header>, <nav>, <main>, <section>, <footer>, entre otros.
FUNCIONALIDADES
Primero, nuestro objetivo fue traer los productos desde una API y renderizarlos en tarjetas donde se pueda observar con claridad y buena navegabilidad entre los objetos. Estos, al presionarlos, deben desplegar un modal para ver datos del producto, poder agregarlo al carrito y volver al listado.
Parte-1.mp4
Para el carrito, debíamos guardar los productos mediante Local Storage. El carrito debía ser un modal que pueda cerrarse en cualquier momento. En la barra de navegación debía estar el icono del carrito para desplegarlo. Luego, el mismo debía tener la posibilidad de manejar la cantidad de cada producto que se requiere comprar, también un botón de borrar todo y comprar todo con su respectivo precio (Cada acción se debía actualizar en el Local Storage).
Parte-2.mp4
Por supuesto el trabajo debia ser responsive asi que nuestro e-commerce se puede usar sin problemas desde cualquier pantalla. Para esto usamos el recurso Responsively App.
Parte-3.mp4
</> Desarrolladores:
-
Raquel Muriega
- GITHUB: https://github.com/ReyMga
-
Ignacio Casadó
-
David Perez Ruiz
- GITHUB: https://github.com/Dave1246
