Compounding Calculator

by joplomacedo

HTML

<div id="app">
  <div>
    <div>
    
       <div>Initial amount ($)</div>
      <input type="text" v-model.number="initialAmount">
    </div>
    <div>
      <div>Daily Growth Rate (%)</div>
      <input type="text" v-model.number="dailyGowthRateInPercentage">
    </div>
    <div>
      <div>Period (days)</div>
      <input type="text" v-model.number="periodInDays">
    </div>
  </div>
  <div>
  <div>Result</div>
  <div>${{result}}</div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    initialAmount: 28300,
    dailyGowthRateInPercentage: 1,
    periodInDays: 240,
  },
  computed: {
  	dailyGowthRate() {
    	return this.dailyGowthRateInPercentage/100;
    },
  	result: function(){
    	let  { initialAmount, dailyGowthRate,periodInDays} =  this;
			let currentAmount = initialAmount;
      
      for ( let i = 0; i < periodInDays; i++) {
      	currentAmount += currentAmount * dailyGowthRate;
      }
      
      return Math.floor(currentAmount);
    }
  }
})