HomeHomework HelpTextbooksTest PrepTextbook Answers
Zookal Homework Help

Homework Help

  1. Engineering
  2. Computer Science
  3. using javascript...

Question: using javascript...

Question details

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 users input, but based on users 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.0After 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 * /* Dont 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 3543 </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 |<!-- is easier to understand here, after youve seen its HTML context· --> 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 users 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 users 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 calculateloan.htmlx // Now compute the monthly payment figure var x Math . pow(I + interest, payments); var monthly (principal *xinterest)/(x-1); 76 // Math.pow() computes powers 79 80 81 // If the result İs a finitle number, the users 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 ((monthlypayments)-principal).toPixed (2) 84 87 89 89 // Save the users 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 users 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; 110loan.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.getElementByIdincode) .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 were 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, monthlypayments) .moveTo (paymentTox (0), amountToY (0)) g.lineTo (paymentToX (payments), /7 Start at lower left // Draw to upper right amountToY (monthly*payments)

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution