Retirement Calculator (Edited)

by Otobong Okoko

HTML

<form class="formoid-flat-black" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#640028;max-width:480px;min-width:150px" method="post" autocomplete="off">
  <div class="title">
    <h2>Retirement Calculator</h2>
  </div>
  <div class="element-input" title="Enter an Amount"><label class="title">How much do you need?<span class="required">*</span></label>
  <input class="large" type="text" id="exAmt" name="fd" required="required" /></div>

<div class="element-date" title="Select your Retirement Date">
<label class="title">When will you retire?<span class="required">*</span>
</label>
<input class="large" type="text" id="futureDate" name="date" required="required" />
</div>

<div class="element-select" title="Payment Frequency">
<span id="dMessage"></span>
</div>

<div class="element-select" title="Payment Frequency">
<label class="title">How do you want to pay?<span class="required">*</span></label>

<div class="large">
<span>
<select name="select" id="frequency" required="required">
		<option value="Select an Option">Select an Option</option>
		<option value="Monthly">Monthly</option>
		<option value="Annually">Annually</option>
</select>
<i></i>
</span>
</div>
</div>

<div class="element-select"><label class="title">When do you want to pay?</label>
<div class="large"><span>
<select name="select1" id="paytime">
		<option value="Select an Option">Select an Option</option>
		<option value="Beginning of Month">Beginning of Month</option>
		<option value="End of Month">End of Month</option>
</select>
<i></i>
</span>
</div>
</div>

<div class="element-separator">
<hr>
<h3 class="section-break-title">Summary</h3>

<div class="right">
  Today's Date: <small id="today"></small><br> Future Date: <small id="fdate"></small><br> Effective Rate: <small id="erate"></small><br> Payment Period: <small id="period"></small><br> Frequency: <small id="freqy"></small><br> Expected Amount:
<small id="ddiff"></small><br> Pay Time: <small...

CSS

@import url(//fonts.googleapis.com/css?family=Roboto:400,700,300);
body {
  font-family: "Roboto";
  font-size: 14px;
}

small {
  color: red;
}

#dMessage,
#aMessage,
#fMessage {
  font-size: 10px;
  color: red;
  padding: 5px 10px 5px 10px;
  background: #000;
}

/* flat-black */

@import url(https://fonts.googleapis.com/css?family=Lato);
html {
  height: 100%;
}

.formoid-flat-black {
  margin: 0 auto;
}

.formoid-flat-black>div,
.formoid-flat-black>.title {
  margin: 8px;
}

.formoid-flat-black .error-field .required {
  color: #FF9999;
}

.formoid-flat-black .error-field input,
.formoid-flat-black .error-field input[type=text],
.formoid-flat-black .error-field input[type=password],
.formoid-flat-black .error-field input[type=email],
.formoid-flat-black .error-field input[type=url],
.formoid-flat-black .error-field input[type=date],
.formoid-flat-black .error-field input[type=number],
.formoid-flat-black .error-field input[type=tel],
.formoid-flat-black .error-field textarea {
  border-color: #D893A1;
  background-color: #FBE6F2;
}

.formoid-flat-black label.error {
  display: inline-block;
  font-size: 0.9em;
}

.formoid-flat-black .error,
.formoid-flat-black .error #recaptcha_widget_div {
  padding: 3px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 4px;
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #c09853;
}

.formoid-flat-black .error h4 {
  color: #b94a48;
  margin: 0;
}

.formoid-flat-black .error .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}

.formoid-flat-black .column {
  float: left;
}

/* width = parseInt(100/columns.length)*/

.formoid-flat-black .column1 {
  width: 100%;
}

.formoid-flat-black .column2 {
  width: 50%;
}

.formoid-flat-black .column3 {
  width: 33%;
}

.formoid-flat-black .column4 {
  width: 25%;
}

.formoid-flat-black .column5 {
  width: 20%;
}

.formoid-flat-black .large {
 ...

JavaScript

/////////////////// Functions //////////////////
function monthDiff(d1, d2) {
  var months;
  months = (d2.getFullYear() - d1.getFullYear()) * 12;
  months -= d1.getMonth() + 1;
  months += d2.getMonth();
  return months <= 0 ? 0 : months;
}

function formatDate(d) {
  var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

  var today = d;
  today = new Date(today);
  var dd = today.getDate();
  //var mm = months[today.getMonth()+1];
  var mm = months[today.getMonth()];
  var yyyy = today.getFullYear();

  //if(dd<10){ dd = '0'+dd } 
  //if(mm<10){ mm = '0'+mm }

  return dd + '-' + mm + '-' + yyyy;
}

function todayFDate() {
  var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

  var today = new Date();
  var dd = today.getDate();
  //var mm = months[today.getMonth()+1];
  var mm = months[today.getMonth()];
  var yyyy = today.getFullYear();

  //if(dd<10){ dd = '0'+dd } 
  //if(mm<10){ mm = '0'+mm }

  return dd + '-' + mm + '-' + yyyy;
}

$("#futureDate").datepicker({
  yearRange: "-20:+100",
  changeMonth: true,
  changeYear: true,
  dateFormat: "d-MM-yy"
});

function checkDOB(fd) {
  var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

  var givenDate = fd;
  givenDate = new Date(givenDate);

  var d = givenDate.getDate();
  var m = months[givenDate.getMonth()];
  var y = givenDate.getFullYear();

  var currentDate = new Date();
  var yplus = currentDate.setDate(currentDate.getDate() + 364);

  if (givenDate < yplus) {
    results = 'Your Retirement Age should be at least 1 year from today.'
  } else {
    results = d + '-' + m + '-' + y
  }

  return results;
}

function pPer(A, r, n, t, pt) {

  var x = (r / n);
  var y = (n * t);
  var z = Math.pow(1 + x, y);
  var B = ((z - 1) /...