using JS Modify this program so that the annual interest rate is not based on us

ID: 2246937 • Letter: U

Question

using JS

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

>=500

< 600

>=600

< 700

>=700

< 800

>=800

Interest Rate

10.0

8.0

6.0

4.0

3.5

3.0

<!DOCTYPE html>
<html>
<head>
<title>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>

<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"></td>
<td rowspan=8>
<canvas id="graph" width="400" height="250"></canvas></td></tr>
<tr><td>Credit Score:</td>
<td><input id="apr"></td></tr>
<tr><td>Repayment period (years):</td>
<td><input id="years"></td>
<tr><td>Zipcode (to find lenders):</td>
<td><input id="zipcode"></td>
<tr><th>Approximate Payments:</th>
<td><button>Calculate</button></td></tr>
<tr><td>Monthly payment:</td>
<td>$<span class="output" id="payment"></span></td></tr>
<tr><td>Total payment:</td>
<td>$<span class="output" id="total"></span></td></tr>
<tr><td>Total interest:</td>
<td>$<span class="output" id="totalinterest"></span></td></tr>
</table>

<script>
"use strict"; // 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 <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;

// Now compute the monthly payment figure.
var x = Math.pow(1 + interest, payments); // Math.pow() computes powers
var monthly = (principal*x*interest)/(x-1);

// 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);

// Save the user's input so we can restore it the next time they visit
save(amount.value, apr.value, years.value, zipcode.value);

// 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
}
}

// 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;
}
}

// 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;
}
};

// 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

// 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;

// 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

// 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)
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

// 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

// 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

// 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);
}

// 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>

// Now compute the monthly payment figure.
var x = Math.pow(1 + interest, payments); // Math.pow() computes powers
var monthly = (principal*x*interest)/(x-1);

// Save the user's input so we can restore it the next time they visit
save(amount.value, apr.value, years.value, zipcode.value);

// 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;

Credit Score

< 400

>=400

< 500

>=500

< 600

>=600

< 700

>=700

< 800

>=800

Interest Rate

10.0

8.0

6.0

4.0

3.5

3.0

Explanation / Answer

Hi..Please find the modified program

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Loan Calculator</title>

.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>

<th>Loan Balance, Cumulative Equity, and Interest Payments</th></tr>

<tr><td>Amount of the loan ($):</td>

<tr><td>Credit Score:</td>

<tr><td>Repayment period (years):</td>

<tr><td>Zipcode (to find lenders):</td>

<tr><th>Approximate Payments:</th>

<td><button>Calculate</button></td></tr>

<tr><td>Monthly payment:</td>

<tr><td>Total payment:</td>

<tr><td>Total interest:</td>

</table>

"use strict"; // Use ECMAScript 4 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 <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;

// Now compute the monthly payment figure.

var x = Math.pow(1 + interest, payments); // Math.pow() computes powers

var monthly = (principal*x*interest)/(x-1);

// 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);

// Save the user's input so we can restore it the next time they visit

save(amount.value, apr.value, years.value, zipcode.value);

// 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

}

// 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;

}

// 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;

}

};

// 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

// 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;

// 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

// 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.04));}

// 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

// 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,34); // Label it in green

// 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,40); // Legend entry

// 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.4,y-3,1,3); // Draw the tick

if (year == 1) g.fillText("Year", x, y-4); // Label the axis

if (year % 4 == 0 && year*12 !== payments) // Number every 4 years

g.fillText(String(year), x, y-4);

}

// 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.4, 3,1); // Draw the tick mark

g.fillText(String(ticks[i].toFixed(0)), // And label it.

rightEdge-4, y);

}

</script>

</body>

</html>