Question

Create a webpage (the last picture has three potential offers not just 2). Use html, JavaScript and CSS where needed. All information needed is supplied by the picture.

Summary Create a dynamic web page that allows users to compare different financing offers for an automobile loan. Purchasers are often presented with different financing offers, and determining the best offer can be difficult. In particular, dealers often have promotions that offer either a lower interest rate or a cash incentive (sometimes called a manufacturer rebate) that reduces the amount financed. Submission Requirements Your web page must be submitted to the D2L as a ZIP, 7z, or TGZ archive. You must also demo your webpage to the instructor during office hours within 2 weeks after the D2L submission deadline Clarfications Some requirements are intentionally vague, and some may be unintentionally vague. Please post any questions about the requirements are requests for clarification to Piazza. Grading Grading for this extra credit assignment will functionality, good practices for HTML/CSS/JavaScript, and modern visual appearance. Please note that visual appearance may be subjective be based on This assignment should be completed individually, not as a group or with assistance from your classmates. Functionality The web page will allow a user to enter the purchase price for the vehicle

Answer 1

Hi,

Please follow the below steps to complete your assignment.

Step 1. Create 4 text fields and 1 "Add option" button in html page.
  
     <input type="text" id="purchase">

     <input type="text" id="cashIncentive">
     <input type="text" id="term">   
     <input type="text" id="rate">

      <input type="button" id="addoption" value="Add option">

Step 2. Validate text fields.

      var purchase = $("#purchase").val();
     if (purchase >= 0 && purchase <=100000) {
   alert("Please enter valid purchase price.")
      }
      var term = $("#term").val(); // monthly
       if (term >= 24 && term <=72) {
   alert("Please enter valid term in months.")
      }
      var interestRate = $("#rate").val();
       if (interestRate >= 0.0 && interestRate <=10.0) {
   alert("Please enter valid interest rate.")
      }
      var cashIncentive = $("#cashIncentive").val();

Step 3. Calculate monthly payment and total cost

   
        var purchase = $("#purchase").val();
   var term = $("#term").val(); // monthly
   var cashIncentive = $("#cashIncentive").val();
   var interestRate = $("#rate").val();

       if(cashIncentive != ""){
      purchase = purchase - cashIncentive;
   }


var termIntRatio = (interestRate/100)/12;
var termInterest = (termIntRatio*interestRate);
     var top = Math.pow((1+termIntRatio),term);
         var bottom = top -1;
         var sp = top / bottom;
         var monthly = ((purchase * termIntRatio) * sp);
var monthly = monthly.toFixed(2);
var totalcost = monthly*term;

Step 4. Create offers counter variable for count the offers on "Add option" button and remove offers for display Offer 1, Offer 2 etc.

Step 5. Use style="border : 2px solid" in <div> of particular offer for display in box.