added gain loss view and functionality

src/app/app-routing.module.ts

@@ -4,12 +4,15 @@ import { CashFlowComponent } from './cash-flow/cash-flow.component';
 import { FutureValueComponent } from './future-value/future-value.component';
 import { PresentValueComponent } from './present-value/present-value.component'
 import { DoubleComponent } from './double/double.component';
+import { GainLossComponent } from './gain-loss/gain-loss.component';
+
 
 const routes: Routes = [
   { path: 'cash-flow', component: CashFlowComponent },
   { path: 'future-value-of-money', component: FutureValueComponent },
   { path: 'present-value-of-money', component: PresentValueComponent },
-  { path: 'time-to-double-investment', component: DoubleComponent }
+  { path: 'time-to-double-investment', component: DoubleComponent },
+  { path: 'percent-gain-or-loss', component: GainLossComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -8,14 +8,16 @@ import { CashFlowComponent } from './cash-flow/cash-flow.component';
 import { FutureValueComponent } from './future-value/future-value.component';
 import { PresentValueComponent } from './present-value/present-value.component';
 import { DoubleComponent } from './double/double.component';
+import { GainLossComponent } from './gain-loss/gain-loss.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CashFlowComponent,
     FutureValueComponent,
     PresentValueComponent,
-    DoubleComponent
+    DoubleComponent,
+    GainLossComponent
   ],
   imports: [
     BrowserModule,

src/app/gain-loss.ts

@@ -0,0 +1,7 @@
+export class GainLoss {
+    market: number;
+    purchase: number;
+    difference: number;
+    percent: number;
+    growth: string;
+}

src/app/gain-loss/gain-loss.component.html

@@ -0,0 +1,26 @@
+<h3>Percent Gain or Loss on Investment</h3>
+<div class="columns">
+  <div class="column">
+    <div class="field">
+      <label class="label">Current Value</label>
+      <div class="control">
+        <input (keyup)="calculatePercent()" [(ngModel)]="GainLoss.market" class="input" type="text">
+      </div>
+    </div>
+    <div class="field">
+      <label class="label">Purchase Price</label>
+      <div class="control">
+        <input (keyup)="calculatePercent()" [(ngModel)]="GainLoss.purchase" class="input" type="text">
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    <h1>Yield</h1>
+    <h3>{{ GainLoss.percent }}% {{ GainLoss.growth }}</h3>
+  </div>
+  <div class="column">
+    <p>
+      By entering a purchase price and the current value of an asset you can calculate what percent you have gained or lost on an particular asset.
+    </p>
+  </div>
+</div>

src/app/gain-loss/gain-loss.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GainLossComponent } from './gain-loss.component';
+
+describe('GainLossComponent', () => {
+  let component: GainLossComponent;
+  let fixture: ComponentFixture<GainLossComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GainLossComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GainLossComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/gain-loss/gain-loss.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { GainLoss } from '../gain-loss'
+
+@Component({
+  selector: 'app-gain-loss',
+  templateUrl: './gain-loss.component.html',
+  styleUrls: ['./gain-loss.component.scss']
+})
+export class GainLossComponent implements OnInit {
+
+  GainLoss: GainLoss = {
+    market: 0,
+    purchase: 0,
+    difference: 0,
+    percent: 0,
+    growth: ''
+  }
+
+  calculatePercent() {
+    this.GainLoss.difference = this.GainLoss.market - this.GainLoss.purchase;
+
+    if (this.GainLoss.difference < 0) {
+      this.GainLoss.growth = 'loss';
+    } else {
+      this.GainLoss.growth = 'gain';
+    }
+
+    this.GainLoss.percent = Number(((this.GainLoss.difference / this.GainLoss.purchase) * 100).toFixed(2)) < 0 ? -Number(((this.GainLoss.difference / this.GainLoss.purchase) * 100).toFixed(2)) : Number(((this.GainLoss.difference / this.GainLoss.purchase) * 100).toFixed(2)) ;
+
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}