1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / startupfintech / application / views /
Filename : loan_calculator.php
back
<div class="container-fluid">
          <div class="page-title">
            <div class="row">
              <div class="col-6">
                <h3>Loan Calculator</h3>
              </div>
              <div class="col-6">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="index.html"> <i data-feather="home"></i></a></li>
                  <li class="breadcrumb-item">loan</li>
                  <li class="breadcrumb-item active">Loan Calculator </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid default-page">
          <div class="row">
            
            <div class="col-xl-5 col-lg-5">
              <div class="card">
                <div class="card-body">
                  <div class="product-info">
                    <h3>Loan Amount Calculate</h3>

                    <div class="product-group mt-5">
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="mb-3">
                            <h5>Loan Amount</h5><input class="form-control" id="lamount" value="0"></input>
                            <input class="slider mt-3 w-100" id="loan_amount" type="range" value="0" min="10000"
                              max="4000000" data-bs-original-title="" title=""
                              oninput="document.getElementById('lamount').value = this.value">
                              
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="mb-3">
                            <h5>Interest Rate</h5><input class="form-control" id="irate" value="0"></input>
                            <input class="slider mt-3 w-100" id="loan_amount" type="range" value="0" min="0" max="100"
                              data-bs-original-title="" title=""
                              oninput="document.getElementById('irate').value = this.value">
                          </div>

                        </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="mb-3">
                            <h5>Loan Tenure</h5><input class="form-control" id="tmonth" value="0"></input>
                            <input class="slider mt-3 w-100" id="loan_amount" type="range" value="0" min="0" max="100"
                              data-bs-original-title="" title=""
                              oninput="document.getElementById('tmonth').value = this.value">

                          </div>
                        </div>
                      </div>
                      <button class="btn btn-primary" onclick="cal_amount()">Calculate</button>
                    </div>


                  </div>
                </div>
              </div>



              

            </div>
            <div class="col-xl-3 col-lg-3">
              <div class="row">
                <div class="col-xl-12 col-sm-6 col-lg-12">
                  <div class="card value-chart bg-primary">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-6">
                          <div class="round-progress knob-block text-center">
                            <div class="progress-circle">
                              <input class="knob1" data-width="10" data-height="70" data-thickness=".3"
                                data-angleoffset="0" data-linecap="round" data-fgcolor="#534686" data-bgcolor="#C4C4C4"
                                value="62">
                            </div>
                          </div>
                        </div>
                        <div class="col-6">
                          <div class="valuechart-detail">
                            <div>
                              <p>Our Sale Value </p>
                              <h2>$7454.25</h2>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><span class="badge badge-primary">New</span>
                  </div>
                </div>
                <div class="col-xl-12 col-sm-6 col-lg-12">
                  <div class="card value-chart stock-value bg-secondary">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-6">
                          <div class="stock-value" id="stock-value"></div>
                        </div>
                        <div class="col-6">
                          <div class="valuechart-detail">
                            <div>
                              <p>Today Value</p>
                              <h2>$5263.04 </h2>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><span class="badge badge-primary">Hot </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4">
              <div class="beyo-line row">
                <div class="beyoline-header col-xl-12">
                  <div id="beyo-line"></div>
                </div>
                <div class="beyo-detail col-xl-12">
                  <h3>Beyond the Lines <span class="badge badge-primary">6 hours ago</span></h3>
                  <p>One Of the world,s brightest, young surf Srars, Kanoa lgarashi.</p>
                  <div class="date-history">
                    <ul>
                      <li><img class="img-fluid" src="./assets/images/dashboard/beyo-line/1.png" alt=""></li>
                      <li><img class="img-fluid" src="./assets/images/dashboard/beyo-line/2.png" alt=""></li>
                      <li><img class="img-fluid" src="./assets/images/dashboard/beyo-line/3.png" alt=""></li>
                      <li><img class="img-fluid" src="./assets/images/dashboard/beyo-line/4.png" alt=""></li>
                      <li>
                        <h2>+ 350</h2>
                      </li>
                    </ul>
                    <div class="date-lable">
                      <h3>10</h3>
                      <p>june</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-5 des-xl-100 box-col-100 col-lg-12">
              <div class="card investment-chart">
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-4">
                      <div class="investment-group">

                        <div class="chart-detail">
                          <h5>Loan EMI</h5>
                          <h2 class="amount__val">0</h2>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="investment-group">

                        <div class="chart-detail">
                          <h5>Total Interest Payable</h5>
                          <h2 id="int__payable">0</h2>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="investment-group">

                        <div class="chart-detail">
                          <h5>Total Payment</h5>
                          <h2 id="totalAmount">0</h2>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
		
<script>
    function cal_amount() {
      let loanAmount = Number(document.querySelector('#lamount').value);
      let interestRate = Number(document.querySelector('#irate').value);
      let tenureMonth = Number(document.querySelector('#tmonth').value);
      let intAmt = document.querySelector('#int__payable');
      let payAmount = document.querySelector('#totalAmount');
      let emiVal = document.querySelector('.amount__val');

      interestValue = interestRate / 1200;
      rVal = loanAmount * interestValue;
      rVal1 = Math.pow((1 + interestValue), tenureMonth)
      rVal2 = rVal * rVal1
      fVal = rVal1 - 1

      let emiAmount = rVal2 / fVal;
      let emiAmountf = Math.round(emiAmount);

      let tAmount = Math.round(emiAmount * tenureMonth)
      let amountPayable = Math.round(tAmount - loanAmount);



      emiVal.innerHTML = `₹ ${emiAmountf} /- mo`
      intAmt.innerHTML = `₹ ${amountPayable}`
      payAmount.innerHTML = `₹ ${tAmount}`

    }

  </script>