Question: I need help with this webpage. Every time the user clicks add option, it needs to create a new a new offer like displayed in
I need help with this webpage. Every time the user clicks add option, it needs to create a new a new offer like displayed in the first picture(up to a maximum of 3). The second picture shows the current output. The code for both the javascript and html is listed below the pictures. Each offer is displayed after the user presses the add option button up to a maximum of three. There shouldn't be three offers listed before the button if the user doesn't click the button three times.

extra_credit.html
| Financing offer details | |||||||||
| | |||||||||
script.js
function generateOption() { var initBalance = parseFloat(document.getElementById("purchPrice").value); var cashIncentive = parseFloat(document.getElementById("cashIncentive").value); var interestRatePercent = parseFloat(document.getElementById("interestRatePercent").value); var currBalance; var loanTerms = parseInt(document.getElementById("loanTerms").value); var monthlyPay = 1000; var html = ''; currBalance = initBalance; html += "
| Offer 1: | "; html +="X | "; html +="
| Interest Rate: | "; html += "#.##% | "; html += "
| Loan Term (months): | "; html += "## | "; html += "
| Monthly Payment: | "; html += "$###.## | "; html += "
| Total cost of ownership: | "; html += "$####.## | "; html += "
"; document.getElementById("offerDetails").innerHTML = html; } material design. Specifically, each financing option that displayed should be styled as a "card". Wireframe Purchase Price Financing Offer Details Cash Incentive: Interest Rate: Term (months): Add Option Offer 1 xOffer 2: Interest Rate: Loan Term (months): Monthly Payment: Total cost of Ownership: ###96 | | Interest Rate: ## | | Loan Term (months $####### | | Total cost of Owner 1
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
