Hypothetical Stock Market Growth

Angular app to calculate potential investment growth in the stock market.

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="container py-3">
  <div ng-app="interestApp" ng-controller="interestController">
    <form class="shadow">
      <h3 class="text-center">Stock Market Growth</h3>
      <p class="small text-center pb-3">Assuming historical average of 10% return/year.</p>

      <div class="form-group">
        <label for="investment">Initial or current investment amount</label>
        <input type="number" ng-model="amount" class="form-control" id="amount" onfocus="this.value=''">
      </div>
      <div class="form-group">
        <label for="yearly">Optional annual addition</label>
        <input type="number" ng-model="yearly" class="form-control" id="yearly" onfocus="this.value=''">
      </div>
      <div class="form-group">
        <label for="years">Years of growth</label>
        <input type="number" ng-model="years" class="form-control" id="years" onfocus="this.value=''">
      </div>
      <div class="form-group">
        <button ng-click="CalculateInterest()" class="btn btn-primary">
          Calculate
        </button>
        <button ng-click="amount = 0; yearly = 0; years = 0; result = 0; " class="btn btn-cancel">
          Reset
        </button>
        <p class="pt-3">Initial investment: <u>{{amount | currency}}</u></p>
        <p class="pb-3">Value after {{ years }} years: <u>{{result | currency}}</u></p>
      </div>
    </form>
  </div>
</div>
<p class="small text-center">For educational and informational...

SCSS

$primary: #2d79b5;

body {
  background-color: lighten($primary, 50%);
  padding: 2rem 0;
  letter-spacing: 0.05rem;
}

h3 {
  color: #fff;
  background-color: $primary;
  border-radius: 3px 3px 0 0;
  padding: 1rem;
  margin-bottom: 1rem;
}

p {
  max-width: 350px;
  margin: 0 auto;
}

hr {
  border-color: lighten($primary, 45%);
}

form {
  max-width: 350px;
  margin: 0 auto;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  background-color: #fff;
}

.form-group {
  padding: 0 1rem;
}

label {
  font-size: 0.75rem;
  font-weight: bold;
  color: #1168ad;
}

input {
  width: 100%;
  border: 1px solid lighten($primary, 40%) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

.btn-primary {
  background-color: $primary;
}

.btn-primary:hover {
  background-color: darken($primary, 10%);
}

.btn-cancel {
  background-color: lighten($primary, 50%);
  border: 1px solid $primary;
  color: $primary;
}

TypeScript

var app = angular.module('interestApp', []);
app.controller('interestController', function(i) {
  i.amount = 0;
  i.years = 0;
  i.return = 0;
  i.yearly = 0;

  i.CalculateInterest = function() {
    i.y = i.years;
    i.a = i.amount;
    while (i.y > 0) {
      i.a = (i.a * 0.10) + i.a + i.yearly;
      i.y--;
      i.result = i.a;
    }
  }
});