Consumir API de terceros y carrito web
Lenguajes y tecnologías utilizadas
Este proyecto es una implementación de un sitio de comercio electrónico básico utilizando HTML, CSS y JavaScript. Está diseñado para permitir a los usuarios navegar a través de una lista de productos, agregar productos a un carrito de compras y gestionar los productos en el carrito, incluyendo la capacidad de agregar, quitar y eliminar productos. La funcionalidad del carrito está optimizada para proporcionar una experiencia de usuario intuitiva y eficiente.
Se utilizan varias tecnologías clave para la implementación de este proyecto. HTML se emplea para la estructura básica del sitio web, mientras que CSS, utilizando el tema Solar de Bootswatch para Bootstrap, se encarga del diseño y la disposición visual del sitio. JavaScript maneja la lógica del lado del cliente, incluyendo la gestión del carrito de compras y la interacción con la API de productos. Los datos de los productos se obtienen a través de una API simulada proporcionada por DummyJSON.
El proyecto permite la carga dinámica de productos desde una API. Estos productos se muestran en una cuadrícula de tarjetas, cada una de las cuales presenta una imagen, título, descripción y precio del producto, junto con un botón para agregar el producto al carrito. El carrito de compras se despliega al pasar el ratón sobre el icono del carrito en la parte superior derecha de la página y se actualiza en tiempo real a medida que se agregan, quitan o eliminan productos.
Los usuarios pueden interactuar con el carrito de diversas maneras. Pueden agregar productos al carrito con un solo clic, aumentar la cantidad de un producto, quitar una unidad de un producto sin eliminar todas las unidades del mismo, eliminar completamente un producto y vaciar el carrito por completo. El número total de productos en el carrito se actualiza en tiempo real, proporcionando una experiencia de usuario fluida y reactiva.
El proyecto está estructurado con un archivo HTML que contiene la estructura del sitio y un archivo JavaScript que contiene la lógica para la interacción con la API, la gestión del carrito de compras y las actualizaciones dinámicas del DOM. Se utiliza CSS para proporcionar un diseño visual atractivo y coherente. La gestión del carrito se realiza utilizando un array en JavaScript, donde cada producto incluye detalles como ID, imagen, título, precio y cantidad.
