# Javascript Project to Build Car Auto Loan Calculator With Down Payment in Browser Using HTML5 and CSS3

Using this tutorial you will successfully complete the task of Javascript Project to Build Car Auto Loan Calculator With Down Payment in Browser Using HTML5 and CSS3 Let’s go

## Javascript Project to Build Car Auto Loan Calculator With Down Payment in Browser Using HTML5 and CSS3

``````<div class="col-md-12 paymentCalc">

<div class="col-md-6">

<form id="loanCalc" action="" method="get" class="">
<div class="col-md-12">
<div class="form-group">
<label for="vehiclePrice">Vehicle Price</label>
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '\$1');" class="form-control" id="vehiclePrice" placeholder="Vehicle Price">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="downPayment">Down Payment</label>
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '\$1');" class="form-control" id="downPayment" placeholder="Down Payment" value="0">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '\$1');" class="form-control" id="tradeValue" placeholder="Trade In Value" value="0">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="intRate">Interest Rate</label>
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '\$1');" class="form-control" id="intRate" placeholder="Interest Rate" value="3.25">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="loanTerm">Loan Term</label>
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '\$1');" class="form-control" id="loanTerm" placeholder="Loan Term (ex: 36 Months)">
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<a href="#" class="calcBtn" onclick="calculatePayments()" id="calculate" value="Calulate">Calculate</a>
</div>
</form>
</div>
<div class="col-md-6">
<div id="paymentResults">

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

<style>
body{
}

#loanCalc input{
display:block;
}

.clearfix{
clear:both!important;
}

.paymentCalc{
background-color: #f7f7f7;
border: 1px solid #d3d3d3;
overflow: auto;
}

.calcBtn{
display:inline-block;
background:#c62233;
color:#fff;
text-align:center;
}

#paymentResults{
display: none;
background:#fff;
border:1px solid lightgrey;
margin-top:88px;
}
</style>

<script>

function calculatePayments(){
var vehiclePrice = document.getElementById('vehiclePrice').value,
loanTerm = document.getElementById('loanTerm').value,
intRate = document.getElementById('intRate').value,
downPayment = document.getElementById('downPayment').value,
amount = parseInt(vehiclePrice),
months = parseInt(loanTerm),
down  = parseInt(downPayment),
annInterest = parseFloat(intRate),
monInt = annInterest / 1200;

if(!amount){
return;
}

if(!months){
months = 60;
loanTerm = document.getElementById('loanTerm').value = '60';
}

if(!downPayment){
down = 0;
downPayment = document.getElementById('downPayment').value = '0';
}

}

if(!annInterest){
annInterest = 3.25;
intRate = document.getElementById('intRate').value = '3.25';
}

var calc = ((monInt + (monInt / (Math.pow((1 + monInt), months) -1))) * (amount - (totalDown || 0))).toFixed(2);

var paymentResults = document.getElementById('paymentResults');
paymentResults.style.display = 'block';
paymentResults.innerHTML = '';
var results = document.createElement('div');
results.innerHTML = '<h1 style="text-align:center">Estimated Monthly Payment is:<br/></h1>' + '<h3 style="text-align:center">
+ calc + '/Month</h3>';

paymentResults.append(results);

}

</script>``````

## Final Words

We hope you find the Javascript Project to Build Car Auto Loan Calculator With Down Payment in Browser Using HTML5 and CSS3. What to do if there are any issues with this article? Then ask through the comment section.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on: