feat: add Make Change page

Author: ColinFrick

complete-application/src/app/app.component.html

@@ -17,9 +17,8 @@
 
     <div id="menu-bar" class="menu-bar">
       <ng-container *ngIf="isLoggedIn">
-        <a class="menu-link">Make Change</a>
-
-        <a class="menu-link" style="text-decoration-line: underline">Account</a>
+        <a class="menu-link" routerLink="make-change" routerLinkActive="active">Make Change</a>
+        <a class="menu-link" routerLink="account" routerLinkActive="active">Account</a>
       </ng-container>
       <ng-container *ngIf="!isLoggedIn">
         <a class="menu-link">About</a>

complete-application/src/app/app.module.ts

@@ -3,10 +3,12 @@ import {BrowserModule} from '@angular/platform-browser';
 import {AppComponent} from './app.component';
 import {RouterModule} from "@angular/router";
 import {HomePageComponent} from './home-page/home-page.component';
+import {FormsModule} from "@angular/forms";
 //tag::importAngularSDK[]
 import {FusionAuthModule} from "@fusionauth/angular-sdk";
 //end::importAngularSDK[]
 import {AccountPageComponent} from './account-page/account-page.component';
+import {MakeChangePageComponent} from './make-change-page/make-change-page.component';
 //tag::importAuthGuard[]
 import {authGuard} from "./auth-guard";
 //end::importAuthGuard[]
@@ -15,22 +17,25 @@ import {authGuard} from "./auth-guard";
   declarations: [
     AppComponent,
     HomePageComponent,
-    AccountPageComponent
+    AccountPageComponent,
+    MakeChangePageComponent
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     //tag::routerConfiguration[]
     RouterModule.forRoot([
       {path: '', component: HomePageComponent, canActivate: [authGuard(false, '/account')]},
-      {path: 'account', component: AccountPageComponent, canActivate: [authGuard(true, '/')]}
+      {path: 'account', component: AccountPageComponent, canActivate: [authGuard(true, '/')]},
+      {path: 'make-change', component: MakeChangePageComponent, canActivate: [authGuard(true, '/')]},
     ]),
     //end::routerConfiguration[]
     //tag::fusionAuthModuleConfiguration[]
     FusionAuthModule.forRoot({
       clientId: 'e9fdb985-9173-4e01-9d73-ac2d60d1dc8e',
       serverUrl: 'http://localhost:9011',
       redirectUri: 'http://localhost:4200',
-    })
+    }),
     //end::fusionAuthModuleConfiguration[]
   ],
   providers: [],

complete-application/src/app/make-change-page/make-change-page.component.css

@@ -0,0 +1,15 @@
+<div class="app-container change-container">
+  <h3>We Make Change</h3>
+
+  <div class="change-message" *ngIf="change">
+    We can make change for {{change.total | currency}} with {{change.nickels}} nickels and {{change.pennies}} pennies!
+  </div>
+
+  <form (ngSubmit)="makeChange()">
+    <div class="h-row">
+      <div class="change-label">Amount in USD: $</div>
+      <input class="change-input" name="amount" [(ngModel)]="amount" type="number" step=".01"/>
+      <input class="change-submit" type="submit" value="Make Change"/>
+    </div>
+  </form>
+</div>

complete-application/src/app/make-change-page/make-change-page.component.html

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-make-change-page',
+  templateUrl: './make-change-page.component.html',
+  styleUrls: ['./make-change-page.component.css']
+})
+export class MakeChangePageComponent {
+
+  amount = 0;
+
+  change: { total: number; nickels: number; pennies: number } | null = null;
+
+  makeChange() {
+    const total = this.amount;
+    const nickels = Math.floor(this.amount / 0.05);
+    const pennies = Math.round((this.amount - nickels * 0.05) * 100);
+    this.change = {nickels, pennies, total};
+  }
+
+}

complete-application/src/app/make-change-page/make-change-page.component.ts

@@ -72,10 +72,11 @@ body {
   font-weight: 600;
   color: #FFFFFF;
   margin-left: 40px;
+  text-decoration-line: none;
 }
 
-.inactive {
-  text-decoration-line: none;
+.active {
+  text-decoration-line: underline;
 }
 
 .button-lg {