julianachagas / grocery-list

🛒 Grocery list built with HTML, CSS/SASS, and JavaScript, and stored using local storage.

Grocery List 🛒

Grocery list application built with HTML, CSS/SASS, and JavaScript, and stored using local storage. The list is divided into nine categories: Fruits & Vegetables, Dairy, Bakery & Deli, Pantry, Meat & Seafood, Frozen Goods, Household, Personal Care, and Other. The user can add an item to the list by filling in the input field and selecting one of the categories.

🛠️ Technologies

• HTML
• CSS/SASS
• JavaScript

🔗 Link

• Grocery List

💡 Features

• Add a new item to the list
  • An error message is displayed if the item is already on the list or no category was selected
  • A success message is displayed if the item was successfully added
• Delete a item from the list
• Mark a item as checked
• The list is stored locally (local storage): item's name, category, and status (checked or unchecked).
• The stored list is displayed when the page loads
• Navigation menu: show all categories or each category individually

💻 Demo

• Add/mark/remove item

• Categories Menu

👩🏻‍💻 Author

---

Made with 💜 by Juliana Chagas