https://github.com/urian121/carrito-de-compras-con-javascript-en-tiempo-real

Este proyecto es una implementación de un carrito de compras dinámico utilizando HTML, CSS, y JavaScript. Incluye funcionalidades como la adición y eliminación de productos, cálculo de subtotales, y envío del pedido por WhatsApp.
https://github.com/urian121/carrito-de-compras-con-javascript-en-tiempo-real

car carrito-de-compra carrito-de-compras carrito-de-compras-con-javascript carrito-de-compras-javascript crud-en-javascript ecommerce eventos-en-javascript javascript javascript-carrito-de-compras javascript-sin-frameworks json localstorage shopping shopping-cart shopping-list shoppingcart

Last synced: 5 months ago
JSON representation

Este proyecto es una implementación de un carrito de compras dinámico utilizando HTML, CSS, y JavaScript. Incluye funcionalidades como la adición y eliminación de productos, cálculo de subtotales, y envío del pedido por WhatsApp.

• Host: GitHub
• URL: https://github.com/urian121/carrito-de-compras-con-javascript-en-tiempo-real
• Owner: urian121
• Created: 2025-01-16T20:07:43.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2025-01-31T22:00:47.000Z (8 months ago)
• Last Synced: 2025-03-31T12:20:05.353Z (6 months ago)
• Topics: car, carrito-de-compra, carrito-de-compras, carrito-de-compras-con-javascript, carrito-de-compras-javascript, crud-en-javascript, ecommerce, eventos-en-javascript, javascript, javascript-carrito-de-compras, javascript-sin-frameworks, json, localstorage, shopping, shopping-cart, shopping-list, shoppingcart
• Language: JavaScript
• Homepage:
• Size: 1.41 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Carrito de Compras con JavaScript en tiempo REAL 🚀

Este proyecto es una implementación de un carrito de compras dinámico utilizando HTML, CSS, y JavaScript. Incluye funcionalidades como la adición y eliminación de productos, cálculo de subtotales, y envío del pedido por WhatsApp.

## Características principales

1. **Agregar al carrito:**

   - Los productos seleccionados se añaden al carrito con una cantidad inicial de 1.

   - Si el producto ya existe en el carrito, no se duplica; solo se actualiza su cantidad.

2. **Eliminar productos del carrito:**

   - Se puede disminuir la cantidad de productos o eliminarlos por completo si la cantidad llega a 0.

3. **Contador dinámico:**

   - Se actualiza automáticamente para reflejar el número total de productos únicos en el carrito.

4. **Visualización del carrito:**

   - Interfaz con un offcanvas para mostrar los productos agregados y el subtotal.

5. **Enviar pedido por WhatsApp:**

   - Función para generar un mensaje con los productos del carrito y abrir WhatsApp Web o la aplicación móvil con el mensaje predefinido.

## Instalación y uso

1. **Clona el repositorio:**

   ```bash

   git clone https://github.com/urian121/carrito-de-compras-con-javascript-en-tiempo-real

   ```

2. **Abre el archivo `index.html` en tu navegador:**

   ```

   Navega al directorio del proyecto y abre `index.html`.

   ```

## Tecnologías utilizadas

- **HTML5**

- **CSS3**

- **JavaScript (ES6)**

- **Bootstrap 5** (Offcanvas y diseño responsivo)

## Capturas de pantalla

lista de productos

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/refs/heads/master/carrito-de-compra-con-javascript-lista-products-urian.png)

Carrito de Compras vacio

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/refs/heads/master/carrito-vacio-con-javascript-urian-viera.png)

Carrito de Compras con productos

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/refs/heads/master/carrito-javascript-urian-viera.png)

## 🙌 Cómo puedes apoyar 📢:

✨ **Comparte este proyecto** con otros desarrolladores para que puedan beneficiarse 📢.

☕ **Invítame un café o una cerveza 🍺**:

   - [Paypal](https://www.paypal.me/iamdeveloper86) (`iamdeveloper86@gmail.com`).

### ⚡ ¡No olvides SUSCRIBIRTE a la [Comunidad WebDeveloper](https://www.youtube.com/WebDeveloperUrianViera?sub_confirmation=1)!

#### ⭐ **Déjanos una estrella en GitHub**:

   - Dicen que trae buena suerte 🍀.

**Gracias por tu apoyo 🤓.**