Shopping‑List Web Application

Sigrid Mortensen
GitHub · LinkedIn

---

Overview

This shopping list app lets users quickly add, edit, filter, manage and share their grocery lists, right in their browser. Built with vanilla JavaScript, HTML, and CSS, it’s designed to demonstrate essential front-end development skills—no frameworks, no build tools required.

---

Features

• Add, edit, and remove items from your shopping list
• Filter list items by name
• Responsive UI—works on desktop and mobile
• Data persists locally in the browser (via localStorage)
• Simple, user-friendly design

---

Technologies Used

• JavaScript (ES6+) for interactivity and persistence
• HTML/CSS for structure and styling
• No build system or dependencies—pure browser-ready code

---

Getting Started

Prerequisites

• A modern web browser: Chrome, Firefox, Edge, or Safari
• (Optional) Visual Studio Code with the Live Server extension for auto-refresh

Run Locally

1. Clone the repository:

   git clone https://github.com/SigridM/Shopping-List.git

2. Open the project folder in your editor
   (e.g., VS Code or directly in your file manager)
3. Launch the app:
   • Double-click index.html to open it in your browser
   • OR (recommended): In VS Code, right-click index.html and choose "Open with Live Server"

No installations, databases, or builds required!

---

Screenshots

---

What I Learned

• Practiced DOM manipulation and state management with vanilla JavaScript
• Implemented real-time filtering using JavaScript event listeners and array methods
• Used localStorage for data persistence and a seamless user experience
• Designed a responsive UI that adapts to different devices
• Improved accessibility with semantic HTML and focus management
• Enhanced my understanding of front-end project organization and browser APIs

---

License

This project is released under the MIT License. See the LICENSE file for details.