changed cart reactive template to template driven + responsive fix

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/components/cart/cart.component.html

@@ -22,47 +22,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 +116,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

@@ -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 { Form } from '@angular/forms';
 
 
 
@@ -18,13 +18,14 @@ 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 = ''
+
+
+
   
 
   constructor(private cartService: CartService, private router: Router) { }
@@ -42,8 +43,6 @@ export class CartComponent implements OnInit {
   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/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/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 {