added snackbar + badge on navbar panel icon

src/app/app-routing.module.ts

@@ -9,7 +9,8 @@ const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'product/:id', component: ProductItemDetailsComponent },
   { path: 'cart', component: CartComponent },
-  { path: 'confirmation', component: ConfirmationComponent}
+  { path: 'confirmation', component: ConfirmationComponent},
+  { path: '**', redirectTo: '/' }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NavbarComponent } from './components/navbar/navbar.component';
 import { ProductItemDetailsComponent } from './components/product-item-details/product-item-details.component'
 import { CartComponent } from './components/cart/cart.component'
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 
 import { MatCommonModule } from '@angular/material/core';
 import { MatButtonModule } from '@angular/material/button'
@@ -22,7 +23,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { ConfirmationComponent } from './components/confirmation/confirmation.component';
+import { MatSnackBarModule } from '@angular/material/snack-bar'
+
 
 
 
@@ -54,7 +56,8 @@ import { ConfirmationComponent } from './components/confirmation/confirmation.co
     MatSelectModule,
     MatBadgeModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    MatSnackBarModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/cart/cart.component.html

@@ -14,7 +14,9 @@
                 </span> 
             </div>
             <div class="cart-item-delete">
-                <a (click)="deleteFromCart(item)"><mat-icon>delete</mat-icon></a>
+                <button mat-mini-fab color="warn" (click)="deleteFromCart(item)">
+                    <mat-icon>delete</mat-icon>
+                </button>
             </div>
         </div>
         <div class="cart-total-price">
@@ -22,47 +24,87 @@
         </div>
     </div>
 
-    <form *ngIf="cartItems.length != 0" [formGroup]="checkoutForm" class="cart-payment-from" (ngSubmit)="onSubmit()">
+    <form *ngIf="cartItems.length != 0" #checkoutForm="ngForm" class="cart-payment-from" (ngSubmit)="onSubmit()">
         <mat-form-field class="from-input" appearance="outline">
             <mat-label>First Name</mat-label>
-            <input matInput formControlName="firstname">
-            <mat-error *ngIf="checkoutForm.get('firstname')?.hasError('required')">
+            <input 
+            matInput
+            type="text" 
+            name="firstname"
+            [ngModel]="firstname"
+            (ngModelChange)="firstname = $event"
+            required
+            />
+            <mat-error *ngIf="checkoutForm.controls['firstname']?.errors?.['required']">
                 First Name is <strong>required</strong>
             </mat-error>
         </mat-form-field>
 
         <mat-form-field class="from-input" required appearance="outline">
             <mat-label>Last Name</mat-label>
-            <input matInput  formControlName="lastname">
-            <mat-error *ngIf="checkoutForm.get('lastname')?.hasError('required')">
+            <input 
+            matInput
+            type="text"
+            name="lastname"
+            [ngModel]="lastname"
+            (ngModelChange)="lastname = $event"
+            required
+            />
+            <mat-error *ngIf="checkoutForm.controls['lastname']?.errors?.['required']">
                 Last Name is <strong>required</strong>
             </mat-error>
         </mat-form-field>
 
         <mat-form-field class="from-input" appearance="outline">
             <mat-label>Email</mat-label>
-            <input type="email" matInput formControlName="email" placeholder="Ex. pat@example.com">
-            <mat-error *ngIf="checkoutForm.get('email')?.hasError('email') && !checkoutForm.get('email')?.hasError('required')">
+            <input  
+            matInput
+            type="email"
+            name="email"
+            [ngModel]="email"
+            (ngModelChange)="email = $event"
+            placeholder="Ex. pat@example.com"
+            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
+            required
+            />
+            <mat-error *ngIf="checkoutForm.controls['email']?.errors?.['pattern']">
               Please enter a  <strong>valid</strong> email address
             </mat-error>
-            <mat-error *ngIf="checkoutForm.get('email')?.hasError('required')">
+            <mat-error *ngIf="checkoutForm.controls['email']?.errors?.['required']">
               Email is <strong>required</strong>
             </mat-error>
         </mat-form-field>
 
         <mat-form-field class="from-input" appearance="outline">
             <mat-label>Address</mat-label>
-            <input matInput formControlName="address" placeholder="Ex. 100 Main St">
-            <mat-error *ngIf="checkoutForm.get('address')?.hasError('required')">
+            <input 
+            matInput 
+            type="text"
+            name="address"
+            [ngModel]="address"
+            (ngModelChange)="address = $event"
+            placeholder="Ex. 100 Main St"
+            required
+            />
+            <mat-error *ngIf="checkoutForm.controls['address']?.errors?.['required']">
                 Address is <strong>required</strong>
             </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="from-input" appearance="outline">
+        <mat-form-field class="from-input" appearance="outline" type="number">
             <mat-label>Postal Code</mat-label>
-            <input matInput formControlName="postalcode" #postalCode maxlength="5" placeholder="Ex. 94105">
-            <mat-error *ngIf="checkoutForm.get('postalcode')?.hasError('required')">
-                Postal Code is <strong>required</strong>
+            <input 
+            matInput 
+            type="number"
+            name="postalcode"
+            [ngModel]="postalcode"
+            (ngModelChange)="postalcode = $event" 
+            maxlength="5" 
+            placeholder="Ex. 94105"
+            required
+            />
+            <mat-error *ngIf="checkoutForm.controls['postalcode']?.errors?.['required']">
+                Postal Code is <strong>required number</strong>
             </mat-error>
         </mat-form-field>
         <button mat-raised-button color="primary" type="submit" [disabled]="!checkoutForm.valid">Submit</button>
@@ -76,3 +118,19 @@
 
 
 
+<!-- <mat-form-field class="from-input" appearance="outline">
+            <mat-label>Email</mat-label>
+            <input 
+            type="email" 
+            matInput 
+            formControlName="email" 
+            placeholder="Ex. pat@example.com"
+            />
+            <mat-error *ngIf="checkoutForm.get('email')?.hasError('email') && !checkoutForm.get('email')?.hasError('required')">
+              Please enter a  <strong>valid</strong> email address
+            </mat-error>
+            <mat-error *ngIf="checkoutForm.get('email')?.hasError('required')">
+              Email is <strong>required</strong>
+            </mat-error>
+        </mat-form-field>
+        -->

src/app/components/cart/cart.component.scss

@@ -50,6 +50,7 @@ img {
     justify-content: center;
     align-items: center;
     padding-right: 10%;
+    flex-grow: 1;
 
     .cart-item-name {
         padding-bottom: 10%;
@@ -62,7 +63,6 @@ img {
 
 .cart-item-delete {
     display: flex;
-    flex-grow: 1;
     justify-content: center;
     align-items: center;
 }
@@ -86,7 +86,6 @@ img {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    max-height: 60vh;
     padding: 4vh;
     padding-top: 5vh;
     padding-bottom: 5vh;

src/app/components/cart/cart.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CartService } from '../../services/cart.service';
 import { Product } from 'src/app/models/product';
-import { FormControl, Validators, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar'
 
 
 
@@ -18,16 +18,18 @@ export class CartComponent implements OnInit {
   cartItems: Product[] = []
   totalPrice: number = 0
 
-  checkoutForm = new FormGroup({
-    firstname: new FormControl('', [Validators.required]),
-    lastname: new FormControl('', [Validators.required]),
-    email: new FormControl('', [Validators.required, Validators.email]),
-    address: new FormControl('', [Validators.required]),
-    postalcode: new FormControl('', [Validators.required])
-  });
+  firstname: string = ''
+  lastname: string = ''
+  email: string = ''
+  address: string = ''
+  postalcode: string = ''
+
+  snackBarDuration = 7;
+
+
   
 
-  constructor(private cartService: CartService, private router: Router) { }
+  constructor(private cartService: CartService, private router: Router, private _snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
     this.cartItems = this.cartService.getItems()
@@ -37,13 +39,20 @@ export class CartComponent implements OnInit {
 
   deleteFromCart(product: Product) {
     this.cartService.removeFromCart(product);
+    this.cartItems = this.cartService.getItems()
+    this.totalPrice = this.cartService.getTotalPrice();
+    this.openSnackBar(product.name, product.quantity)
+  }
+
+  openSnackBar(productName: string, productQuantity: number) {
+    this._snackBar.open( productName + " x" + productQuantity + " " + "removed", 'Close', {
+      duration: this.snackBarDuration * 100
+    })
   }
 
   onSubmit(): void {
     // Your submit logic here (e.g., making an API call that sends form data)
     this.cartItems = this.cartService.clearCart();
-    console.warn('Your order has been submitted', this.checkoutForm.value);
-    this.checkoutForm.reset();
     this.router.navigate(['confirmation']);
 
   }

src/app/components/navbar/navbar.component.html

@@ -2,6 +2,6 @@
     <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">
-        <a routerLink="/cart"><mat-icon class="cart-icon">shopping_cart</mat-icon></a>
+        <a routerLink="/cart"><mat-icon matBadge={{cartQuantity}} [matBadgeHidden]="cartQuantity<=0" matBadgeColor="warn" class="cart-icon">shopping_cart</mat-icon></a>
     </button>
 </mat-toolbar>

src/app/components/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnChanges } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CartService } from 'src/app/services/cart.service';
 
 @Component({
@@ -12,12 +12,10 @@ export class NavbarComponent implements OnInit {
   constructor(private cartService: CartService) { }
 
   ngOnInit(): void {
-    
   }
 
-  onChanges(): void {
+  ngDoCheck(): void {
     this.cartQuantity = this.cartService.getQuantity()
-    console.log('halou')
   }
 
 }

src/app/components/product-item-details/product-item-details.component.scss

@@ -38,20 +38,24 @@ $medium: 960px;
     @media screen and (max-width: $small) {
         width: 60%;
     }
-}
-
-.info-tilte {
-    font-size: 4vh;
-    padding-bottom: 2%;
-}
 
-.info-price {
-    font-size: 2.5vh;
+    .info-tilte {
+        font-size: 3vh;
+        font-weight: lighter;
+        padding-bottom: 2%;
+    }
+    
+    .info-price {
+        font-size: 2.5vh;
+        color: #0F1111;
+        font-weight: 500;
+    }
+    
+    .info-description {
+        padding-top: 10%;
+    }
 }
 
-.info-description {
-    padding-top: 10%;
-}
 
 .details-quantity {
     width: 30%;

src/app/components/product-item-details/product-item-details.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute } from "@angular/router"
 import { HttpService } from 'src/app/services/http.service';
 import { CartService } from 'src/app/services/cart.service';
 import { FormControl } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar'
 
 @Component({
   selector: 'app-product-item-details',
@@ -24,10 +25,13 @@ export class ProductItemDetailsComponent implements OnInit {
   productId: number = 0
   quantity: string = '1'
 
+  snackBarDuration = 7;
+
   constructor(
     private httpService: HttpService, 
     private route: ActivatedRoute, 
-    private cartService: CartService 
+    private cartService: CartService,
+    private _snackBar: MatSnackBar
     ) { }
 
   ngOnInit(): void {
@@ -42,7 +46,13 @@ export class ProductItemDetailsComponent implements OnInit {
   addToCart(product: Product) {
     this.product.quantity = parseInt(this.quantity)
     this.cartService.addToCart(product);
-    window.alert('Your product has been added to the cart!');
+    this.openSnackBar(product.name, product.quantity)
+  }
+
+  openSnackBar(productName: string, productQuantity: number) {
+    this._snackBar.open( productName + " x" + productQuantity + " " + "added to cart", 'Close', {
+      duration: this.snackBarDuration * 100
+    });
   }
 
 }

src/app/components/product-item/product-item.component.html

@@ -4,9 +4,9 @@
             <img src={{product.url}} class="card-img" alt="{{product.name}}">
         </div>
         <div class="card-info">
-            <span>{{product.name}}</span>
-            <span>{{product.description}}</span>
-            <span>{{product.price | currency}}</span>
+            <span class="name">{{product.name}}</span>
+            <span class="description">{{product.description}}</span>
+            <span class="price">{{product.price | currency}}</span>
         </div>
         <div class="card-buttons">
             <button mat-raised-button color="primary" routerLink="/product/{{product.id}}">Details</button>

src/app/components/product-item/product-item.component.scss

@@ -40,6 +40,19 @@ $medium: 960px;
     align-items: center;
     flex-grow: 1;
     padding-top: 5%;
+    .name {
+        font-size: 2.5vh;
+        font-weight: lighter;
+    }
+    .description {
+        padding-top: 3vh;
+    }
+    .price{
+        padding-top: 5vh;
+        font-size: 2vh;
+        color: #0F1111;
+        font-weight: 500;
+    }
 }
 
 .card-buttons {