Assignment 4: E-Commerce Front End

Due: Friday, 10/9/26, before class.

Goal

Build the front end of an online store. Not sure what e-commerce is? This video from the early days of the web explains it better than I ever could.

Your store sells a set of products (sneakers, houseplants, used spaceships, whatever you want). Each product shows up as a "card" with a name, a price, and a description, rendered from one array of objects using the same data-driven pattern from the Pokemon demo and the adventure game assignment. Shoppers can add a single product to their cart, or check off several and add them all at once. The cart lives on the right-hand side of the page and updates as things go in.

The store is the theme, but the real point is the tools: forEach, filter, sort, and map, anonymous functions handed to them and to addEventListener.

NOTE: We haven't covered much of what we would need to fully simulate an online shopping experience (e.g. no persistent data storage, no form submissions, no servers). This assignment is about creating the front end (the part of the store that runs in the shopper's browser). Refresh the page and the cart empties.

Requirements

A product catalog
One array of at least 6 product objects. Each product needs a name, a numeric price, a description, an image, and a category (a string you can filter by, like "shoes" or "flowers").
One render function, called with forEach
A function that takes one product and draws a card for it with createElement/append, same pattern as the Pokemon card demo. Each card shows the name, price, and description. Call it once per product with .forEach(), not a hand-typed call per product and not a for loop.
An "Add to Cart" button on every card
Each card gets its own button that adds that product to the cart. Since the button is created inside your render function, hand addEventListener an anonymous function right there, one that already knows which product it belongs to.
Select several, add them all
Give each card a checkbox. Checking it marks that product "selected," and the card needs a visual change to show it (a highlighted border, a background color, whatever reads clearly), made only with a CSS class. Toggle it with classList; the look itself lives in style.css, not inline styles set from JS.

Add a separate "Add Selected to Cart" button that adds every checked product to the cart at once (use .filter() to find them). This button has to change dynamically as checkboxes change: disabled when nothing is selected, and showing how many items it will add when one or more are, e.g. "Add 3 Items to Cart." Clear the checkboxes after adding.
A cart on the right-hand side
The cart sits to the right of the product list (use CSS for the layout: flexbox or grid, your choice). It lists each item in the cart with its price, plus a total. Use .map() to pull the prices out of the cart items, then add them up into a total like "Total: $54.97 (3 items)." The cart and total re-render every time something is added.
A category filter and a sort-by dropdown
A button (or buttons, or a <select>) that uses .filter() to show only one category of products, plus a way to show them all again.

File and Folder Setup

Same rules as before: folder and file names must match exactly. This assignment needs three files, all inside a new 04-ecommerce folder:

csc336-fall2026/
└── assignments/
    └── 04-ecommerce/
        ├── index.html
        ├── style.css
        └── script.js

Once pushed, your assignment will be visible at:
https://<your-username>.github.io/csc336-fall2026/assignments/04-ecommerce/

A Note on Generative AI

Do not use ChatGPT, Copilot, Claude, or any other generative AI tool to write any part of this assignment. The whole point is building real fluency with map/filter/ sort/callbacks yourself. Whatever you do, remember that your goal should be to undertand 100% of the code that you turn in.

What to Submit

Nothing to submit directly. Your assignment should be publicly available at the address in File and Folder Setup above once you've committed and pushed.