Assignment 5: Inventory Tool

Due: Tuesday, 10/20/26, before class.

Goal

Assignment 4 was the shopper's side of your store. This one is the shop owner's side: an "Add New Product" form that puts new products into your catalog. Your products are saved in localStorage, so refreshing the page doesn't lose them.

You're building on your own Assignment 4 code, using what we covered on 10/9: forms, preventDefault, turning form fields into an object, and saving data with JSON.stringify/JSON.parse and localStorage.

Getting Started

Copy your whole 04-ecommerce folder into a new folder named 05-inventory-tool, and do all of your work there.

Requirements

1. An "Add New Product" form
   A <form> somewhere on the page with a field for every property your products have:
   • name: a text input
   • price: a number input (use min and step="0.01" so cents work)
   • description: a <textarea>
   • category: a <select> with your store's categories
   • image: a URL input (type="url") for a link to a picture
   Every field should be required, so the browser won't let the form submit with anything missing.
2. Submitting builds a product
   Listen for the form's "submit" event and call event.preventDefault() so the page doesn't reload. Read each field, build a new product object with the same properties as your existing products, and push it onto your products array. Remember that .value is always a string, even on a number input: the price needs to be a real number (use Number()), or your cart total will break. Clear the form after a product is added.
3. New products are real products
   A new product shows up in the catalog right away, and it works with everything from Assignment 4: the category filter (and sorting, if your store has it), its own "Add to Cart" button, and the checkboxes for "Add Selected." If it only half works, check that its object really matches the shape of the others.
4. One validation rule of your own
   Pick one rule the browser can't check for you, and enforce it in your submit handler. If the rule is broken, don't add the product, and show a message on the page saying what's wrong. Some ideas: no two products with the same name, a description of at least 20 characters, a price under some maximum.
5. Products saved in localStorage
   Save your products array every time it changes (JSON.stringify, then localStorage.setItem), and load it when the page starts (localStorage.getItem, then JSON.parse). The very first time someone visits, nothing has been saved yet and getItem gives back null. In that case, use your starter products from Assignment 4. Refresh the page after adding a product: it should still be there.
6. A "Reset Store" button
   A button that clears your saved products (localStorage.removeItem) and puts the catalog back to your starter products. You'll want this while testing, and whoever grades your assignment will use it too.

Things That Will Trip You Up

• Don't forget event.preventDefault(). Without it, submitting the form reloads the whole page. Your product flashes on screen for a split second and then vanishes, and anything you hadn't saved yet is gone. If your form "does nothing," this is the first thing to check.
• Whoever grades this is using a different browser. localStorage lives in one browser on one computer, so the products you added won't be there for anyone else. They'll see your starter products and add their own. Make sure the starter catalog still looks like a real store.
• Changing your product shape breaks saved data. If you rename a property (say, price to cost) after you've already saved products, the old saved ones still say price. Click Reset Store whenever you change the shape of a product.
• Seeing what's saved: open DevTools, go to the Application tab, and look under Local Storage. You can see (and delete) exactly what your page saved.

File and Folder Setup

Same rules as before: folder and file names must match exactly. Your files go in the new 05-inventory-tool folder:

csc336-fall2026/
└── assignments/
    └── 05-inventory-tool/
        ├── index.html
        ├── style.css
        └── script.js

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

A Note on Generative AI

Do not use ChatGPT, Copilot, Claude, or any other generative AI tool to write any part of this assignment. Whatever you do, remember that your goal should be to understand 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.