https://github.com/johntvale/shopping-list
This is a Shopping List developed with Angular 19. With this app you can create a purchase list, get the total amount of products, and mark items that you already bought.
https://github.com/johntvale/shopping-list
angular angular19 crud-application scss
Last synced: about 2 months ago
JSON representation
This is a Shopping List developed with Angular 19. With this app you can create a purchase list, get the total amount of products, and mark items that you already bought.
- Host: GitHub
- URL: https://github.com/johntvale/shopping-list
- Owner: johntvale
- Created: 2025-03-29T04:33:19.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-07T14:06:04.000Z (about 1 year ago)
- Last Synced: 2025-04-07T15:24:17.806Z (about 1 year ago)
- Topics: angular, angular19, crud-application, scss
- Language: TypeScript
- Homepage: https://shopping-list-eight-gamma.vercel.app
- Size: 229 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping List (Todo list) App in Angular 19,
This is a Shopping List developed with Angular 19.
With this app you can create a purchase list, get the total amount of products, and mark items that you already bought.
Its fun, and easy to use.
You can access the app by clicking here.
### Functional Requirements:
- Add a product,
- View the list of products,
- Mark a product as purchased,
- Edit or Remove a product,
- Clear the shopping list.
### Non-Functional Requirements and Styling:
- It is not possible to add an empty product,
- Subtotal and Total Value are calculated automatically,
- It is possible to mark items from the shopping list,
- The main container has a soft Glassmorphism Effect,
- The table data is are highlighted on hover.
### Skills:
- Module export and import
- Components
- One-way and Two-way Data Binding ([] / [()])
- Events
- Forms
- Conditional Render (@if / *ngIf)
- Repetition (@for / *ngFor)
- Filter and Map functions
- CRUD (Create, Read, Update and Delete)
- Conditional Styling
- SCSS
---
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.4.
## Development server
To start a local development server, run:
```bash
ng serve
```
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.