src/app/app-routing.module.ts

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

src/app/app.module.ts

@@ -12,7 +12,6 @@ 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'
@@ -23,8 +22,7 @@ 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 { MatSnackBarModule } from '@angular/material/snack-bar'
-
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 
 
 
@@ -56,8 +54,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'
     MatSelectModule,
     MatBadgeModule,
     MatFormFieldModule,
-    MatInputModule,
-    MatSnackBarModule
+    MatInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -14,9 +14,7 @@
                 </span> 
             </div>
             <div class="cart-item-delete">
-                <button mat-mini-fab color="warn" (click)="deleteFromCart(item)">
-                    <mat-icon>delete</mat-icon>
-                </button>
+                <a (click)="deleteFromCart(item)"><mat-icon>delete</mat-icon></a>
             </div>
         </div>
         <div class="cart-total-price">
@@ -24,87 +22,47 @@
         </div>
     </div>
 
-    <form *ngIf="cartItems.length != 0" #checkoutForm="ngForm" class="cart-payment-from" (ngSubmit)="onSubmit()">
+    <form *ngIf="cartItems.length != 0" [formGroup]="checkoutForm" class="cart-payment-from" (ngSubmit)="onSubmit()">
         <mat-form-field class="from-input" appearance="outline">
             <mat-label>First Name</mat-label>
-            <input 
-            matInput
-            type="text" 
-            name="firstname"
-            [ngModel]="firstname"
-            (ngModelChange)="firstname = $event"
-            required
-            />
-            <mat-error *ngIf="checkoutForm.controls['firstname']?.errors?.['required']">
+            <input matInput formControlName="firstname">
+            <mat-error *ngIf="checkoutForm.get('firstname')?.hasError('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
-            type="text"
-            name="lastname"
-            [ngModel]="lastname"
-            (ngModelChange)="lastname = $event"
-            required
-            />
-            <mat-error *ngIf="checkoutForm.controls['lastname']?.errors?.['required']">
+            <input matInput  formControlName="lastname">
+            <mat-error *ngIf="checkoutForm.get('lastname')?.hasError('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  
-            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']">
+            <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.controls['email']?.errors?.['required']">
+            <mat-error *ngIf="checkoutForm.get('email')?.hasError('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 
-            type="text"
-            name="address"
-            [ngModel]="address"
-            (ngModelChange)="address = $event"
-            placeholder="Ex. 100 Main St"
-            required
-            />
-            <mat-error *ngIf="checkoutForm.controls['address']?.errors?.['required']">
+            <input matInput formControlName="address" placeholder="Ex. 100 Main St">
+            <mat-error *ngIf="checkoutForm.get('address')?.hasError('required')">
                 Address is <strong>required</strong>
             </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="from-input" appearance="outline" type="number">
+        <mat-form-field class="from-input" appearance="outline">
             <mat-label>Postal Code</mat-label>
-            <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>
+            <input matInput formControlName="postalcode" #postalCode maxlength="5" placeholder="Ex. 94105">
+            <mat-error *ngIf="checkoutForm.get('postalcode')?.hasError('required')">
+                Postal Code is <strong>required</strong>
             </mat-error>
         </mat-form-field>
         <button mat-raised-button color="primary" type="submit" [disabled]="!checkoutForm.valid">Submit</button>
@@ -118,19 +76,3 @@
 
 
 
-<!-- <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,7 +50,6 @@ img {
     justify-content: center;
     align-items: center;
     padding-right: 10%;
-    flex-grow: 1;
 
     .cart-item-name {
         padding-bottom: 10%;
@@ -63,6 +62,7 @@ img {
 
 .cart-item-delete {
     display: flex;
+    flex-grow: 1;
     justify-content: center;
     align-items: center;
 }
@@ -86,6 +86,7 @@ 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 { MatSnackBar } from '@angular/material/snack-bar'
+import { FormControl, Validators, FormGroup } from '@angular/forms';
 
 
 
@@ -18,18 +18,16 @@ export class CartComponent implements OnInit {
   cartItems: Product[] = []
   totalPrice: number = 0
 
-  firstname: string = ''
-  lastname: string = ''
-  email: string = ''
-  address: string = ''
-  postalcode: string = ''
-
-  snackBarDuration = 7;
-
-
+  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])
+  });
   
 
-  constructor(private cartService: CartService, private router: Router, private _snackBar: MatSnackBar) { }
+  constructor(private cartService: CartService, private router: Router) { }
 
   ngOnInit(): void {
     this.cartItems = this.cartService.getItems()
@@ -39,20 +37,13 @@ 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 matBadge={{cartQuantity}} [matBadgeHidden]="cartQuantity<=0" matBadgeColor="warn" class="cart-icon">shopping_cart</mat-icon></a>
+        <a routerLink="/cart"><mat-icon 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 } from '@angular/core';
+import { Component, OnInit, OnChanges } from '@angular/core';
 import { CartService } from 'src/app/services/cart.service';
 
 @Component({
@@ -12,10 +12,12 @@ export class NavbarComponent implements OnInit {
   constructor(private cartService: CartService) { }
 
   ngOnInit(): void {
+    
   }
 
-  ngDoCheck(): void {
+  onChanges(): void {
     this.cartQuantity = this.cartService.getQuantity()
+    console.log('halou')
   }
 
 }

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

@@ -38,24 +38,20 @@ $medium: 960px;
     @media screen and (max-width: $small) {
         width: 60%;
     }
+}
 
-    .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-tilte {
+    font-size: 4vh;
+    padding-bottom: 2%;
+}
+
+.info-price {
+    font-size: 2.5vh;
 }
 
+.info-description {
+    padding-top: 10%;
+}
 
 .details-quantity {
     width: 30%;

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

@@ -4,7 +4,6 @@ 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',
@@ -25,13 +24,10 @@ export class ProductItemDetailsComponent implements OnInit {
   productId: number = 0
   quantity: string = '1'
 
-  snackBarDuration = 7;
-
   constructor(
     private httpService: HttpService, 
     private route: ActivatedRoute, 
-    private cartService: CartService,
-    private _snackBar: MatSnackBar
+    private cartService: CartService 
     ) { }
 
   ngOnInit(): void {
@@ -46,13 +42,7 @@ export class ProductItemDetailsComponent implements OnInit {
   addToCart(product: Product) {
     this.product.quantity = parseInt(this.quantity)
     this.cartService.addToCart(product);
-    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
-    });
+    window.alert('Your product has been added to the cart!');
   }
 
 }

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 class="name">{{product.name}}</span>
-            <span class="description">{{product.description}}</span>
-            <span class="price">{{product.price | currency}}</span>
+            <span>{{product.name}}</span>
+            <span>{{product.description}}</span>
+            <span>{{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,19 +40,6 @@ $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 {