Collection Set E-sale

Page Contents

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. addItem method should create object for Item class by using constructor and add the Item object into the set.
display()	On Clicking submit button, this function is invoked. 1. Get the item number, item name, price and quantity values. 2. Invoke addItem method by passing the itemNumber, itemName, price and quantity. 3. Iterate the itemList set and calculate the total cost of the items added into itemList, display the cost in div tag with id as “result2”. 4. Iterate the itemList and display the item details in div tag with id result1. (Refer to screenshot) Example: consider item 1 : itemNumber=2233, itemName=mobile, price=6000, quantity=1 consider item 2 : itemNumber=2234, itemName=headset, price=1500, quantity=2 Cost Per item = price* quantity; item1 cost : 60001 => 6000 item2 cost : 15002 => 3000 total cost = 6000+3000 => 9000

Screenshot 1:

Screenshot 2:

SOLUTION

Program: Collection Set E-sale Solution

script.js

var itemList = new Set();  // DO NOT CHANGE THIS STATEMENT
var tot=0;

var Item= class Item{
    // DO NOT CHANGE THIS STATEMENT
    // Define a constructor with item properties
    // When there's a property : itemNumber, refer to the current object's itemNumber property as : this._itemNumber
    // The name of the associated getter method must be : itemNumber()
    // Getter methods for properties
                
    constructor(itemNumber,itemName,price,quantity)
    {
        this.itemNumber = itemNumber;
        this.itemName = itemName;
        this.price=price;
        this.quantity=quantity;
    }
    };
          
    
function addItem(itemNumber,itemName,price,quantity){
    // Fill the code to create Item object and add it into itemList
    var data = new Item(itemNumber,itemName,price,quantity);
    itemList.add(data);


}

function display(){
    // Get the values of ItemNumber, itemName, price and quantity
    // Invoke appropriate method to create item object 
    // Iterate the set and display the result 
    var itemNumber = document.getElementById('itemNumber').value;
    var itemName = document.getElementById('itemName').value;
    var price = document.getElementById('price').value;
    var quantity = document.getElementById('quantity').value;
    addItem(itemNumber,itemName,price,quantity)

    var op ="Item Number Item Name Price Quantity"+"<br>";

            for(let dt of itemList)
            {
                document.getElementById("result1").innerHTML= op+ `${dt.itemNumber} 
${dt.itemName} ${dt.price} ${dt.quantity}`+ "<br>";
            tot = tot+ (dt.price*dt.quantity);
            }

    document.getElementById("result2").innerHTML="Total Cost Rs: "+tot;
  

    return false;
}

index.html

<html>
    <head>
        <style>
         #main{
                margin-left: auto;
    			margin-right: auto;
    			text-align: left;
    			border: solid 2px black;
    			border-spacing: 3px;
    			border-radius: 6px; 
    			width: 35%;			   
    			padding: 3px;
    			/*color: #009900;*/
    			background-color:  #f2f2f2 ; 
            }
            body{
                text-align: center;
                background-color: #16A085
            }
            #submit{
                margin-right: auto;
                margin-left: auto;
                text-align: center;
                padding: 5px;
            }  
            div{
                margin-top:1%;
                margin-left: auto;
    			margin-right: auto;
    			text-align: left;
                background-color: #D98880 ;
    			width: 35%;			   
    			/*padding: 3px;*/
            }
        </style>
        <script src="script.js"></script>
    </head>
    
    <form onsubmit="return display();">
        <h2>Sazzy- E-Sale</h2>
        <table id="main">
            <tr> <td> Item Number</td>
            <td> <input type="text" id="itemNumber" required></td>
            </tr>
            <tr> <td> Item Name</td>
            <td> <input type="text" id="itemName" required></td>
            </tr>
            <tr> <td> Price</td>
            <td> <input type="text" id="price" required></td>
            </tr>
            <tr> <td> Quantity</td>
            <td> <input type="text" id="quantity" required> </td>
            </tr>
            <tr> <td> <input type="submit" id="submit" value="Add to Cart"></td>
            <td> <input type="reset" id="reset"></td>
            </tr>
        </table>
        <div id="result1"><script src="script.js" type="text/javascript"></script></div>
        <div id="result2"><script src="script.js" type="text/javascript"></script></div>
    </form>
</html>

Related:

Collection Set E-sale

SOLUTION

Leave a Comment Cancel reply