🛒 ShopNow - E-commerce Shopping Cart

A modern, fully functional shopping cart application built with vanilla JavaScript, featuring dynamic cart management, product filtering, promotional discounts, and form validation.

✨ Features

Core Functionality

• Dynamic Shopping Cart: Add, remove, and update product quantities in real-time
• Smart Promotions: Automatic discount application based on quantity thresholds
• Product Categories: Organized into Grocery, Beauty, and Clothes sections
• Cart Persistence: Real-time cart updates with live total calculation
• Form Validation: Complete checkout form validation with regex patterns

Technical Highlights

• ES6 Modules architecture
• Event-driven programming
• Bootstrap 5 responsive design
• Font Awesome icons integration
• Semantic HTML5 structure
• No external dependencies (vanilla JavaScript)

🛠️ Technologies

• JavaScript ES6+: Modules, arrow functions, destructuring, template literals
• HTML5: Semantic markup
• CSS3: Bootstrap 5.3.0 framework
• Font Awesome 6.4.0: Icon library

📁 Project Structure

SPRINT-2.2/
├── css/
│   └── styles.css
├── images/
│   ├── favicon.ico
│   └── product.svg
├── js/
│   ├── checkout.js       # Form validation logic
│   ├── products.js       # Product data array
│   └── shop.js           # Cart management & UI logic
├── checkout.html         # Checkout page
├── index.html            # Main shop page
└── jsconfig.json         # VSCode configuration

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A local web server (optional, for ES6 modules)

Installation

1. Clone the repository:

git clone https://github.com/IT-Academy-BCN/starter-code-frontend-shop.git
cd starter-code-frontend-shop

2. Open with a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js (with http-server)
npx http-server

# Using VSCode Live Server extension
# Right-click on index.html → "Open with Live Server"

3. Navigate to http://localhost:8000 in your browser

💡 Usage

Shopping Flow

1. Browse products by category (Grocery, Beauty, Clothes)
2. Click "Add to cart" to add items
3. Open cart modal to view selections
4. Adjust quantities using the remove buttons
5. Proceed to checkout and complete the form

Promotional System

• Cooking Oil: 20% off when buying 3+ units
• Instant Cupcake Mixture: 30% off when buying 10+ units

Form Validation Rules

• All fields are required (minimum 3 characters)
• Name fields: Letters only
• Email: Valid email format with @
• Password: 4-8 characters, must include letters and numbers
• Phone: Exactly 9 digits

🎯 Key Functions

Cart Management

• buy(id) - Add product to cart
• removeFromCart(id) - Remove or decrement product quantity
• cleanCart() - Clear entire cart
• calculateTotal() - Compute cart total
• applyPromotionsCart() - Apply quantity-based discounts
• printCart() - Render cart UI with current state

Form Validation

• validate(event) - Complete form validation with Bootstrap styling

🔧 Configuration

jsconfig.json

Configures VSCode for ES6 modules and browser APIs:

{
	"compilerOptions": {
		"module": "ES6",
		"target": "ES6",
		"moduleResolution": "node"
	}
}

🤝 Contributing

This is an educational project from IT Academy Barcelona's Frontend Development course.

📝 License

This project is part of IT Academy's curriculum.

👨‍💻 Author

sergio-416

• GitHub: @sergio-416

🙏 Acknowledgments

• IT Academy Barcelona
• Bootstrap Team
• Font Awesome Team

---

Note: This project uses ES6 modules, which require a web server to function properly due to CORS policies. Do not open the HTML files directly in the browser.