House Affordability Calculator

Assessing the affordable amount for buying house based on loan

HTML

<form id="hac_form">
  <fieldset>
    <legend>House Affordability Calculator</legend>
    <label>Monthly Income (₹)</label>
    <input type="number" name="monthlyincome">
    <label>Loan Tenure (yrs)</label>
    <input type="number" name="loantenure">
    <label>Annual Increment (%)</label>
    <input type="text" name="annualincrement">
    <button type="submit">Calculate</button>
  </fieldset>
</form>
<h5>Conclusion</h5>
<ul id="hac_result"></ul>

CSS

body {
  font-family: Calibri, Arial, Tahoma;
}

label {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}

button {
  display: block;
  margin-top: 10px;
}

JavaScript

var controls = {},
  containers = {};

containers.hacform = document.getElementById('hac_form');
containers.hacresult = document.getElementById('hac_result');

controls.hacform = function(e) {
  e.preventDefault();
  var o = [], 
    d = serializeArray(containers.hacform);
  var mi = d.monthlyincome,
    yi = d.monthlyincome * 12,
    lt = d.loantenure,
    ai = d.annualincrement;
    
  o.push('Since, your monthly income is ₹' + mi + ', thus your yearly income would be ₹' + yi);
  o.push('Now, if your loan tenure will be ' + lt + ' years then you would earn ₹' + yi * lt + ' in that duration at stagnant income');
  o.push('You should only utilize 40% of your monthly income on Home Loan, thus you can invest only ₹' + mi * 0.4 + ' per month that would be ₹' + yi * 0.4 + ' per year');
  o.push('In ' + lt + ' years you can invest minimum ₹' + yi * 0.4 * lt + ', if your monthly income will remain stagnant');
  o.push('But usually your income will grow at ' + ai + '% per year,  that means you can invest maximum ₹'+ yi * 0.4 * lt * ai +' at stagnant yearly increment rate');

  containers.hacresult.innerHTML = '<li>' + o.join('</li><li>') + '</li>';
};

containers.hacform.addEventListener('submit', controls.hacform);

function serializeArray(form) {
  var field, l, s = [];
  if (typeof form == 'object' && form.nodeName == "FORM") {
    var len = form.elements.length;
    for (var i = 0; i < len; i++) {
      field = form.elements[i];
      if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
        if (field.type == 'select-multiple') {
          l = form.elements[i].options.length;
          for (j = 0; j < l; j++) {
            if (field.options[j].selected)
              s[s.length] = {
                name: field.name,
                value: field.options[j].value
              };
          }
        } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
...