This project consists on a Shopping List App with an extra field for prices:
✅ Designed with Figma
✅ Coded with Vanilla JS from scratch
🚀 View it live right here -> https://radubulai.com/VanillaJS-ShoppingApp/.
Contents:
- Items include name, price and checked/unchecked
- Delete items with a fancy animation
- Check/Uncheck items on your list
- Update/Edit items on the go, just by clicking its name or its price
- Search items by name
- Display extra information that's updated on every add/edit/delete
- Number of Items
- Price of All Items
- Price of Checked Items
- Price of Unchecked Items
- Responsivess across all devices
- Includes dark mode
- All items are saved to Local Storage
- Export your list to a JSON file / Import from a JSON file locally
👉 Download and install Visual Studio Code
git clone https://github.com/radualexandrub/VanillaJS-ShoppingApp vanilla-js-shopping-app
cd vanilla-js-shopping-app
code .
👉 Install the Live Server Extension for VS Code
👉 Press CTRL+SHIFT+P
within VS Code and select "Open with Live Server"
👉 The app should open at http://localhost:5500/index.html / http://127.0.0.1:5500/index.html
- All my personal notes from JavaScript tutorials
- How to Search in an Array of Objects
- How to change value of object which is inside an array
- Javascript: Editing a list item
- How to build a Todo List App with JavaScript
JSON:
[
{
"id": "9ea585768ec3a",
"name": "Sandwishes",
"price": "12",
"checked": false
},
{
"id": "25bfe78760f37",
"name": "Cheesecake",
"price": "25",
"checked": true
},
{
"id": "efb642b1aef4",
"name": "Lemonade",
"price": "5",
"checked": false
}
]
Copyright (c) 2022-2023 Radu-Alexandru Bulai.
Released under MIT License.