Collection Set E-sale Solution
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
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:
