Question

1 Approved Answer

Posted on Sep 07, 2024

Java Script Professional, I need your help Modify this program so that the annual interest rate is not based on users input, but based on

Java Script Professional, I need your help

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

>=500

< 600

>=600

< 700

>=700

< 800

>=800

Interest Rate

10.0

8.0

6.0

4.0

3.5

3.0

html> <html> <head> <title>JavaScript Loan Calculatortitle> <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 Paymentsth>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();">Calculatebutton>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  elements, calculates  * loan payment information, displays the results in  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 // 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  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  if (arguments.length == 0 || !graph.getContext) return; // Get the "context" object for the  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>