-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
239 lines (197 loc) · 10.6 KB
/
Copy pathcode.html
File metadata and controls
239 lines (197 loc) · 10.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Debtree: A Coding Challange</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Allan:wght@400;700&family=Bebas+Neue&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<!-- Devicons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<!-- Prism CSS -->
<link rel="stylesheet" href="/css/prism.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<header>
<nav id="mainNav" class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="/index.html">
<img src="/img/Base Logo Vector Files Blue Red.svg" height="50" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon-mrb">
<i class="bi bi-list"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/app.html">App</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/code.html">The Code</a>
</li>
<li class="nav-item">
<!-- Change This Before Publishing -->
<a class="nav-link" href="https://github.com/MattBridges/debtree">The Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mattbridgesportfolio.netlify.app/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="content container">
<div class="row">
<h1 class="border-bottom botder-2 border-dark">The Code</h1>
<!-- The Source Code -->
<div class="col-12 col-lg-8">
<pre class="line-numbers">
<code class="language-js">
// Get the Inputs-Entry
function GetValues(){
//Get inputs
let loanAmount =parseInt(document.getElementById('loanAmount').value);
let termLength = parseInt(document.getElementById('termLength').value);
let interestRate = parseFloat(document.getElementById('interestRate').value);
CalculateTotals(loanAmount,interestRate,termLength);
}
// Calculate the results
function CalculateTotals(loanAmt, interest, termLength){
let loanData=[];
//Get Initial Values
let payment = CalculateTotalMonthlyPayment(loanAmt,interest,termLength);
let currentPrincipal = 0;
let currentInterest = 0;
let totalInterest = 0;
let balance = loanAmt;
//loop through each month
for(let i=1;i<=termLength;i++){
currentInterest = CalculateInterestPayment(balance,interest);
currentPrincipal = payment-currentInterest;
totalInterest +=currentInterest;
balance -= currentPrincipal;
let monthlyData = {
month:i,
payment:payment,
principal:currentPrincipal,
interest:currentInterest,
totalInterest:totalInterest,
balance:balance
}
loanData.push(monthlyData);
}
DisplayTotalResults(loanData);
}
// Display Results
function DisplayTotalResults(loanPmtData){
let totalPrincipal = parseFloat(document.getElementById('loanAmount').value);
let totalInterest = parseFloat(loanPmtData[loanPmtData.length-1].totalInterest);
let totalCost = parseFloat(totalPrincipal)+parseFloat(totalInterest);
document.getElementById('totalPayment').textContent = parseFloat(loanPmtData[0].payment)
.toLocaleString('en-US', {style:'currency',currency:'USD'});
document.getElementById('totalPrincipal').textContent = totalPrincipal
.toLocaleString('en-US', {style:'currency',currency:'USD'});
document.getElementById('totalInterest').textContent = totalInterest
.toLocaleString('en-US', {style:'currency',currency:'USD'});
document.getElementById('totalCost').textContent = totalCost
.toLocaleString('en-US', {style:'currency',currency:'USD'});
/*-------------------------Build Table--------------------------------*/
let resultsTable = document.getElementById('resultsTableBody');
const resultsRowTemplate = document.getElementById('resultsRowTemplate');
//Clear the table
resultsTable.innerHTML='';
//Loop through each payment to build the chart
for(let i = 0; i < loanPmtData.length; i++){
let resultsRow = document.importNode(resultsRowTemplate.content,true);
let currentMonth = loanPmtData[i];
let resultCells = resultsRow.querySelectorAll('td');
//Build row
resultCells[0].textContent = currentMonth.month;
resultCells[1].textContent= currentMonth.payment.toFixed(2);
resultCells[2].textContent=currentMonth.principal.toFixed(2);
resultCells[3].textContent=currentMonth.interest.toFixed(2);
resultCells[4].textContent=currentMonth.totalInterest.toFixed(2);
resultCells[5].textContent= Math.abs(currentMonth.balance).toFixed(2);
//Append new row to the results table
resultsTable.appendChild(resultsRow);
}
}
// Provided Formulas
function CalculateTotalMonthlyPayment(amountLoaned, rate, numberOfMonths){
return (amountLoaned*(rate/1200))/(1-(1+rate/1200)**-numberOfMonths);
}
function CalculateInterestPayment(previousRemainingBalance, rate){
return previousRemainingBalance*(rate/1200)
}
</code>
</pre>
</div>
<div class="col-12 col-lg-4">
<p>In this challange we were given formulas to break down the costs over the entire life of a loan.</p>
<h5><code class="code-writeup">GetValues()</code></h5>
<p>GetValues is our entry point where we get all of the input values and pass them to our function to calculate all of our date.</p>
<h5><code class="code-writeup">CalculateTotals()</code></h5>
<p>Once we get our inputs, we initialize an object to save all of our data to be displayed later. We loop from month one till the input value for the loan term, creating an object for each month of the loan and pushing this monthly data into our loanData array. Once we have finished calculating the data we hand it off to our display function that handles adding the data to the page.</p>
<h5><code class="code-writeup">DisplayTotalResults()</code></h5>
<p>Finaly after our data for the loan has been calculated we display it to the page. First we grab all of our needed elements in the page, then set the quick results card at the top of the page to the correct values, converting the values to display as US Dollar currency. After the quick results card is done we create a table for the month by month breakdown of the loan. To do this we loop through our loanData array and create a row that displays the data for each month object. To ensure this is displays correctly we use <code>.toFixed(2)</code> on each of our data points rounding the calculated value to 2 decimal points.</p>
</div>
</div>
</main>
<footer class="container-fluid py-3">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 align-items-center order-last order-lg-first">
<div class="col text-center text-lg-start ">©2023 Matt Bridges</div>
<div class="col text-center">
<img src="/img/Light_Grey_Signature_Long.svg" height="40" alt="">
</div>
<div class="col d-flex justify-content-center justify-content-lg-end my-2">
<a href="https://www.linkedin.com/in/themattbridges/" target="_blank" class="socialicons"><i
class="bi bi-linkedin"></i></a>
<a href="https://twitter.com/MattBridgesDev" target="_blank" class="socialicons"><i
class="bi bi-twitter"></i></a>
<a href="https://www.instagram.com/mattbridgesdev/" target="_blank" class="socialicons"><i
class="bi bi-instagram"></i></a>
<a href="https://github.com/MattBridges" target="_blank" class="socialicons"><i
class="bi bi-github"></i></a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- Prism Script -->
<script src="/js/prism.js"></script>
<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true
})
</script>
</body>
</html>