| Interest Rate<\/p> <\/td> | 10.0<\/p> <\/td> | 8.0<\/p> <\/td> | 6.0<\/p> <\/td> | 4.0<\/p> <\/td> | 3.5<\/p> <\/td> | 3.0<\/p> <\/td> <\/tr> <\/tbody> <\/table> JavaScript Loan Calculator<\/title> <style> \/* This is a CSS style sheet: it adds style to the program output *\/ .output { font-weight: bold; } \/* Calculated values in bold *\/ #payment { text-decoration: underline; } \/* For element with id=\"payment\" *\/ #graph { border: solid black 1px; } \/* Chart has a simple border *\/ th, td { vertical-align: top; } \/* Don't center table cells *\/ <\/style> <\/head> <body> <!-- This is an HTML table with <input> elements that allow the user to enter data and <span> elements in which the program can display its results. These elements have ids like \"interest\" and \"years\". These ids are used in the JavaScript code that follows the table. Note that some of the input elements define \"onchange\" or \"onclick\" event handlers. These specify strings of JavaScript code to be executed when the user enters data or clicks. --> <table> <tr><th>Enter Loan Data:<\/th> <td><\/td> <th>Loan Balance, Cumulative Equity, and Interest Payments<\/th><\/tr> <tr><td>Amount of the loan ($):<\/td> <td><input id=\"amount\" onchange=\"calculate();\"><\/td> <td rowspan=8> <canvas id=\"graph\" width=\"400\" height=\"250\"><\/canvas><\/td><\/tr> <tr><td>Annual interest (%):<\/td> <td><input id=\"apr\" onchange=\"calculate();\"><\/td><\/tr> <tr><td>Repayment period (years):<\/td> <td><input id=\"years\" onchange=\"calculate();\"><\/td> <tr><td>Zipcode (to find lenders):<\/td> <td><input id=\"zipcode\" onchange=\"calculate();\"><\/td> <tr><th>Approximate Payments:<\/th> <td><button onclick=\"calculate();\">Calculate<\/button><\/td><\/tr> <tr><td>Monthly payment:<\/td> <td>$<span id=\"payment\"><\/span><\/td><\/tr> <tr><td>Total payment:<\/td> <td>$<span id=\"total\"><\/span><\/td><\/tr> <tr><td>Total interest:<\/td> <td>$<span id=\"totalinterest\"><\/span><\/td><\/tr> <\/table><\/p> <p><!-- The rest of this example is JavaScript code in the <script> tag below --> <!-- Normally, this script would go in the document <head> above but it --> <!-- is easier to understand here, after you've seen its HTML context. --> <script> \"use strict\"; \/\/ Use ECMAScript 5 strict mode in browsers that support it<\/p> <p>\/* * This script defines the calculate() function called by the event handlers * in HTML above. The function reads values from <input> elements, calculates * loan payment information, displays the results in <span> elements. It also * saves the user's data, displays links to lenders, and draws a chart. *\/ function calculate() { \/\/ Look up the input and output elements in the document var amount = document.getElementById(\"amount\"); var apr = document.getElementById(\"apr\"); var years = document.getElementById(\"years\"); var zipcode = document.getElementById(\"zipcode\"); var payment = document.getElementById(\"payment\"); var total = document.getElementById(\"total\"); var totalinterest = document.getElementById(\"totalinterest\"); \/\/ Get the user's input from the input elements. Assume it is all valid. \/\/ Convert interest from a percentage to a decimal, and convert from \/\/ an annual rate to a monthly rate. Convert payment period in years \/\/ to the number of monthly payments. var principal = parseFloat(amount.value); var interest = parseFloat(apr.value) \/ 100 \/ 12; var payments = parseFloat(years.value) * 12;<\/p> <p> \/\/ Now compute the monthly payment figure. var x = Math.pow(1 + interest, payments); \/\/ Math.pow() computes powers var monthly = (principal*x*interest)\/(x-1);<\/p> <p> \/\/ If the result is a finite number, the user's input was good and \/\/ we have meaningful results to display if (isFinite(monthly)) { \/\/ Fill in the output fields, rounding to 2 decimal places payment.innerHTML = monthly.toFixed(2); total.innerHTML = (monthly * payments).toFixed(2); totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);<\/p> <p> \/\/ Save the user's input so we can restore it the next time they visit save(amount.value, apr.value, years.value, zipcode.value);<\/p> <p> \/\/ Finally, chart loan balance, and interest and equity payments chart(principal, interest, monthly, payments); } else { \/\/ Result was Not-a-Number or infinite, which means the input was \/\/ incomplete or invalid. Clear any previously displayed output. payment.innerHTML = \"\"; \/\/ Erase the content of these elements total.innerHTML = \"\" totalinterest.innerHTML = \"\"; chart(); \/\/ With no arguments, clears the chart } }<\/p> <p>\/\/ Save the user's input as properties of the localStorage object. Those \/\/ properties will still be there when the user visits in the future function save(amount, apr, years, zipcode) { if (window.localStorage) { \/\/ Only do this if the browser supports it localStorage.loan_amount = amount; localStorage.loan_apr = apr; localStorage.loan_years = years; localStorage.loan_zipcode = zipcode; } }<\/p> <p>\/\/ Automatically attempt to restore input fields when the document first loads. window.onload = function() { \/\/ If the browser supports localStorage and we have some stored data if (window.localStorage && localStorage.loan_amount) { document.getElementById(\"amount\").value = localStorage.loan_amount; document.getElementById(\"apr\").value = localStorage.loan_apr; document.getElementById(\"years\").value = localStorage.loan_years; document.getElementById(\"zipcode\").value = localStorage.loan_zipcode; } };<\/p> <p>\/\/ Chart monthly loan balance, interest and equity in an HTML <canvas> element. \/\/ If called with no arguments then just erase any previously drawn chart. function chart(principal, interest, monthly, payments) { var graph = document.getElementById(\"graph\"); \/\/ Get the <canvas> tag graph.width = graph.width; \/\/ Magic to clear and reset the canvas element<\/p> <p> \/\/ If we're called with no arguments, or if this browser does not support \/\/ graphics in a <canvas> element, then just return now. if (arguments.length == 0 || !graph.getContext) return;<\/p> <p> \/\/ Get the \"context\" object for the <canvas> that defines the drawing API var g = graph.getContext(\"2d\"); \/\/ All drawing is done with this object var width = graph.width, height = graph.height; \/\/ Get canvas size<\/p> <p> \/\/ These functions convert payment numbers and dollar amounts to pixels function paymentToX(n) { return n * width\/payments; } function amountToY(a) { return height-(a * height\/(monthly*payments*1.05));}<\/p> <p> \/\/ Payments are a straight line from (0,0) to (payments, monthly*payments) g.moveTo(paymentToX(0), amountToY(0)); \/\/ Start at lower left g.lineTo(paymentToX(payments), \/\/ Draw to upper right amountToY(monthly*payments)); g.lineTo(paymentToX(payments), amountToY(0)); \/\/ Down to lower right g.closePath(); \/\/ And back to start g.fillStyle = \"#f88\"; \/\/ Light red g.fill(); \/\/ Fill the triangle g.font = \"bold 12px sans-serif\"; \/\/ Define a font g.fillText(\"Total Interest Payments\", 20,20); \/\/ Draw text in legend<\/p> <p> \/\/ Cumulative equity is non-linear and trickier to chart var equity = 0; g.beginPath(); \/\/ Begin a new shape g.moveTo(paymentToX(0), amountToY(0)); \/\/ starting at lower-left for(var p = 1; p <= payments; p++) { \/\/ For each payment, figure out how much is interest var thisMonthsInterest = (principal-equity)*interest; equity += (monthly - thisMonthsInterest); \/\/ The rest goes to equity g.lineTo(paymentToX(p),amountToY(equity)); \/\/ Line to this point } g.lineTo(paymentToX(payments), amountToY(0)); \/\/ Line back to X axis g.closePath(); \/\/ And back to start point g.fillStyle = \"green\"; \/\/ Now use green paint g.fill(); \/\/ And fill area under curve g.fillText(\"Total Equity\", 20,35); \/\/ Label it in green<\/p> <p> \/\/ Loop again, as above, but chart loan balance as a thick black line var bal = principal; g.beginPath(); g.moveTo(paymentToX(0),amountToY(bal)); for(var p = 1; p <= payments; p++) { var thisMonthsInterest = bal*interest; bal -= (monthly - thisMonthsInterest); \/\/ The rest goes to equity g.lineTo(paymentToX(p),amountToY(bal)); \/\/ Draw line to this point } g.lineWidth = 3; \/\/ Use a thick line g.stroke(); \/\/ Draw the balance curve g.fillStyle = \"black\"; \/\/ Switch to black text g.fillText(\"Loan Balance\", 20,50); \/\/ Legend entry<\/p> <p> \/\/ Now make yearly tick marks and year numbers on X axis g.textAlign=\"center\"; \/\/ Center text over ticks var y = amountToY(0); \/\/ Y coordinate of X axis for(var year=1; year*12 <= payments; year++) { \/\/ For each year var x = paymentToX(year*12); \/\/ Compute tick position g.fillRect(x-0.5,y-3,1,3); \/\/ Draw the tick if (year == 1) g.fillText(\"Year\", x, y-5); \/\/ Label the axis if (year % 5 == 0 && year*12 !== payments) \/\/ Number every 5 years g.fillText(String(year), x, y-5); }<\/p> <p> \/\/ Mark payment amounts along the right edge g.textAlign = \"right\"; \/\/ Right-justify text g.textBaseline = \"middle\"; \/\/ Center it vertically var ticks = [monthly*payments, principal]; \/\/ The two points we'll mark var rightEdge = paymentToX(payments); \/\/ X coordinate of Y axis for(var i = 0; i < ticks.length; i++) { \/\/ For each of the 2 points var y = amountToY(ticks[i]); \/\/ Compute Y position of tick g.fillRect(rightEdge-3, y-0.5, 3,1); \/\/ Draw the tick mark g.fillText(String(ticks[i].toFixed(0)), \/\/ And label it. rightEdge-5, y); } } <\/script> <\/body> <\/html><\/p> <p> <\/p>",
"transcribed_text": "",
"related_book": {
"title": null,
"isbn": null,
"edition": null,
"authors": null,
"cover_image": null,
"uri": null,
"see_more_uri": ""
},
"free_related_book": {
"isbn": "",
"uri": "",
"name": "",
"edition": ""
},
"question_posted": "2024-08-15 03:05:02",
"see_more_questions_link": "\/study-help\/questions\/computer-science-programming-2022-November-11",
"step_by_step_answer": "The Answer is in the image, click to view ...",
"students_also_viewed": [
{
"url": "\/study-help\/essentials-federal-taxation\/lo7-compare-the-individual-amt-with-the-basic-features-of-1973220",
"description": "LO.7 Compare the individual AMT with the basic features of the corporate AMT.",
"stars": 0
},
{
"url": "\/watson-waterbed-works-inc-has-an-ebit-of-275-million",
"description": "Watson Waterbed Works Inc. has an EBIT of $2.75 million, can borrow at 15% interest, and pays combined state and federal income taxes of 40%. It currently has no debt and is capitalized by equity of...",
"stars": 3
},
{
"url": "\/study-help\/questions\/create-table-student-stuid-char3-primary-key-gpa-decimal3-2-8975299",
"description": "create table Student (StuID char(3) primary key, GPA decimal(3, 2)); insert into Student values ('s1', 3.66), ('s2', 2.87), ('s3', 2.91), ('s4', 4), ('s5', 3.5); create table ProjAssignment (Pno...",
"stars": 3
},
{
"url": "\/study-help\/questions\/inath-1475-calc-i-hill-4-find-each-derivative-3953196",
"description": "InATH 1475 Calc I. Hill # 4. Find Each derivative or 2 1 = + * ) 6 2 3) Sect 3 tan X ( x - x - 1)y 4 = Cos (X \"+ X+ 1J ( Sinx + 1 ) 65c ( x - 1)",
"stars": 3
},
{
"url": "\/study-help\/questions\/explain-the-process-of-mbo-8829123",
"description": "Explain the process of MBO",
"stars": 3
},
{
"url": "\/study-help\/questions\/what-is-the-hch-bond-angle-in-a-methane-molecule-8829124",
"description": "What is the H-C-H bond angle in a methane molecule? [A] 120 [B] 75 [C] 109.5 [D] 150",
"stars": 3
},
{
"url": "\/study-help\/questions\/which-of-the-following-metals-finds-its-use-as-a-8829125",
"description": "Which of the following metals finds its use as a radiocontrast agent in X-ray imaging? [A] Scandium [B] Lithium [C] Barium [D] Titanium",
"stars": 3
},
{
"url": "\/study-help\/questions\/what-are-the-structures-formed-by-the-soap-molecules-during-8829126",
"description": "What are the structures formed by the soap molecules, during cleansing, known as? [A] Stearates [B] Esters [C] Micelles [D] Tubes",
"stars": 3
},
{
"url": "\/study-help\/questions\/which-one-of-the-following-materials-is-very-hard-and-8829127",
"description": "Which one of the following materials is very hard and very ductile? [A] Carborundum [B] Tungsten [C] Cast iron [D] Nichrome",
"stars": 3
}
],
"next_back_navigation": {
"previous": "\/study-help\/questions\/following-are-several-figures-reported-for-allister-and-barone-as-8062560",
"next": "\/study-help\/questions\/analyzing-unearned-revenue-liabilities-fset-the-metropolitan-opera-8062562"
},
"breadcrumbs": [
{
"name": "Study help",
"link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers"
},
{
"name": "Computer Science",
"link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers\/computer-science"
},
{
"name": "Databases",
"link": "https:\/\/www.solutioninn.com\/study-help\/questions\/computer-science-databases"
},
{
"name": "Modify this program so that the annual interest rate is not based",
"link": "https:\/\/www.solutioninn.com\/study-help\/questions\/modify-this-program-so-that-the-annual-interest-rate-is-8062561"
}
],
"skill_details": {
"skill_id": "656",
"skill_name": "Databases",
"parent_id": "8"
}
} |