Challenge: MVC Pattern

In this challenge, you have to implement the MVC pattern to solve the given problem.

We'll cover the following

Problem statement

In this challenge, you have to implement the MVC pattern to display the items in a shopping cart.

You have three components:

  • ShoppingCartModel

    The shopping cart model should have the following properties: itemNumber, itemName, itemQuantity, and itemPrice. It should also have a get function for each property.

  • ShoppingCartView

    You are already given the part of the code that initializes the current view for the controller and the displayItem function that displays an item’s information.

    Your task is to implement a buyItem function to buy an item.

    A changeItemQuantity function that updates the quantity of an item in the cart. It should take the following parameters: itemNumber and newQuantity.

  • ShoppingCartController

    The controller should update the view whenever a change occurs in the shopping cart model or if a user edits the view.

Input

The buyItem function is called to buy items and changeItemQuantity is called to change the quantity of an existing item

Output

The items in the cart are displayed

Sample input

var view = new ShoppingCartView();
var controller = new ShoppingCartController();
view.registerWith(controller);
view.buyItem("Popcorn", 3, 2.50);
view.changeItemQuantity(0,6);

Sample output

"Item Number: 0"
"Item: Popcorn"
"Quantity: 3"
"Price: 2.5"
"Item Number: 0"
"Item: Popcorn"
"Quantity: 6"
"Price: 2.5"

Challenge #

Take a close look and design a step-by-step solution before jumping on to the implementation. This problem is designed for your practice, so try to solve it on your own first. If you get stuck, you can always refer to the solution provided. Good Luck!

Press + to interact
class ShoppingCartModel
{ 
   //write code here
} 
class ShoppingCartView  
{
    constructor(){
        this.controller = null;
    }
    registerWith(controller) {
        this.controller = controller;
        this.controller.addView(this); 
    }
    
    displayItem(itemNumber,itemName,itemQuantity,itemPrice) 
    { 
        console.log(`Item Number: ${itemNumber}\nItem: ${itemName}\nQuantity: ${itemQuantity}\nPrice: ${itemPrice}`); 
    } 
    //write code here
} 
class ShoppingCartController  
{ 
    constructor(){
        this.model = null;
        this.view = null;
        this.itemList = [];
    }
    
    addView(view) {
        this.view = view;
    }
    addModel(model) {
        this.model = model;
    }
    //write code here 
}

Let’s discuss the solution in the next lesson.