the existing web page and work with JavaScript Es-6 features like class, object , getter methods and collection. Problem Description: As part of a simple billing application, you are provided with an html page to obtain inputs for item number, item name, price & quantity. Using the ES-6 collections, add every item object into a Set and iterate through it to find the total cost to be paid. On adding each item object into Set, it must also get added to the table as a new record. Refer to the screenshot. Following are the files that contain code snippets index.html HTML for webpage (complete implementation is given for you). You only have to run this. No change needs to be done in this file. script.js Add your code to this file for the functions given. Procedure to complete the exercise
Objective:
To add scripting to the existing web page and work with JavaScript Es-6 features like class, object , getter methods and collection.
Problem Description:
As part of a simple billing application, you are provided with an html page to obtain inputs for item number, item name, price & quantity. Using the ES-6 collections, add every item object into a Set and iterate through it to find the total cost to be paid. On adding each item object into Set, it must also get added to the table as a new record. Refer to the screenshot.
Following are the files that contain code snippets
index.html |
HTML for webpage (complete implementation is given for you). You only have to run this. No change needs to be done in this file. |
script.js |
Add your code to this file for the functions given. |
Procedure to complete the exercise
Class |
Properties |
Methods |
Item |
itemNumber itemName price quantity |
Include constructor with properties and getter methods for Item properties |
In script.js, provide the implementation for the functions as per the requirements mentioned below
Class Item |
Template for Item class is provided as part of the code skeleton. Add properties, constructor and getter methods. |
addItem(itemNumber, itemName, price, quantity) |
A set defined as itemList is provided as part of code skeleton. |
display() |
On Clicking submit button, this function is invoked. Example: |
Step by step
Solved in 3 steps with 1 images