Event Listeners Go to the co_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded:...


Event Listeners


Go to theco_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded:



  1. Runs the calcCart() function.

  2. Add an event handler to the modelQty field in the cart form that runs the calcCart() function when the field value is changed.

  3. A for loop that loops through every option in the group of shipping option buttons, adding an event handler to run the calcCart() function when each option button is clicked.


JavaScript Functions


Create the calcCart() function to calculate the cost of the customer’s order using field values in the cart form. Within the calcCart() function do the following:



  1. Create a variable named orderCost that is equal to the cost of the espresso machine stored in the modelCost field multiplied by the quantity of machines ordered as stored in the modelQty field. Display the value of the orderCost variable in the orderCost field, formatted as U.S. currency. (Hint: Use the formatUSCurrency() function.)

  2. Create a variable named shipCost equal to the value of the selected shipping option from the group of shipping option buttons multiplied by the quantity of machines ordered. Display the value of the shipCost variable in the shippingCost field, formatted with a thousands separator and to two decimals places. (Hint: Use the formatNumber() function.)

  3. In the subTotal field, display the sum of orderCost and shipCost formatted with a thousands separator and to two decimal places.

  4. Create a variable named salesTax equal to 0.05 times the sum of the orderCost and shipCost variables. Display the value of the salesTax variable in the salesTax field, formatted with a thousands separator and to two decimal places.

  5. In the cartTotal field, display the sum of the orderCost, shipCost, and salesTax variables. Format the value as U.S. currency.

  6. Store the label text of the shipping option selected by the user from the shipping field in the hidden shippingType field.



java script-------------------------------------------------------------




"use strict";



/*

   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

   Tutorial 13

   Review Assigment



   Shopping Cart Form Script


   Author:

   Date:


   Filename: co_cart.js


  Function List

   =============


   calcCart()

      Calculates the cost of the customer order


   formatNumber(val, decimals)

      Format a numeric value, val, using the local

      numeric format to the number of decimal

      places specified by decimals


   formatUSACurrency(val)

      Formats val as U.S.A. currency


*/



window.addEventListener("load",function () {

    calcCart();

    var cart = document.forms.cart;

    cart.elements.modelQty.onchange = calcCart;



    var shippingOptions = document.querySelectorAll('input[name="shipping"]');

    for (var i = 0;i <>

        shippingOptions[i].onclick = calcCart;

    }



});



function calcCart() {

    var cart = document.forms.cart;

    var machineCost = cart.elements.modelCost.value;

    var qIndex = cart.elements.modelQty.selectedIndex;

    var qty = cart.elements.modelQty[qIndex].value;



    var orderCost = machineCost * qty;

    cart.elements.orderCost.value = formatUSCurrency(orderCost);



    var shipCost = document.querySelector('input[name="shipping"]:checked').value*qty;

    cart.elements.shippingCost.value = formatNumber(shipCost);



    cart.elements.subTotal.value = formatNumber(orderCost+shipCost, 2);





    var salesTax = 0.05*(orderCost+shipCost);

    cart.elements.salesTax.value = formatNumber(salesTax,2);



    cart.elements.cartTotal.value = formatUSCurrency(orderCost+shipCost+salesTax);



}





function formatNumber(val, decimals) {

    return val.toLocaleString(undefined, {

        minimumFractionDigits: decimals,

        maximumFractionDigits: decimals

    });

}



function formatUSCurrency(val) {

    return val.toLocaleString('en-US', { style: "currency", currency: "USD" });

}




Jun 04, 2022
SOLUTION.PDF
SOLUTION.PDF

Get Answer To This Question

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here
Have files?