notes

Mini Product Store

A JavaScript activity where students build a simple product store using arrays, loops, functions, DOM manipulation, and event listeners.

~3 min read updated Jul 17, 2026 Activities
  • #teaching
  • #activity
  • #javascript
  • #dom
  • #arrays
  • #loops

Build a simple product store entirely with JavaScript. The goal is not to create a beautiful website, but to practice thinking in data instead of copy-pasting HTML.

Learning Objectives

By the end of this activity, students should be able to:

  • Store products in an array of objects.
  • Create reusable functions that work for any product.
  • Generate HTML using a for loop.
  • Display cart items using forEach().
  • Update the page using DOM manipulation.
  • Respond to user actions with event listeners.
  • Use template literals and if statements to build dynamic interfaces.

The Big Idea

Think like a programmer, not a copy-paster.Do not hardcode products directly into HTML or create one function for every product. Store your data in JavaScript and let loops and reusable functions do the work.

Project Files

FilePurpose
index.htmlMinimal HTML structure with empty containers.
style.cssBasic styling. No changes required.
script.jsYour working file containing the TODOs.
SOLUTION.jsReference solution. Check only after attempting the activity yourself.

Activity Flow

Open the Project

Open index.html in your browser and script.js in your code editor.

Complete the TODOs

Finish each task in order.

  1. Build createCard(product) using a template literal and attach an event listener.
  2. Build renderProducts() using a for loop.
  3. Build addToCart(product) by adding products into the cart array.
  4. Build renderCart() using an if statement and forEach().

Save your work and refresh the browser after each step.

Test Your Application

Verify that:

  • Products appear automatically from the JavaScript array.
  • Clicking Add to cart updates the cart.
  • The total updates correctly.
  • An empty cart displays an appropriate message.

Requirements

Students must demonstrate all of the following:

  • let and const
  • An array of product objects
  • At least three reusable functions
  • At least one for loop
  • At least one forEach()
  • DOM manipulation
  • At least one addEventListener
  • At least one template literal
  • At least one if statement
  • No hardcoded product HTML
  • No per-product functions such as addApple() or addBanana()

Expected Output

When completed, the application should:

  • Display one product card for every object inside the products array.
  • Allow users to add products to the cart.
  • Automatically update the total price.
  • Display "Your cart is empty." before any products are added.
  • Correctly add duplicate products if the same button is clicked multiple times.
Open the browser Developer Tools (F12) while working. Read every error message carefully before asking for help. Most bugs tell you exactly where they are hiding. Computers are surprisingly honest compared to humans.

Stretch Goals

Students who finish early may:

  1. Add a quantity property to each product.
  2. Display a Free Shipping message when the total exceeds ₱100.
  3. Add a Clear Cart button with its own event listener.

Submission

  • Add your full name and section at the top of script.js.
  • Submit the required files according to your instructor's instructions.
  • Be prepared to explain every line of your code.

Grading Rubric

CategoryPoints
JavaScript Logic25
Reusable Functions20
Loops (for and forEach)15
DOM Manipulation15
Code Organization10
Readability10
Following Instructions5
Total100
You may use AI as a learning assistant, but you must understand every line you submit. If you cannot explain what your code does, it is not yet your code. The objective of this activity is to develop problem-solving skills, not to produce the fastest solution.

Resources

The starter project for this activity is available on GitHub.

Clone or download the repository before starting the activity. The project already contains the HTML structure, CSS styling, and JavaScript TODOs. Your task is to complete the missing JavaScript logic inside script.js.

Dynamic Portfolio Website

Build a personal portfolio website using JavaScript arrays, loops, and DOM manipulation instead of hardcoded HTML.

Exercises

Practice problems that build skill through repetition.

Related notes

Activities·3 min

Dynamic Portfolio Website

Activities·2 min

Read & Predict

Teaching·4 min

Coding with AI: Prompts & Reading JavaScript

Teaching·3 min

JavaScript for Beginners