Skip to content

Shopping List App with Prices, designed with Figma, coded with Vanilla JS from scratch.

License

Notifications You must be signed in to change notification settings

radualexandrub/VanillaJS-ShoppingApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Shopping List Application with prices (CRUD) made with Vanilla JavaScript

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:


Screenshots

Shopping List App with prices

Shopping List App with prices


Some nice features

  • 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

How to run

👉 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


Small resources I used:


Data format

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
  }
]

Figma designs and attempts

Shopping List App Design

Shopping List App Design

Shopping List App Design


License

Copyright (c) 2022-2023 Radu-Alexandru Bulai.

Released under MIT License.

About

Shopping List App with Prices, designed with Figma, coded with Vanilla JS from scratch.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published