using Javascript, if you need any more information please just let me know, I am very responsive CSC174 lab nit 02 (1) Protected Vizw Saved to this PC evin b File Home Insert Draw Design Layout References Mailings Review View Help Tell me what you want to do Share Comments PROIECTED VIEW Be caretul tles from the Internet can contain uses, Unless you noed to edit, It's sater to stay in Protacted view Enabla Editing 02 Lab sections There Is only one flle In thls project foan html When you open the loan html file in a browser, you should see something like this ( C ile C Users YAL20butxumernst each Node 'lecture, met ertoVlns UQ Entrr Laa Data Amt of the law 1 Toal pryat 4234 19 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 Chtml JavaScript 1 Loan Calculator style This is a css style sheet 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 th, td tvertical align top Calculated values in bold Chart has a simple border Don't center table cells 10 12 13 14 15 16 17 18 19 20 21 This is an HTML table with elements that allow the user to enter data and elements in which the program can display its results These elements have ds 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 Enter Loan Data td Loan Balance, Cumulative Equity, and Interest Payments x tr 23 24 25 26 27 28 2 9 30 31 32 tr Amount of the loan (S) td onchange calculate() Kcanvas id graph width 400 height 250 x canvasx td tr id score onchange calculate ( ) id years onchange calculate() id gRsede Credit Score Repayment period (years) zipcode (to find lenders) 34 loan htmlX ctd Total interest $ 43 45 The rest of this example is JavaScript code in the tag below Normally, this script would go in the document above but it is easier to understand here, after you've seen its HmL context 47 2 script use strict II Use ECMAScript 5 strict mode in browsers that support it 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 53 54 saves the user's data, displays links t enders, and draws a chart 56 57 58 59 function calculate) Look up the input and output elements in the document var amount document getElementById ( amount ) var score document getElementById( score ) var years document getElementById ( years ) var zipcode document getElementById( ode ) var payment document getElementById ( payment ) var total document getElementById( total ) var totalinterestdocument getElementById( totalinterest ) 63 Get the user's input from the input elements Assume it is all valid Convert nterest from a percentage to a decinal, and convert from an annual rate to a monthly rate Convert payment period in years to the number of monthly payments var principalparseFloat (amount value) var interest parseFloat (aRE value) 100 12 var payments par s e Float (years value) 12 69 7 1 73 74 Now compute the monthly payment figure loan html 82 83 8 4 85 86 87 FII in the output fields, rounding to 2 decimal places payment innerHTML morthy toFixed (2) total InnerHTML (monthly payments) toFixed (2) totalinterest innerHTML ((monthly payments) principal) toFixed (2) Save the user's input so we can restore it the next time they visit save (amount value, score value, years value, zipcode value) 8 9 Finally, chart loan balance, and interest and equity payments chart (principal, interest, monthly, payments) 90 93 else Result was Not a Number or infinite, which means the input was incomplete or invalid Clear any previously displayed output payment inne r HTML total innerHTML totalinterest inne rHTML chart) Erase the content of these elements 96 97 98 With no arguments, clears the chart 100 101 102 103 104 105 106 107 108 109 110 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) 7 Only do this if the browser supports it localstorage loan amount amount localStorage loan scorescore localStorage loan yearsyears localstorage loan zipcodezipcode Automatically attempt to restore input fields when the document first loads window onload function ( ) 114 If the browser supports localStorage and we have some stored data if (window localstorage localstorage loan amount) 116 Joan html 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 Chart monthly loan balance, interest and equity in an HTML 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 500 600 700 800 Chtml JavaScript 1 Loan Calculator style This is a css style sheet 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 th, td tvertical align top Calculated values in bold Chart has a simple border Don't center table cells 10 12 13 14 15 16 17 18 19 20 21 This is an HTML table with elements that allow the user to enter data and elements in which the program can display its results These elements have ds 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 Enter Loan Data td Loan Balance, Cumulative Equity, and Interest Payments x tr 23 24 25 26 27 28 2 9 30 31 32 tr Amount of the loan (S) td onchange calculate() Kcanvas id graph width 400 height 250 x canvasx td tr id score onchange calculate ( ) id years onchange calculate() id gRsede Credit Score Repayment period (years) zipcode (to find lenders) 34 loan htmlX ctd Total interest $ 43 45 The rest of this example is JavaScript code in the tag below Normally, this script would go in the document above but it is easier to understand here, after you've seen its HmL context 47 2 script use strict II Use ECMAScript 5 strict mode in browsers that support it 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 53 54 saves the user's data, displays links t enders, and draws a chart 56 57 58 59 function calculate) Look up the input and output elements in the document var amount document getElementById ( amount ) var score document getElementById( score ) var years document getElementById ( years ) var zipcode document getElementById( ode ) var payment document getElementById ( payment ) var total document getElementById( total ) var totalinterestdocument getElementById( totalinterest ) 63 Get the user's input from the input elements Assume it is all valid Convert nterest from a percentage to a decinal, and convert from an annual rate to a monthly rate Convert payment period in years to the number of monthly payments var principalparseFloat (amount value) var interest parseFloat (aRE value) 100 12 var payments par s e Float (years value) 12 69 7 1 73 74 Now compute the monthly payment figure loan html 82 83 8 4 85 86 87 FII in the output fields, rounding to 2 decimal places payment innerHTML morthy toFixed (2) total InnerHTML (monthly payments) toFixed (2) totalinterest innerHTML ((monthly payments) principal) toFixed (2) Save the user's input so we can restore it the next time they visit save (amount value, score value, years value, zipcode value) 8 9 Finally, chart loan balance, and interest and equity payments chart (principal, interest, monthly, payments) 90 93 else Result was Not a Number or infinite, which means the input was incomplete or invalid Clear any previously displayed output payment inne r HTML total innerHTML totalinterest inne rHTML chart) Erase the content of these elements 96 97 98 With no arguments, clears the chart 100 101 102 103 104 105 106 107 108 109 110 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) 7 Only do this if the browser supports it localstorage loan amount amount localStorage loan scorescore localStorage loan yearsyears localstorage loan zipcodezipcode Automatically attempt to restore input fields when the document first loads window onload function ( ) 114 If the browser supports localStorage and we have some stored data if (window localstorage localstorage loan amount) 116 Joan html 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 Chart monthly loan balance, interest and equity in an HTML 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

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Aug 28, 2024

using Javascript, if you need any more information please just let me know, I am very responsive. CSC174 lab nit 02 (1) Protected Vizw Saved

using Javascript, if you need any more information please just let me know, I am very responsive.

image text in transcribed

CSC174 lab nit 02 (1) Protected Vizw Saved to this PC evin b File Home Insert Draw Design Layout References Mailings Review View Help Tell me what you want to do Share Comments PROIECTED VIEW Be caretul- tles from the Internet can contain uses, Unless you noed to edit, It's sater to stay in Protacted view Enabla Editing 02 Lab sections. There Is only one flle In thls project: foan.html When you open the loan.html file in a browser, you should see something like this: (- C ile:// C: Users YAL20butxumernst each Node 'lecture, met ertoVlns :: UQ Entrr Laa Data Amt of the law 1 Toal pryat 4234 19 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 Chtml> JavaScript 1 Loan Calculator style> / This is a css style sheet: 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; } th, td tvertical-align: top; Calculated values in bold / Chart has a simple border Don't center table cells 10 12 13 14 15 16 17 18 19 20 21 This is an HTML table with elements that allow the user to enter data and elements in which the program can display its results These elements have ds 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 Enter Loan Data: td> x/tr> 23 24 25 26 27 28 2 9 30 31 32 tr Kcanvas id-"graph" width-"400" height-"250"x/canvasx/td/tr> id-"score" onchange-"calculate ( );"> id="years" onchange="calculate();"> id:"gRsede" Credit Score: 34 loan.htmlX ctd>Total interest: 43

Loan Balance, Cumulative Equity, and Interest Payments	Amount of the loan (S):/td	onchange="calculate();">	Repayment period (years):	zipcode (to find lenders):
$

45 !The rest of this example is JavaScript code in the CSC174 lab nit 02 (1) Protected Vizw Saved to this PC evin b File Home Insert Draw Design Layout References Mailings Review View Help Tell me what you want to do Share Comments PROIECTED VIEW Be caretul- tles from the Internet can contain uses, Unless you noed to edit, It's sater to stay in Protacted view Enabla Editing 02 Lab sections. There Is only one flle In thls project: foan.html When you open the loan.html file in a browser, you should see something like this: (- C ile:// C: Users YAL20butxumernst each Node 'lecture, met ertoVlns :: UQ Entrr Laa Data Amt of the law 1 Toal pryat 4234 19 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 Chtml> JavaScript 1 Loan Calculator style> / This is a css style sheet: 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; } th, td tvertical-align: top; Calculated values in bold / Chart has a simple border Don't center table cells 10 12 13 14 15 16 17 18 19 20 21 This is an HTML table with elements that allow the user to enter data and elements in which the program can display its results These elements have ds 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 Enter Loan Data: td> x/tr> 23 24 25 26 27 28 2 9 30 31 32 tr Kcanvas id-"graph" width-"400" height-"250"x/canvasx/td/tr> id-"score" onchange-"calculate ( );"> id="years" onchange="calculate();"> id:"gRsede" Credit Score: 34 loan.htmlX ctd>Total interest: 43

Loan Balance, Cumulative Equity, and Interest Payments	Amount of the loan (S):/td	onchange="calculate();">	Repayment period (years):	zipcode (to find lenders):
$

45 !The rest of this example is JavaScript code in the