Last active
July 29, 2021 12:42
-
-
Save henideepak/84d4c9fff5522a402edc826d45afde2e to your computer and use it in GitHub Desktop.
EMI Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen - EMI Calculator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css"> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <body> | |
| <h2>EMI Calculator</h2> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-7"> | |
| <h4><span class="label label-primary">Loan Amount is <strong><span class="" id="la_value">260000</span></strong></span></h4> | |
| <div id="la"></div> | |
| <h4><span class="label label-danger">No. of Month is <strong><span class="" id="nm_value">36</span></strong></span></h4> | |
| <div id="nm"></div> | |
| <h4><span class="label label-warning">Rate of Interest [ROI] is <strong><span class="" id="roi_value">10.2</span></strong></span></h4> | |
| <div id="roi"></div> | |
| </div> | |
| <div class="col-md-5"> | |
| <div class="alert alert-info col-md-5"> | |
| <strong>Monthly EMI</strong><br> | |
| <button class="btn btn-success btn-lg" id="emi" type="button">8,413.90</button><br> | |
| </div> | |
| <div class="alert alert-info col-md-5"> | |
| <strong>Total Interest</strong><br> | |
| <button class="btn btn-warning btn-lg" id="tbl_int" type="button">42,900.53</button><br> | |
| </div> | |
| <div class="alert alert-info col-md-5"> | |
| <strong>Payable Amount</strong><br> | |
| <button class="btn btn-info btn-lg" id="tbl_full" type="button">302,900.53</button><br> | |
| </div> | |
| <div class="alert alert-info col-md-5"> | |
| <strong>Interest Percentage</strong><br> | |
| <button class="btn btn-info btn-lg" id="tbl_int_pge" type="button">14.16 %</button><br> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <div id="container" class="col-md-5" data-highcharts-chart="0"><div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 644px; height: 400px; text-align: left; line-height: normal; z-index: 0; left: 0.166626px; top: 0.300049px;"><svg version="1.1" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="644" height="400"><desc>Created with Highcharts 4.1.5</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="624" height="338"></rect></clipPath></defs><rect x="0" y="0" width="644" height="400" strokewidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g class="highcharts-button" style="cursor:default;" stroke-linecap="round" transform="translate(610,10)"><title>Chart context menu</title><rect x="0.5" y="0.5" width="24" height="22" strokewidth="1" fill="white" stroke="none" stroke-width="1" rx="2" ry="2"></rect><path fill="#E0E0E0" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" stroke="#666" stroke-width="3" zindex="1"></path><text x="0" zindex="1" style="color:black;fill:black;" transform="translate(0,12)"></text></g><g class="highcharts-series-group" zindex="3"><path fill="rgba(124,181,236,0.25)" d="M 0 0"></path><g class="highcharts-series highcharts-tracker" visibility="visible" zindex="0.1" transform="translate(10,47) scale(1 1)" style="cursor:pointer;"><path fill="#7cb5ec" d="M 311.9706710586679 25.00000298675974 A 144 144 0 1 1 199.97588563938427 78.52018014098562 L 312 169 A 0 0 0 1 0 312 169 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#434348" d="M 200.06642145621583 78.40820128520187 A 144 144 0 0 1 311.7999868889177 25.000138907166303 L 312 169 A 0 0 0 0 0 312 169 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path></g><g class="highcharts-markers" visibility="visible" zindex="0.1" transform="translate(10,47) scale(1 1)"></g></g><text x="322" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;fill:#333333;width:580px;" y="24"><tspan>EMI Calculator</tspan></text><g class="highcharts-data-labels highcharts-tracker" visibility="visible" zindex="6" transform="translate(10,47) scale(1 1)" opacity="1" style="cursor:pointer;"><path fill="none" d="M 391.89202528365956 326.0579018989866 C 386.89202528365956 326.0579018989866 383.44871377636485 318.8368489381137 378.71416045383467 308.90790111691337 L 373.9796071313045 298.97895329571304" stroke="#000000" stroke-width="1" visibility="inherit"></path><path fill="none" d="M 232.10797471634044 11.942098101013414 C 237.10797471634044 11.942098101013414 240.55128622363506 19.16315106188636 245.28583954616528 29.09209888308666 L 250.0203928686955 39.02104670428696" stroke="#000000" stroke-width="1" visibility="inherit"></path><g zindex="1" style="cursor:pointer;" transform="translate(397,316)" visibility="inherit"><text x="5" zindex="1" style="font-size: 11px; font-weight: bold; color: rgb(0, 0, 0); fill: rgb(0, 0, 0); text-shadow: 0px 0px 6px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);" transform="translate(0,16)"><tspan style="font-weight:bold">Loan</tspan><tspan dx="0">: 85.8 %</tspan></text></g><g zindex="1" style="cursor:pointer;" transform="translate(133,2)" visibility="inherit"><text x="0" zindex="1" style="font-size: 11px; font-weight: bold; color: rgb(0, 0, 0); fill: rgb(0, 0, 0); text-shadow: 0px 0px 6px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);" transform="translate(0,16)"><tspan style="font-weight:bold">Interest</tspan><tspan dx="0">: 14.2 %</tspan></text></g></g><g class="highcharts-legend" zindex="7"><g zindex="1"><g></g></g></g><g class="highcharts-tooltip" zindex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(389,-9999)" opacity="0" visibility="visible"><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isshadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)" width="134" height="44"></path><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isshadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)" width="134" height="44"></path><path fill="none" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isshadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)" width="134" height="44"></path><path fill="rgba(249, 249, 249, .85)" d="M 3.5 0.5 L 131.5 0.5 C 134.5 0.5 134.5 0.5 134.5 3.5 L 134.5 41.5 C 134.5 44.5 134.5 44.5 131.5 44.5 L 3.5 44.5 C 0.5 44.5 0.5 44.5 0.5 41.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#7cb5ec" stroke-width="1"></path><text x="8" zindex="1" style="font-size:12px;color:#333333;fill:#333333;" transform="translate(0,20)"><tspan style="font-size: 10px">Loan</tspan><tspan style="fill:#7cb5ec" x="8" dy="15">●</tspan><tspan dx="0"> Amount: </tspan><tspan style="font-weight:bold" dx="0">260 000</tspan></text></g><text x="634" text-anchor="end" zindex="8" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg></div></div> | |
| <div class="box-body table-responsive" id="datatable"> | |
| <table width="100%" class="table table-striped table-bordered" id="illustrate"><thead><tr class="success"><th>Payment No.</th><th>Begining Balance</th><th>EMI</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></tr></thead><tbody><tr><td>1</td><td>260000.00</td><td>8413.90</td><td>6203.90</td><td>2210.00</td><td>253796.10</td></tr><tr><td>2</td><td>253796.10</td><td>8413.90</td><td>6256.63</td><td>2157.27</td><td>247539.47</td></tr><tr><td>3</td><td>247539.47</td><td>8413.90</td><td>6309.81</td><td>2104.09</td><td>241229.66</td></tr><tr><td>4</td><td>241229.66</td><td>8413.90</td><td>6363.45</td><td>2050.45</td><td>234866.21</td></tr><tr><td>5</td><td>234866.21</td><td>8413.90</td><td>6417.54</td><td>1996.36</td><td>228448.67</td></tr><tr><td>6</td><td>228448.67</td><td>8413.90</td><td>6472.09</td><td>1941.81</td><td>221976.58</td></tr><tr><td>7</td><td>221976.58</td><td>8413.90</td><td>6527.10</td><td>1886.80</td><td>215449.48</td></tr><tr><td>8</td><td>215449.48</td><td>8413.90</td><td>6582.58</td><td>1831.32</td><td>208866.90</td></tr><tr><td>9</td><td>208866.90</td><td>8413.90</td><td>6638.53</td><td>1775.37</td><td>202228.37</td></tr><tr><td>10</td><td>202228.37</td><td>8413.90</td><td>6694.96</td><td>1718.94</td><td>195533.41</td></tr><tr><td>11</td><td>195533.41</td><td>8413.90</td><td>6751.87</td><td>1662.03</td><td>188781.54</td></tr><tr><td>12</td><td>188781.54</td><td>8413.90</td><td>6809.26</td><td>1604.64</td><td>181972.28</td></tr><tr><td>13</td><td>181972.28</td><td>8413.90</td><td>6867.14</td><td>1546.76</td><td>175105.14</td></tr><tr><td>14</td><td>175105.14</td><td>8413.90</td><td>6925.51</td><td>1488.39</td><td>168179.63</td></tr><tr><td>15</td><td>168179.63</td><td>8413.90</td><td>6984.37</td><td>1429.53</td><td>161195.26</td></tr><tr><td>16</td><td>161195.26</td><td>8413.90</td><td>7043.74</td><td>1370.16</td><td>154151.52</td></tr><tr><td>17</td><td>154151.52</td><td>8413.90</td><td>7103.61</td><td>1310.29</td><td>147047.91</td></tr><tr><td>18</td><td>147047.91</td><td>8413.90</td><td>7163.99</td><td>1249.91</td><td>139883.92</td></tr><tr><td>19</td><td>139883.92</td><td>8413.90</td><td>7224.89</td><td>1189.01</td><td>132659.03</td></tr><tr><td>20</td><td>132659.03</td><td>8413.90</td><td>7286.30</td><td>1127.60</td><td>125372.73</td></tr><tr><td>21</td><td>125372.73</td><td>8413.90</td><td>7348.23</td><td>1065.67</td><td>118024.50</td></tr><tr><td>22</td><td>118024.50</td><td>8413.90</td><td>7410.69</td><td>1003.21</td><td>110613.81</td></tr><tr><td>23</td><td>110613.81</td><td>8413.90</td><td>7473.68</td><td>940.22</td><td>103140.13</td></tr><tr><td>24</td><td>103140.13</td><td>8413.90</td><td>7537.21</td><td>876.69</td><td>95602.92</td></tr><tr><td>25</td><td>95602.92</td><td>8413.90</td><td>7601.28</td><td>812.62</td><td>88001.64</td></tr><tr><td>26</td><td>88001.64</td><td>8413.90</td><td>7665.89</td><td>748.01</td><td>80335.75</td></tr><tr><td>27</td><td>80335.75</td><td>8413.90</td><td>7731.05</td><td>682.85</td><td>72604.70</td></tr><tr><td>28</td><td>72604.70</td><td>8413.90</td><td>7796.76</td><td>617.14</td><td>64807.94</td></tr><tr><td>29</td><td>64807.94</td><td>8413.90</td><td>7863.03</td><td>550.87</td><td>56944.91</td></tr><tr><td>30</td><td>56944.91</td><td>8413.90</td><td>7929.87</td><td>484.03</td><td>49015.04</td></tr><tr><td>31</td><td>49015.04</td><td>8413.90</td><td>7997.27</td><td>416.63</td><td>41017.77</td></tr><tr><td>32</td><td>41017.77</td><td>8413.90</td><td>8065.25</td><td>348.65</td><td>32952.52</td></tr><tr><td>33</td><td>32952.52</td><td>8413.90</td><td>8133.80</td><td>280.10</td><td>24818.72</td></tr><tr><td>34</td><td>24818.72</td><td>8413.90</td><td>8202.94</td><td>210.96</td><td>16615.78</td></tr><tr><td>35</td><td>16615.78</td><td>8413.90</td><td>8272.67</td><td>141.23</td><td>8343.11</td></tr><tr><td>36</td><td>8343.11</td><td>8413.90</td><td>8342.98</td><td>70.92</td><td>0.13</td></tr></tbody></table> | |
| </div> | |
| </div> | |
| <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://code.highcharts.com/highcharts.js"></script> | |
| <script src="https://code.highcharts.com/modules/exporting.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> | |
| <script id="rendered-js"> | |
| $(document).ready(function () { | |
| $("#la").slider({ | |
| value: 5000000, | |
| min: 0, | |
| max: 100000000, | |
| step: 1000000, | |
| slide: function(event, data) { | |
| $("#la_value").html(data.value.toFixed(0)) | |
| calculateEMI(); | |
| } | |
| }); | |
| $("#roi").slider({ | |
| value: 7, | |
| min: 0, | |
| max: 15, | |
| step: 0.01, | |
| slide: function(event, data) { | |
| $("#nm_value").html(data.value.toFixed(0)); | |
| calculateEMI(); | |
| } | |
| }); | |
| $("#nm").slider({ | |
| value: 30, | |
| min: 0, | |
| max: 30, | |
| step: 1, | |
| slide: function(event, data) { | |
| $("#roi_value").html(data.value.toFixed(2)); | |
| calculateEMI(); | |
| } | |
| }); | |
| function calculateEMI() { | |
| var loanAmount = $("#la_value").html(); | |
| var numberOfMonths = $("#nm_value").html(); | |
| var rateOfInterest = $("#roi_value").html(); | |
| var monthlyInterestRatio = rateOfInterest / 100 / 12; | |
| var top = Math.pow(1 + monthlyInterestRatio, numberOfMonths); | |
| var bottom = top - 1; | |
| var sp = top / bottom; | |
| var emi = loanAmount * monthlyInterestRatio * sp; | |
| var full = numberOfMonths * emi; | |
| var interest = full - loanAmount; | |
| var int_pge = interest / full * 100; | |
| $("#tbl_int_pge").html(int_pge.toFixed(2) + " %"); | |
| //$("#tbl_loan_pge").html((100-int_pge.toFixed(2))+" %"); | |
| var emi_str = emi.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| var loanAmount_str = loanAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| var full_str = full.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| var int_str = interest.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| $("#emi").html(emi_str); | |
| $("#tbl_emi").html(emi_str); | |
| $("#tbl_la").html(loanAmount_str); | |
| $("#tbl_nm").html(numberOfMonths); | |
| $("#tbl_roi").html(rateOfInterest); | |
| $("#tbl_full").html(full_str); | |
| $("#tbl_int").html(int_str); | |
| var detailDesc = "<thead><tr class='success'><th>Payment No.</th><th>Begining Balance</th><th>EMI</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></thead><tbody>"; | |
| var bb = parseInt(loanAmount); | |
| var int_dd = 0;var pre_dd = 0;var end_dd = 0; | |
| for (var j = 1; j <= numberOfMonths; j++) {if (window.CP.shouldStopExecution(0)) break; | |
| int_dd = bb * (rateOfInterest / 100 / 12); | |
| pre_dd = emi.toFixed(2) - int_dd.toFixed(2); | |
| end_dd = bb - pre_dd.toFixed(2); | |
| detailDesc += "<tr><td>" + j + "</td><td>" + bb.toFixed(2) + "</td><td>" + emi.toFixed(2) + "</td><td>" + pre_dd.toFixed(2) + "</td><td>" + int_dd.toFixed(2) + "</td><td>" + end_dd.toFixed(2) + "</td></tr>"; | |
| bb = bb - pre_dd.toFixed(2); | |
| }window.CP.exitedLoop(0); | |
| detailDesc += "</tbody>"; | |
| $("#illustrate").html(detailDesc); | |
| $('#container').highcharts({ | |
| chart: { | |
| plotBackgroundColor: null, | |
| plotBorderWidth: null, | |
| plotShadow: false }, | |
| title: { | |
| text: 'EMI Calculator' }, | |
| tooltip: { | |
| //pointFormat: '{series.name}: <b>{point.value}%</b>' | |
| }, | |
| plotOptions: { | |
| pie: { | |
| allowPointSelect: true, | |
| cursor: 'pointer', | |
| dataLabels: { | |
| // enabled: true, | |
| color: '#000000', | |
| connectorColor: '#000000', | |
| format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, | |
| series: [{ | |
| type: 'pie', | |
| name: 'Amount', | |
| data: [ | |
| ['Loan', eval(loanAmount)], | |
| ['Interest', eval(interest.toFixed(2))]] }] }); | |
| } | |
| calculateEMI(); | |
| }); | |
| //# sourceURL=pen.js | |
| </script> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment