BoncCalc & Navlinks

src/components/misc/bondCaclculator.vue

+<template>
+  <div>
+    <h2 id="modal-bondcal">Bond Calculator</h2>
+    <p>Calculate the value of the property you could buy</p>
+    <input
+      type="text"
+      class="form-control mb-2"
+      name="income"
+      id="gross-income"
+      placeholder="Gross Monthly Household Income"
+      v-model="amount"
+      @input="displayValue()"
+    />
+    <input
+      type="text"
+      class="form-control mb-2"
+      name="deposit"
+      id="deposit"
+      placeholder="Deposit Amount – May be Required"
+      v-model="deposit"
+      @input="displayDeposit()"
+    />
+    <div class="slidecontainer mt-4">
+      <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
+    </div>
+    <p>{{ term }} Years</p>
+    <input
+      type="text"
+      class="form-control mb-2"
+      name="interest"
+      id="interest"
+      placeholder="Interest Rate (Percent)"
+      v-model="rate"
+    />
+    <!-- <button @click="calculate()" class="btn-solid-blue scrollto">CALCULATE</button> -->
+    <div class="container p-0 mt-5">
+      <div class="row">
+        <div class="col-md-7">
+          Monthly Repayment
+        </div>
+        <div class="col-md-5">
+          <strong>{{ totalMonthlyPayment | toCurrency }}</strong>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-md-7">
+          Gross Montly Income
+        </div>
+        <div class="col-md-5">
+          <strong>{{ grossIncome | toCurrency }}</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  data() {
+    const formatter = new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: 2
+    });
+    return {
+      amount: "R" + formatter.format(100000.0),
+      deposit: "R" + formatter.format(0),
+      term: 10,
+      rate: 7,
+      isInputActive: false
+    };
+  },
+  props: ["value"],
+  methods: {
+    calculate() {
+      var rate = this.calcRate();
+      var years = this.term * 12;
+      var topPart = rate * Math.pow(1 + rate, years);
+      var bottomPart = Math.pow(1 + rate, years) - 1;
+      var netAmnt = this.amount - this.deposit;
+      var bond = (netAmnt * topPart) / bottomPart;
+    },
+    calcRate() {
+      var answer = this.rate / 100 / 12;
+      return answer;
+    },
+    displayValue() {
+      const formatter = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: 2
+      });
+      if (this.amount.charAt(0) !== "R") {
+        this.amount = "R" + formatter.format(this.amount);
+        if (this.amount < 1) {
+          this.amount = "R" + 0;
+        }
+      }
+    },
+    displayDeposit() {
+      if (this.deposit.charAt(0) !== "R") {
+        if (this.deposit < 1) {
+          this.deposit = "R" + 0;
+        }
+      }
+    }
+  },
+  computed: {
+    totalMonthlyPayment() {
+      var rate = this.calcRate;
+      var years = this.term * 12;
+      var topPart = rate * Math.pow(1 + rate, years);
+      var bottomPart = Math.pow(1 + rate, years) - 1;
+
+      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
+      var bond = (netAmnt * topPart) / bottomPart;
+      if (isNaN(bond)) {
+        return 0;
+      } else {
+        return bond;
+      }
+    },
+    calcRate() {
+      var answer = this.rate / 100 / 12;
+      return answer;
+    },
+    grossIncome() {
+      return this.totalMonthlyPayment * 3.335120643;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/shared/navBar.vue

             <div class="col-md-9" id="topbar">
               <div class="container clearFix">
                 <div class="social-links  ">
-                  <a href="#">
+                  <a href="mailto:info@univateproperties.co.za">
                     <i class="fa fa-envelope"></i>
                   </a>
-                  <a href="#">
+                  <a href="https://www.facebook.com/univateproperties/" target="_blank">
                     <i class="fa fa-facebook"></i>
                   </a>
                   <a href="#">
           </div>
 
           <div class="modal-body pt-3">
-            <h2 id="modal-bondcal">Bond Calculator</h2>
-            <p>Calculate the value of the property you could buy</p>
-            <input
-              type="text"
-              class="form-control mb-2"
-              name="income"
-              id="gross-income"
-              placeholder="Gross Monthly Household Income"
-            />
-            <input
-              type="text"
-              class="form-control mb-2"
-              name="deposit"
-              id="deposit"
-              placeholder="Deposit Amount – May be Required"
-            />
-            <input
-              data-toggle="dropdown"
-              name="repayment-term"
-              class="form-control mb-2"
-              id="replayment-term"
-              placeholder="Repayment Term (Years)"
-              aria-haspopup="true"
-              aria-expanded="false"
-            />
-            <input
-              type="text"
-              class="form-control mb-2"
-              name="interest"
-              id="interest"
-              placeholder="Interest Rate (Percent)"
-            />
-            <a href="#" class="btn-solid-blue scrollto">CALCULATE</a>
+            <bondCalculator />
           </div>
         </div>
         <!-- modal-content -->
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import Log from "../../assets/Log";
+import bondCalculator from "../misc/bondCaclculator";
 
 export default {
+  components: {
+    bondCalculator
+  },
   data() {
     return {
       hover: false,