JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container">

    <div class="content" ng-controller="MainController">


        <div class="col-xs-6">
            <ul class="list-group itemList">
                <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
                    <strong>{{ product.name }}</strong> - {{ product.price | currency }}
                </li>
            </ul>
        </div>

        <div class="col-xs-6 rightPane">
            <div class="col-xs-12">
                <ul class="list-group shopList">
                    <li class="list-group-item" ng-repeat="(id, product) in itemsToBuy">
                        <strong>{{ product.name }}</strong> - {{ product.price | currency }}
                        <button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
                        <button ng-click="addQuantity(product)" class="btn btn-xs btn-info pull-right">+</button>

                        <input readonly type="text" value="{{ quantity || 1 }}" class="form-control totalQuantity pull-right"></input>

                        <button ng-click="removeQuantity()" class="btn btn-xs btn-info pull-right">-</button>
                    </li>
                </ul>
            </div>

            <button class="btn btn-danger clearBtn" ng-disabled="!checkLength()" ng-click="clearCart()">Clear the cart</button>
            <input readonly ng-show="!checkLength()" type="text" placeholder="Total price" class="form-control totalPriceInput pull-right"></input>
            <input readonly ng-show="checkLength()" type="text" value="{{ totalPrice() }}" class="form-control totalPriceInput pull-right"></input>
            <button class="btn btn-success makeOrderBtn" ng-disabled="!checkLength()" ng-click="confirmOrder(); clearCart()">Submit your order</button>


     ...

CSS

.shopList {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    min-height: 400px;
}

.itemList {
    padding: 10px;
    overflow-y: hidden;
    max-height: 600px;
}

.itemList li:hover {
    cursor: pointer;
    background-color: #ccc;
}

.hidden {
    display: none;
}

.rightPane {

}

.makeOrderBtn {
    margin-top: 10px;
    width: 100%;
}

.totalPriceInput {
    max-width: 45%;
}


.clearBtn {
    width: 45%;
}

[readonly] {
    background-color: white !important;
}

input:focus {
    outline:none;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
}

.shopList li button {

    width: 22px
}

.shopList li .btn-danger {
    margin-left: 10px;
}

.totalQuantity {
    max-width: 40px;
    margin: 0 5px;
    padding: 0;
    height: 21.5px;
    text-align: center;
    padding-right: 3px;
}

JavaScript

var app = angular.module('app', []);

app.controller('MainController', ['$scope', function($scope){

  $scope.drinks = [];

  $scope.itemsToBuy = [];

     $scope.totalPrice = function() {
            var total = 0;

            if ($scope.itemsToBuy.length > 0) {
                for (var i = 0; i < $scope.itemsToBuy.length; i++) {
                    total += $scope.itemsToBuy[i].price;
                }
            }
            return total.toFixed(2)+'$';
        };


 $scope.drinks = [
  {
    "name": "Pepsi 0.5l",
    "price": 1.49
  },
  {
    "name": "Pepsi 1l",
    "price": 2.49
  },
  {
    "name": "Pepsi 2l",
    "price": 3.49
  },
  {
    "name": "Orange juice 0.5l",
    "price": 1.40
  },
  {
    "name": "Lemon tea 1l",
    "price": 1.99
  },
  {
    "name": "Cola-Cola 0.33l",
    "price": 0.89
  },
  {
    "name": "Cola-Cola 0.5l",
    "price": 1.99
  },
  {
    "name": "Cola-Cola 1l",
    "price": 2.99
  },
  {
    "name": "Heineken 0.5l",
    "price": 1.89
  },
  {
    "name": "Soda 0.5l",
    "price": 0.49
  },
  {
    "name": "Tomato juice 0.5l",
    "price": 0.99
  },
  {
    "name": "Grapefruit juice 0.5l",
    "price": 0.99
  },
  {
    "name": "Aloe Vera drink 0.5l",
    "price": 2.99
  },
  {
    "name": "Water 0.5l",
    "price": 0.29
  }
];


  $scope.removeFromCart = function(id) {
    $scope.drinks.push($scope.itemsToBuy[id]);
    $scope.itemsToBuy.splice(id, 1);    
  };

  $scope.addToShoppingList = function(id) {
    console.log("id", $scope.drinks.indexOf(id));
    $scope.itemsToBuy.push($scope.drinks[id]);
    $scope.drinks.splice(id,1);
  };

  $scope.clearCart = function(){
            for(var i = 0; i < $scope.itemsToBuy.length; i++){
                $scope.drinks.push($scope.itemsToBuy[i]);
            }
            $scope.itemsToBuy = [];
        };
  
    $scope.confirmOrder = function(){
            window.alert("Order accepted!");
        }

}]);