Final Project: JSON Product Catalog

Time to combine everything: parsing JSON, building DOM elements, and keeping data in sync with what's on the page.

Requirements

1. Start from a JSON array of at least 6 products, each with id, name, price, and inStock.
2. Render every product as a card in the DOM (name, price, and an in/out of stock badge) using createElement, not by writing raw HTML strings.
3. Add a search input that filters the rendered cards as the user types, matching on product name.
4. Let the user toggle a product's inStock state by clicking a button on its card.
5. Persist the current product list to localStorage as JSON every time it changes, using JSON.stringify, and load it back with JSON.parse on page load if it's there.

Stretch goals

• Add a form to add a brand-new product.
• Sort products by price, ascending or descending.
• Show a running count of how many products are currently in stock.

Submit your repository link below when you are done, an instructor will review it before you can mark this lesson complete. Good luck! 🚀