Skip to content

Commit 081a7b3

Browse files
Johnn222Johnn222
committed
VehicleLoanCalculator
1 parent 4bee546 commit 081a7b3

File tree

3 files changed

+170
-0
lines changed

3 files changed

+170
-0
lines changed

‎VehicleLoanCalculator/Johnn222/calculator.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body{
2+
padding:20px;
3+
}
4+
5+
#loanCalc input{
6+
padding:10px;
7+
display:block;
8+
}
9+
10+
11+
.paymentCalc{
12+
background-color: #f7f7f7;
13+
border: 1px solid #d3d3d3;
14+
padding: 35px 35px;
15+
overflow: auto;
16+
position: relative;
17+
left: 220;
18+
width:fit-content;
19+
justify-content: center;
20+
}
21+
22+
.calcBtn{
23+
display:inline-block;
24+
background:#c62233;
25+
color:#fff;
26+
text-align:center;
27+
padding:10px 20px;
28+
border-radius: 3px;
29+
30+
}
31+
32+
#paymentResults{
33+
display: none;
34+
background:#fff;
35+
padding: 30px 60px 36px 60px;
36+
border:1px solid lightgrey;
37+
margin-top:88px;
38+
}
39+
40+
.output{
41+
text-shadow: 2px;
42+
font-weight: bold;
43+
font-size: large;
44+
width: 170;
45+
align-items: flex-end;
46+
text-align: right;
47+
}
48+
49+
label{
50+
font-size: medium;
51+
}
52+
53+

‎VehicleLoanCalculator/Johnn222/calculator.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
function calculatePayments(){
2+
var vehiclePrice = document.getElementById('vehiclePrice').value,
3+
loanTerm = document.getElementById('loanTerm').value,
4+
intRate = document.getElementById('intRate').value,
5+
downPayment = document.getElementById('downPayment').value,
6+
tradeValue = document.getElementById('tradeValue').value,
7+
amount = parseInt(vehiclePrice),
8+
months = parseInt(loanTerm),
9+
down = parseInt(downPayment),
10+
trade = parseInt(tradeValue),
11+
totalDown = down + trade
12+
annInterest = parseFloat(intRate),
13+
monInt = annInterest / 1200;
14+
15+
if(!amount){
16+
alert('Please add a loan amount');
17+
return;
18+
}
19+
20+
if(!months){
21+
months = 60;
22+
loanTerm = document.getElementById('loanTerm').value = '60';
23+
}
24+
25+
if(!downPayment){
26+
down = 0;
27+
downPayment = document.getElementById('downPayment').value = '0';
28+
}
29+
30+
if(!trade){
31+
trade = 0;
32+
tradeValue = document.getElementById('tradeValue').value = '0';
33+
}
34+
35+
if(!annInterest){
36+
annInterest = 3.25;
37+
intRate = document.getElementById('intRate').value = '3.25';
38+
}
39+
40+
41+
var calc = ((monInt + (monInt / (Math.pow((1 + monInt), months) -1))) * (amount - (totalDown || 0))).toFixed(2);
42+
var total = (calc * months).toFixed(2);
43+
document.getElementById("MonthlyPayment").value = calc;
44+
document.getElementById("TTLPayment").value = total;
45+
46+
}

‎VehicleLoanCalculator/Johnn222/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<head>
3+
<title>Loan Calculator</title>
4+
<link rel="stylesheet" href="calculator.css">
5+
</head>
6+
<body>
7+
<div class="col-md-12 paymentCalc">
8+
9+
<form id="loanCalc" onsubmit="return false">
10+
<div class="col-md-12">
11+
<h2>Loan Calculator</h2>
12+
<div class="form-group">
13+
<label for="vehiclePrice">Vehicle Price ($)</label>
14+
<input type="text" onfocus="this.value=''" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" id="vehiclePrice" placeholder="Vehicle Price">
15+
</div>
16+
</div>
17+
<div class="col-md-6">
18+
<div class="form-group">
19+
<label for="downPayment">Down Payment ($)</label>
20+
<input type="text" onfocus="this.value=''" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" id="downPayment" placeholder="Down Payment" value="0">
21+
</div>
22+
</div>
23+
<div class="col-md-6">
24+
<div class="form-group">
25+
<label for="tradeValue">Trade In Value ($)</label>
26+
<input type="text" onfocus="this.value=''" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" id="tradeValue" placeholder="Trade In Value" value="0">
27+
</div>
28+
</div>
29+
<div class="col-md-6">
30+
<div class="form-group">
31+
<label for="intRate">Interest Rate</label>
32+
<input type="text" onfocus="this.value=''" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" id="intRate" placeholder="Interest Rate" value="3.25">
33+
</div>
34+
</div>
35+
<div class="col-md-6">
36+
<div class="form-group">
37+
<label for="loanTerm">Loan Term (Month)</label>
38+
<input type="text" onfocus="this.value=''" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" class="form-control" id="loanTerm" placeholder="Loan Term (ex: 36 Months)">
39+
</div>
40+
</div>
41+
<br/>
42+
<div class="submit"></div>
43+
<div class="col-md-12">
44+
<input type="submit" class="calcBtn" onclick="calculatePayments()" id="calculate" value="Calulate">
45+
</div>
46+
<br/>
47+
<div>
48+
<table>
49+
<tr>
50+
<td>
51+
<label for="output">Monthly Payment ($)</label>
52+
<input type="text" class ="output" id="MonthlyPayment" disabled>
53+
</td>
54+
</tr>
55+
<tr>
56+
<td>
57+
<label for="output">Total Payment ($)</label>
58+
<input type="text" class ="output" id="TTLPayment" disabled>
59+
</td>
60+
</tr>
61+
</table>
62+
</div>
63+
</form>
64+
65+
</div>
66+
67+
68+
</div>
69+
<script src="/calculator.js"></script>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)