Using Angular and the provided starter code, build an application that mimics an e-commerce shopping cart checkout.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Problem Description

Using Angular and the provided starter code, build an application that mimics an e-commerce shopping cart checkout. You are not permitted to use any of Javascript’s DOM manipulation functions or other 3rd party libraries.

As shown in the screenshots, the application must display a list of products that are in the user’s shopping cart. The list of items must be programmatically generated and the logic must work for any number of items; not just the ones displayed in the screenshots.

Screenshot 1: UI when app loads

When the user taps the + or - button next to an item, the app must increase or decrease the quantity of the selected item by 1. The UI must also automatically update to show the latest quantity. The user cannot select negative quantities.

When a new quantity is selected, the product subtotal field must automatically update to show the cost of purchasing that item (item’s unit price x quantity)

Screenshot 2: When + or - buttons are pressed, the quantity and product subtotal are updated. (see Pants)

When the user taps the CALCULATE button, the app must calculate and display the cart subtotal, the tax (assume 13% tax rate), and the final cost of the order (subtotal+tax).

Screenshot 3: UI after selecting item quantities and pressing the Calculate button

The application must be architected as follows

Root Component (app-root)

1. The root component contains the following products:

● productsList: a list of items sold by the store. Every product has a sku, name, and unit price. A product must be modeled as a Product interface.

● purchaseList: a list of items that the user wants to purchase. Every item in the list has a sku and subtotal value. A purchase must be modeled as a Purchase interface.

2. The root component must detect when the CALCULATE button is pressed.

3. When the button is pressed:

● Check if the cart subtotal more than $0.00.

● If yes, then display the Cart Subtotal, Tax, and Total fields, and populate the fields with the appropriate values

● If not, then hide the Cart Subtotal, Tax, and Total fields

● You must use ngIf to show and hide the fields.

4. You are to add additional properties and functions to this class as appropriate.

 Product component (<app-product>)

1. The product component contains these properties

● product: A Product object that represents the item that should be displayed in the UI

● desiredQuantity: An integer number representing the quantity of the item the user wants to purchase

2. You are to add additional properties and functions to this as appropriate.

Customizing the Root component’s Child Elements

1. Based on the items provided in the root component’s productsList property, The root component must use Angular’s ngFor directive to generate the <app-product> elements.

2. Th item hat the <app-product> component must display can be customized using the component’s product property.

Sending ata From Child to the Parent

<app-product>: When the user taps the + or - button, the component must:

● Increase or decrease the quantity by 1 and update the UI to show the new quantity and product subtotal.

○ The product subtotal is calculated as: unit price x quantity.

○ All prices must be displayed using the currency pipe.

● Send the product’s sku and product subtotal must be sent to the parent component as a

Purchase object.

Parent Reeiving data from child component

If the root component receives data from the<app-product> then:

● Check if the provided Purchase object is already on the purchaseList. The object is in the purchaseList if the purchaseList contains an object with the same sku as the provided Purchase object.

● If yes, then update the corresponding purchaseList item’s quantity with the quantity sent by the child component.

● If not, then add the provided Purchase object to the purchaseList.

 

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of