Skip to main content

Shopping Cart

Shopping Cart Project Preview (main page) Shopping Cart Project Preview (final page)

The Project​

Interactive shopping cart developed with object-oriented programming in JavaScript. An application that demonstrates the use of ES6 classes, state management, and DOM manipulation to create a functional e-commerce system.

Source Code​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freeCodeCamp Shopping Cart</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <h1 class="title">Desserts Page</h1>
    </header>
    <main>
      <button id="cart-btn" type="button" class="btn">
        <span id="show-hide-cart">Show</span> Cart
      </button>
      <div id="cart-container">
        <button class="btn" id="clear-cart-btn">Clear Cart</button>
        <div id="products-container"></div>
        <p>Total number of items: <span id="total-items">0</span></p>
        <p>Subtotal: <span id="subtotal">$0</span></p>
        <p>Taxes: <span id="taxes">$0</span></p>
        <p>Total: <span id="total">$0</span></p>
      </div>
      <div id="dessert-card-container"></div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

The Discovery: Classes Are "Syntactic Sugar"​

This was a very interesting project, especially understanding what's "under the hood" of classes in JavaScript.

JavaScript doesn't actually have classes in the traditional sense of languages like Java or C++. When we write:

class ShoppingCart {
  constructor() {
    this.items = [];
    this.total = 0;
  }
  addItem(product) {
    this.items.push(product);
  }
}

JavaScript automatically transforms it (without showing you) into this code:

function ShoppingCart() {
  this.items = [];
  this.total = 0;
}
ShoppingCart.prototype.addItem = function(product) {
  this.items.push(product);
};

It's "syntactic sugar" (a term coined by British computer scientist Peter J. Landin): it makes the code sweeter to read, but underneath it's still the same function-based mechanism.

However, once you understand the mechanism, comparing the two code blocks makes it evident how much simpler the class syntax is to both read and write.

I felt the same "click" as with CSS variables, that feeling of wanting to use them in all my future projects.

What I Learned​

Object-Oriented Programming (OOP):

  • ES6 Classes: Modern syntax for creating objects with properties and methods
  • Constructor: Special method automatically called with new to initialize the instance
  • Keyword this: Reference to the current instance of the class
  • Keyword new: Operator that creates a new instance, executes the constructor, and returns the object
  • Prototypes: Underlying system for classes, each method is added to ClassName.prototype

Advanced Array Methods:

  • .forEach() to iterate over elements with side effects
  • .find() to search for the first element that satisfies a condition
  • .reduce() to accumulate values into a single result (e.g., sum prices)

Destructuring:

  • Extracting properties from objects: const { name, price } = product
  • Concise syntax that avoids repetition like product.name, product.price

JavaScript Operators:

  • Spread Operator (...): Converts HTMLCollection to array to use array methods
  • OR Operator (||): Provides default values: value || 0
  • NOT Operator (!): Inverts booleans for toggle patterns
  • Ternary Operator (? :): Inline conditions for more concise code

Template Literals:

  • Backticks ` for multi-line strings
  • Interpolation with ${} to insert variables
  • Escaping the $ symbol when needed: $${price} (first $ is literal)

Floating Point Handling:

  • Problem: 0.1 + 0.2 !== 0.3 in JavaScript
  • Solution: .toFixed(2) to round + parseFloat() to convert back to number

DOM Manipulation:

  • getElementsByClassName() returns HTMLCollection (not array!)
  • innerHTML += to add elements dynamically
  • style.display for show/hide: "block" vs "none"

Event Handling:

  • event.target.id to identify the clicked element
  • .bind(cart) to fix the this context in callbacks
  • addEventListener to handle user interactions

State Pattern:

  • Boolean toggle with isCartShowing = !isCartShowing
  • Centralized state management in the ShoppingCart class

Next Project: Learn Intermediate OOP by Building a Platformer Game