Problem Statement

Build a Landing Page for Point of Sales (POS system).

Below are the list of tasks that need to be completed as part of this exercise:
1. The landing page will have all the products listed on the right hand side of the
screen.

2. The left hand of the screen will be empty at first showing the message “THERE ARE
NO PRODUCTS”.

3. At the bottom end of the left hand side are going to be 4 fields:
■ “Sub Total”,
■ “VAT Tax”,
■ “Discount”
■ “Total”.
All fields will be blank at first.

4. “VAT Tax” and “Discount” fields will be manually filled while “Sub Total” and “Total”
will be automatically calculated based on the items/products added.

5. At the bottom of the screen will be 2 buttons “CANCEL SALE” and “PROCESS SALE”

6. Upon hovering over the product image in the list, show more information about the
product like:
■ the Product Price
■ the Product Description

7. Allow the user to add a product to the left hand side by clicking on the product on
the right hand side. Clicking on the product twice will increase the product quantity
to 2 in the left hand side. Any subsequent clicks will keep increasing the quantity.
8. On the left hand side of the screen, the user can delete an item by clicking on the
red cross icon in front of the product.

9. Here, the user can also increase or decrease the number of added products by
clicking on +/- icon on the product Quantity column.

10. As and when an item is added, deleted, increased or decreased in quantity, the sub
total and total should automatically get adjusted.

11. The VAT and Discount will only accept percentages.

12. The VAT calculation is done on the Sub Total.

13. The Discount calculation is also done on the Sub Total and the VAT does not get
impacted by the discount.

14. The Total is calculated as Sub Total + VAT amount + Discount amount

15. When the user clicks on the “Cancel Sale” button all products are deleted from the
left hand side and the page is reset to when the user first landed on the page.

16. When the user clicks on the “Process Sale” button, they see a pop-up which is a
receipt of the sale.

17. When the user clicks on Close button of the Receipt, the sale is completed with all
data reset to initial state of the landing page
1. You can pick any image from web for the product images
2. The product list should be read and populated from a JSON file.
3. Example JSON file:
[
{
"name": "comuter",
"price": "130",
"category": "computers",
"description": "",
"image": "comuter.jpg"
},
{
"name": "sweater",
"price": "1",
"category": "Clothing",
"description": "fashion, clothes , sweater, wool, cardigan,…"
},
{
"name": "tie",
"price": "46",
"category": "Clothing",
"description": "fashion, tie, clothes, accessory , accessoire,…",
"image": "tie.jpeg"
},
{
"name": "jacket",
"price": "190",
"category": "Clothing",
"description": "winter jacket ",
"image": "jacket.jpeg"
}
]