I have created a webpage that adds offers each time the user clicks add option.

Q: I have created a webpage that adds offers each time the user clicks add option.

//Script.js //Added new function closeOption to close the offer //Modified generateOption to change other offers content function closeOption(offerId){ //Getting Offer div which was close to remove var element = document.getElementById(offerId); element.remove(); var i; for(i=offerId;i

ID: 3587925 • Letter: I

Question

I have created a webpage that adds offers each time the user clicks add option. I just have to add an x button that closes each of the offers when the user clicks it. I bolded what needs to be changed to a button(onclick) in the javascript as well as provided the other code for the project.

html

<!DOCTYPE html>
<html>
<head>
<title>Your title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" async></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="purchPrice">Purchase Price: </label>
</td>
<td>
<input type="text" name="purchPrice" id="purchPrice" value="1000" class="pprice"/>
</td>
</tr>
<tr>
<td colspan="2"> <div class="seperator"></div></td>
</tr>
<tr>
<td colspan="2">Financing offer details</td>
</tr>
<tr>
<td colspan="2">
<table border="1" cellpadding="10" cellspacing="0" class="innerTable">
<tr>
<td>
<label for="cashIncentive">Cash Incentive: </label>
</td>
<td>
<input type="text" name="cashIncentive" id="cashIncentive" value="1.2"/>
</td>
</tr>
<tr>
<td>
<label for="intRate">Interest Rate: </label>
</td>
<td>
<input type="text" name="intRate" id="intRate" value="5"/>
</td>
</tr>
<tr>
<td>
<label for="termInMonths">Term (months): </label>
</td>
<td>
<input type="text" name="termInMonths" id="termInMonths" value="5"/>
</td>
</tr>
<tr>
<td colspan="2"> <button>Add Option</button></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="seperator"></div>
<div class = "offerDetails" id="offerDetails"></div>

</div>
</body>
</html>

javascript

function generateOption()
{

var offerId = document.getElementById("offerDetails").children.length;

if(offerId < 3){
var initPurchPrice = parseFloat(document.getElementById("purchPrice").value);
var cashIncentive = parseInt(document.getElementById("cashIncentive").value);
var loanTerms = parseInt(document.getElementById("termInMonths").value);
var interestRate = parseFloat(document.getElementById("intRate").value);
var interestRatePerMonth = (interestRate/100)/loanTerms;
var calculation = Math.pow((1+interestRatePerMonth),loanTerms);
var finalPurchPrice = initPurchPrice - cashIncentive;
var monthlyPayment = finalPurchPrice*interestRatePerMonth*calculation/(calculation - 1);

var html = '';
html += "<div class='column item1'>";
html += "<table border='0' cellpadding='5' cellspacing='0' class='' width='100%'>";
html += "<tr>";
html += "<td align='left'>Offer "+(offerId+1)+":</td>";
html +="<td align='right'>X</td>";
html +="</tr>";
html +="<tr>";
html += "<td align='left'>Interest Rate:</td>";
html += "<td align='right'>"+ interestRate +"%</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Loan Term (months):</td>";
html += "<td align='right'>"+ loanTerms +"</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Monthly Payment:</td>";
html += "<td align='right'>$"+ monthlyPayment +"</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Total cost of ownership:</td>";
html += "<td align='right'>$"+ finalPurchPrice +"</td>";
html += "</tr>";
html += "</table>";
html += "</div>";
document.getElementById("offerDetails").insertAdjacentHTML('beforeend',html);
}else{
alert("You have max of 3 offers");
}

}

style css

body {
padding :20px;
}

div.container {
width: 100%;
}

.container div{
padding-top:15px;
}

.seperator{
border-bottom: 1.5px solid #aaafb3;
margin-bottom:10px;

}
.innerTable {
border: 2px solid #aaafb3;
border-collapse: separate;
border-spacing: 0;
margin-top: 2px;
}
td,th {border:none}

button {
background-color: white;
border: 1px solid #aaafb3;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}

.column{
float: left;
width: 32.1%;
height: auto;
margin-top: 5px;
}

.item1, .item2, .item3{
display: block;
border:1.5px solid #aaafb3;
}
.item2, .item3{
margin-left:18.5px;
}
.pprice{
width: 98%;
padding-bottom:5px;
border:1.5px solid #bbb2b2;
padding:5px;
}
.innerTable td input{
width: 95%;
padding-bottom:5px;
border:1.5px solid #bbb2b2;
padding:5px;
}
.offerDetails{
border: 1px solid red;
height: 173px;
width: 100%;
padding: 0;
}

Explanation / Answer

//Script.js
//Added new function closeOption to close the offer

//Modified generateOption to change other offers content

Navigate

I have created a structure that replicates a deck of cards (Deck)... now I need

I have created a website using PHP, connected to a database but I am getting err

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I have created a webpage that adds offers each time the user clicks add option.

Question

Explanation / Answer

Related Questions

Navigate