Compounding Interest

Angular app to calculate compounding interest.

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>
      <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">
        <label for="percent">Percent Growth (Historical average is 10%)</label>
        <input type="number" ng-model="percent" class="form-control" id="percent" onfocus="this.value=''">
      </div>
      <div class="form-group d-flex justify-content-between">
        <button ng-click="amount = 0; yearly = 0; years = 0; result = 0; percent = 0; " class="btn btn-cancel">
          Reset
        </button>
         <button ng-click="CalculateInterest()" class="btn btn-primary">
          Calculate
        </button>
      </div>
       <div class="form-group">
       <p class="pt-3">Initial investment:...

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 {
  border-radius: 2rem;
}

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

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

.btn-cancel {
  background-color: lighten($primary, 50%);
  border: 1px solid $primary;
  color: $primary;
  &:hover {
    background-color: darken($primary, 15%);
    color: #fff;
  }
}

TypeScript

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

  $scope.CalculateInterest = function() {
    $scope.y = $scope.years;
    $scope.a = $scope.amount;
    $scope.p = $scope.percent/100;
    while ($scope.y > 0) {
      $scope.a = ($scope.a * $scope.p) + $scope.a + $scope.yearly;
      $scope.y--;
      $scope.result = $scope.a;
    }
  }
});