Ready to use home loan EMI calculator

I had promised myself that I would create a ready to use EMI calculator combining HTML, CSS & JavaScript.

Here it is! If you are a home-buyer – I really hope that you find it useful! I wrote a detailed blog on how I put together the JavaScript. You may find that useful if you would want to replicate the below app.

In this case, I reused the JavaScript that I wrote earlier & wrapped in under some HTML & CSS. The HTML & CSS bit was easy but extremely tedious. I wouldn’t get into the details just now.

For now, enjoy the calculator. I am also pasting the codes below the calculator! Feel free to use them & play around. Though there is no compulsion – I would be really pleased if you would backlink your experiment to this site !

The code had 3 parts to it :

• HTML ( That provided the structure of the app)
• CSS (that managed the styling)
• JS (that brought in the functionality)

Here are the code-bits:

The HTML for building a EMI Calculator:

The html block below will build the calculator without any styling or functionality. You need to link the CSS & JS file to get the calculator ready in it’s final form.

  <div class="outerShell">
    <H1>EMI Calculator for Homeloans</H1>
    <form name="loan-form" onsubmit="return calculator()">
    <div class='loanBlock'>
     Loan Amount<br>
     <input type=number id="amount" style="border-radius:5px"><br>
    </div>
     <div class='aprBlock'>
     Annual Percent Rate<br>
     <input type="number" name="apr" id="apr" style="border-radius:5px"><br>
     </div>
      <div class='tenureBlock'>
     Tenure<br>
     <input type=number name="tenure" id="tenure" style="border-radius:5px"><br>
     <br>
      </div>
      <div id=buttonBlock>
    <button style="border-radius:2px">Find Out</button>
      </div>
    </form>
    <P id="EMICapt"></P>
    <script src='script.js'> </script>
  </div>

The JavaScript for EMI calculation:

    function calculator() {
        const loanstruct = {
        loanAmount:document.getElementById("amount").value,
        annualInterestrate:document.getElementById("apr").value,
        loanDuration:document.getElementById("tenure").value
        };
      // Passing the object as the arguement. The function also returns an object that includes both EMI & Total
      console.log(loanstruct)
      function EMIVal2(loan){
          interest = loan.annualInterestrate/1200;
          let term = loan.loanDuration*12;
          let top = Math.pow((1+interest),term);
          let bottom = top - 1;
          let ratio = top/bottom;
          EMI = loan.loanAmount * interest * ratio;
          Total = EMI*term;
          const EMIObj = {
            EMI:EMI.toFixed(0),
            Total:Total.toFixed(0)
            };
          return EMIObj
      }
      console.log(EMIVal2(loanstruct));
      document.getElementById("EMICapt").innerHTML='<P><b>EMI: Rs. </b>' + EMIVal2(loanstruct).EMI + '<br>' + '<b> Total: Rs. </b>' + EMIVal2(loanstruct).Total +'</P>';

      return false
    }

The CSS for styling the Home-loan EMI calculator:

.divShell{
  background-color: antiquewhite
}

H1{
  text-align: center
}
form{
  border-radius: 25px;
  background-color: thistle;
  align-self: center;
  color: brown
  margin: 6px;
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 50px;
  padding-right: 50px;
  font-family: "Times New Roman", Times, serif;
}

.loanBlock{
  text-align: center;
  font-weight: bold;
  padding: 20px;
}

.aprBlock{
  text-align: center;
  font-weight: bold;
  padding: 20px;
}

.tenureBlock{
  text-align: center;
  font-weight: bold;
  padding: 20px;
}

.buttonBlock{
  text-align: center;
  padding-bottom: 5px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right:20px
}

button{
  position: relative;
  left: 42.5%;
  bottom: 25%;
  background-color: navy;
  color: white;
  padding: 10px;
  border-radius: 30px
}

#EMICapt{

  border-radius: 10px;
  background-color:antiquewhite;
  color: rgb(236, 17, 17);
  padding: 20px;
  text-align: center
}

FAQS : EMI Calculator Code