Please Help!! I need to fill in my HTML code using the following instructions bu
ID: 3843715 • Letter: P
Question
Please Help!! I need to fill in my HTML code using the following instructions but I am having trouble.
For this you will:
1. Complete the missing HTML components.
2. Implement the necessary functions by completing the missing code sections, indicates in the skeleton document.
Here is the skeleton code:
<html>
</head>
<body data-gr-c-s-loaded="true">
<script>
/* Complete the following functions */
function totalPayment(p,r,n) {
// return the result of the formula:
// ((principal * rate) / (1 + rate)^-n) * n
}
function monthlyPayment(p,r,n) {
// return the result of the formula
// principal * ((rate * (1 + rate)^n) / ((1+r)^n - 1))
}
function calculateMortgage() {
// First, test whether both the mortgageLoan and the interestRate are not empty, otherwise
// just clear monthlyPaymentBox and mortgageTotalBox values
// obtain the principal - mortgageLoan - , ((rate / 100) * / 12) - interestRate - and the (term * 12) -mortgageTerms -
// check that the principal is greater than 9999 before even computing any value
// update the monthlyPaymentBox and the mortgageTotalBox input boxes
}
function validateValue(box) {
// if the value within the box is NOT a number, clear the box
}
/* End of javascript section */
</script>
<div id="mortgageDiv">
<h1>Mortgage Calculator</h1>
<table id="fields">
<tbody><tr>
<th>Mortgage Amount</th>
<th>Mortgage Rate</th>
<th>Mortgage Term</th>
</tr>
<tr>
<td>
<span>$</span>
<!-- replace this -->
</td>
<td>
<!-- replace this -->
<span>%</span>
</td>
<td>
<select id="mortgageTerms">
<!-- replace this -->
<!-- replace this -->
<!-- replace this -->
<!-- replace this -->
<!-- replace this -->
</select>
</td>
</tr>
</tbody></table>
<div>
<table id="results">
<tbody><tr>
<td>Total Mortgage</td>
<td>
<span>$</span>
<!-- replace this -->
</td>
</tr>
<tr>
<td>Monthly Payments</td>
<td>
<span>$</span>
<!-- replace this -->
</td>
</tr>
</tbody></table>
</div>
</div>
<style>
body {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
h1 {
padding: 20px;
}
#mortgageDiv {
min-width: 40em;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
width: 50%;
margin: 5em auto;
border: solid 1px rgb(230,230,230);
}
#fields {
background: rgb(232, 235, 239);
padding: 20px;
}
#fields th {
color: rgb(140,140,140);
}
#fields, #fields li {
width: 100%;
text-align: left;
}
#results {
width: 100%;
padding: 20px;
}
input[type=text], select {
padding: 5px;
font-size: 120%;
width: 80%;
background: none;
border: none;
border-bottom: 1px solid rgb(180,180,180);
}
select {
text-align: center;
}
input:focus, select:focus {
outline-width: 0;
}
#results td:first-child {
width: 70%;
}
#results tr td {
padding: 10px;
}
#results input {
border: none;
margin: none;
padding: none;
}
</style>
</body></html>
Complete the following three sections. Pay close attention to the examples and copy each name (variables, functions, etc) exactly as shown below (you will still need to write the instruction correctly) 1. Complete the HTML sections attributes are in bold line 52. Add an input field type text with the following properties id mortgageLoan on key up listener calls validateValue function for this box on change listener calls calculateMortgage line 55. Add an input field type text with the following properties id interestRate on key up calls validateValue for this box on change calls calculateMortgage lines 60-64 for the select element, add the following "options" 10 value 10 15 Value 15 20 value 20 30 value 30 40 Value 40 line 76 Add an input field type text with following properties id mortgage TotalBox must be a read only field line 83 Add an input field type text with the following properties id monthlyPaymentBox must be a read only fieldExplanation / Answer
<html>
</head>
<body data-gr-c-s-loaded="true">
<script>
/* Complete the following functions */
function totalPayment(p,r,n) {
return monthlyPayment(p,r,n)*n;
}
function monthlyPayment(p,r,n) {
r=(r/100/12);
var x = Math.pow(1 + r, n);
return (p*x*r)/(x-1);
}
function calculateMortgage() {
p= document.getElementById("mortgageLoan").value;
r=document.getElementById("mortgageRate").value ;
n=document.getElementById("mortgageTerms").value ;
document.getElementById("monthlyPayments").value = Math.round(monthlyPayment(p,r,n));
document.getElementById("totalMortgage").value =Math.round( totalPayment(p,r,n));
}
function validateValue(id) {
x = document.getElementById(id).value;
if (isNaN(x) || x < 1 ) {
document.getElementById(id).value = "";
}
}
/* End of javascript section */
</script>
<div id="mortgageDiv">
<h1>Mortgage Calculator</h1>
<table id="fields">
<tbody><tr>
<th>Mortgage Amount</th>
<th>Mortgage Rate</th>
<th>Mortgage Term</th>
</tr>
<tr>
<td>
<span>$</span>
<input type="text" id="mortgageLoan"><br>
</td>
<td>
<input type="text" id="mortgageRate">
<span>%</span>
</td>
<td>
<select id="mortgageTerms">
<option value="10">10
<option value="15">15
<option value=20>20
<option value=30>30
<option value=40>40
<option value=60>60
</select>
</td>
</tr>
</tbody></table>
<div>
<table id="results">
<tbody><tr>
<td>Total Mortgage</td>
<td>
<span>$</span>
<input type="text" id="totalMortgage" readonly><br>
</td>
</tr>
<tr>
<td>Monthly Payments</td>
<td>
<span>$</span>
<input type="text" id="monthlyPayments" readonly><br>
</td>
</tr>
</tbody></table>
</div>
</div>
<style>
body {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
h1 {
padding: 20px;
}
#mortgageDiv {
min-width: 40em;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
width: 50%;
margin: 5em auto;
border: solid 1px rgb(230,230,230);
}
#fields {
background: rgb(232, 235, 239);
padding: 20px;
}
#fields th {
color: rgb(140,140,140);
}
#fields, #fields li {
width: 100%;
text-align: left;
}
#results {
width: 100%;
padding: 20px;
}
input[type=text], select {
padding: 5px;
font-size: 120%;
width: 80%;
background: none;
border: none;
border-bottom: 1px solid rgb(180,180,180);
}
select {
text-align: center;
}
input:focus, select:focus {
outline-width: 0;
}
#results td:first-child {
width: 70%;
}
#results tr td {
padding: 10px;
}
#results input {
border: none;
margin: none;
padding: none;
}
</style>
</body></html>