Skip to content

Commit 4df04c4

Browse files
codewizard13codewizard13
committed
CH 39: LOANCALC - START with files from previous ch
1 parent 32dcbb6 commit 4df04c4

File tree

6 files changed

+335
-0
lines changed

6 files changed

+335
-0
lines changed

‎SEC_4/prj-loancalc/ch_39/_final/app.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Listen for submit
2+
document.getElementById('loan-form').addEventListener('submit', function(e){
3+
// Hide results
4+
document.getElementById('results').style.display = 'none';
5+
6+
// Show loader
7+
document.getElementById('loading').style.display = 'block';
8+
9+
setTimeout(calculateResults, 2000);
10+
11+
e.preventDefault();
12+
});
13+
14+
// Calculate Results
15+
function calculateResults(){
16+
console.log('Calculating...');
17+
// UI Vars
18+
const amount = document.getElementById('amount');
19+
const interest = document.getElementById('interest');
20+
const years = document.getElementById('years');
21+
const monthlyPayment = document.getElementById('monthly-payment');
22+
const totalPayment = document.getElementById('total-payment');
23+
const totalInterest = document.getElementById('total-interest');
24+
25+
const principal = parseFloat(amount.value);
26+
const calculatedInterest = parseFloat(interest.value) / 100 / 12;
27+
const calculatedPayments = parseFloat(years.value) * 12;
28+
29+
// Compute monthly payment
30+
const x = Math.pow(1 + calculatedInterest, calculatedPayments);
31+
const monthly = (principal*x*calculatedInterest)/(x-1);
32+
33+
if(isFinite(monthly)) {
34+
monthlyPayment.value = monthly.toFixed(2);
35+
totalPayment.value = (monthly * calculatedPayments).toFixed(2);
36+
totalInterest.value = ((monthly * calculatedPayments)-principal).toFixed(2);
37+
38+
// Show results
39+
document.getElementById('results').style.display = 'block';
40+
41+
// Hide loader
42+
document.getElementById('loading').style.display = 'none';
43+
44+
} else {
45+
showError('Please check your numbers');
46+
}
47+
}
48+
49+
// Show Error
50+
function showError(error){
51+
// Hide results
52+
document.getElementById('results').style.display = 'none';
53+
54+
// Hide loader
55+
document.getElementById('loading').style.display = 'none';
56+
57+
// Create a div
58+
const errorDiv = document.createElement('div');
59+
60+
// Get elements
61+
const card = document.querySelector('.card');
62+
const heading = document.querySelector('.heading');
63+
64+
// Add class
65+
errorDiv.className = 'alert alert-danger';
66+
67+
// Create text node and append to div
68+
errorDiv.appendChild(document.createTextNode(error));
69+
70+
// Insert error above heading
71+
card.insertBefore(errorDiv, heading);
72+
73+
// Clear error after 3 seconds
74+
setTimeout(clearError, 3000);
75+
}
76+
77+
// Clear error
78+
function clearError(){
79+
document.querySelector('.alert').remove();
80+
}

‎SEC_4/prj-loancalc/ch_39/_final/img/loading.gif‎

14.4 KB
Loading

‎SEC_4/prj-loancalc/ch_39/_final/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Hello, world!</title>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
11+
<style>
12+
#loading, #results {
13+
display:none;
14+
}
15+
</style>
16+
</head>
17+
<body class="bg-dark">
18+
<div class="container">
19+
<div class="row">
20+
<div class="col-md-6 mx-auto">
21+
<div class="card card-body text-center mt-5">
22+
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
23+
<form id="loan-form">
24+
<div class="form-group">
25+
<div class="input-group">
26+
<span class="input-group-addon">$</span>
27+
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
28+
</div>
29+
</div>
30+
<div class="form-group">
31+
<div class="input-group">
32+
<span class="input-group-addon">%</span>
33+
<input type="number" class="form-control" id="interest" placeholder="Interest">
34+
</div>
35+
</div>
36+
<div class="form-group">
37+
<input type="number" class="form-control" id="years" placeholder="Years To Repay">
38+
</div>
39+
<div class="forn-group">
40+
<input type="submit" value="Calculate" class="btn btn-dark btn-block">
41+
</div>
42+
</form>
43+
<!-- LOADER -->
44+
<div id="loading">
45+
<img src="img/loading.gif" alt="">
46+
</div>
47+
<!-- RESULTS -->
48+
<div id="results" class="pt-4">
49+
<h5>Results</h5>
50+
<div class="form-group">
51+
<div class="input-group">
52+
<span class="input-group-addon">Monthly Payment</span>
53+
<input type="number" class="form-control" id="monthly-payment" disabled>
54+
</div>
55+
</div>
56+
57+
<div class="form-group">
58+
<div class="input-group">
59+
<span class="input-group-addon">Total Payment</span>
60+
<input type="number" class="form-control" id="total-payment" disabled>
61+
</div>
62+
</div>
63+
64+
<div class="form-group">
65+
<div class="input-group">
66+
<span class="input-group-addon">Total Interest</span>
67+
<input type="number" class="form-control" id="total-interest" disabled>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<!-- Optional JavaScript -->
77+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
78+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
79+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
80+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
81+
<script src="app.js"></script>
82+
</body>
83+
</html>

‎SEC_4/prj-loancalc/ch_39/loancalculator/app.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Listen for submit
2+
document.getElementById('loan-form').addEventListener('submit', calculateResults)
3+
4+
function calculateResults(e) {
5+
console.log('Calculating ...')
6+
// UI Input Vars
7+
const amount = document.getElementById('amount')
8+
const interest = document.getElementById('interest')
9+
const years = document.getElementById('years')
10+
11+
// UI Results Vars
12+
const monthlyPayment = document.getElementById('monthly-payment')
13+
const totalPayment = document.getElementById('total-payment')
14+
const totalInterest = document.getElementById('total-interest')
15+
16+
// Use parseFload to turn into decimal
17+
const principal = parseFloat(amount.value)
18+
const calculatedInterest = parseFloat(interest.value) / 100 / 12
19+
const calculatedPayments = parseFloat(years.value * 12)
20+
21+
// Compute Monthly Payments
22+
const x = Math.pow(1 + calculatedInterest, calculatedPayments)
23+
const monthly = (principal * x * calculatedInterest) / (x - 1)
24+
25+
// Validate
26+
if (isFinite(monthly)) {
27+
monthlyPayment.value = monthly.toFixed(2)
28+
totalPayment.value = (monthly * calculatedPayments).toFixed(2)
29+
totalInterest.value = ((monthly * calculatedPayments) - principal).toFixed(2)
30+
} else {
31+
// console.error('Please Check Your NUMBERS')
32+
33+
showError('Please check your numbers')
34+
}
35+
36+
e.preventDefault()
37+
}
38+
39+
// Show Error
40+
function showError(error) {
41+
// Create a div
42+
const errorDiv = document.createElement('div')
43+
44+
// Get elements
45+
const card = document.querySelector('.card')
46+
const heading = document.querySelector('.heading')
47+
48+
// Add class
49+
errorDiv.className = 'alert alert-danger' // Bootstrap classes
50+
51+
// Create text node and append to div
52+
errorDiv.appendChild(document.createTextNode(error))
53+
54+
// Insert error above heading
55+
card.insertBefore(errorDiv, heading)
56+
57+
// Clear error after 3 secs
58+
setTimeout(clearError, 3000)
59+
60+
}
61+
62+
63+
// Clear Error
64+
function clearError() {
65+
document.querySelector('.alert').remove()
66+
}

‎SEC_4/prj-loancalc/ch_39/loancalculator/img/loading.gif‎

14.4 KB
Loading

‎SEC_4/prj-loancalc/ch_39/loancalculator/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
13+
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
14+
15+
<title>Hello, world!</title>
16+
</head>
17+
18+
<body class="bg-dark">
19+
<div class="container">
20+
<div class="row">
21+
<div class="col-md-6 mx-auto">
22+
<div class="card card-body text-center mt-5">
23+
<h1 class="heading display-5 pb-3 fw-bold">Loan Calculator</h1>
24+
25+
<form id="loan-form">
26+
27+
<div class="form-group mb-3">
28+
<div class="input-group">
29+
<span class="input-group-text">$</span>
30+
<input type="number" class="form-control" id="amount" placeholder="Loan amount">
31+
</div>
32+
</div>
33+
34+
<div class="form-group mb-3">
35+
<div class="input-group">
36+
<span class="input-group-text">%</span>
37+
<input type="number" class="form-control" id="interest" placeholder="Interest">
38+
</div>
39+
</div>
40+
41+
<div class="form-group mb-3">
42+
<input type="number" class="form-control" id="years" placeholder="Years to Repay">
43+
</div>
44+
45+
<div class="form-group d-grid gap-2">
46+
<input type="submit" value="Calculate" class="btn btn-dark btn-block">
47+
</div>
48+
49+
</form>
50+
<!--/ loan-form -->
51+
52+
<!-- LOADER -->
53+
<!--
54+
<div id="loading">
55+
<img src="img/loading.gif" alt="">
56+
</div>
57+
-->
58+
<!-- RESULTS: (#GOTCHA: Don't need form tag because we are not submitting anything)-->
59+
<div id="results">
60+
<h5>Results</h5>
61+
<div class="form-group mb-3">
62+
<div class="input-group">
63+
<span class="input-group-text">Monthly Payment</span>
64+
<input type="number" class="form-control" id="monthly-payment" disabled>
65+
</div>
66+
</div>
67+
68+
<div class="form-group mb-3">
69+
<div class="input-group">
70+
<span class="input-group-text">Total Payment</span>
71+
<input type="number" class="form-control" id="total-payment" disabled>
72+
</div>
73+
</div>
74+
75+
<div class="form-group mb-3">
76+
<div class="input-group">
77+
<span class="input-group-text">Total Interest</span>
78+
<input type="number" class="form-control" id="total-interest" disabled>
79+
</div>
80+
</div>
81+
82+
</div>
83+
<!--/ results -->
84+
85+
</div>
86+
</div>
87+
</div>
88+
89+
</div>
90+
91+
<!-- Optional JavaScript; choose one of the two! -->
92+
93+
<!-- Option 1: Bootstrap Bundle with Popper -->
94+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
95+
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
96+
crossorigin="anonymous"></script>
97+
98+
<!-- Option 2: Separate Popper and Bootstrap JS -->
99+
<!--
100+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
101+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
102+
-->
103+
<script src="app.js"></script>
104+
</body>
105+
106+
</html>

0 commit comments

Comments
 (0)