JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container" data-ng-app="" data-ng-controller="ShoppingCartController">
	<div class="row" >
		<div class="col-xs-8" >
			<div class="panel panel-info">
				<div class="panel-heading">
					<div class="panel-title">
						<div class="row">
							<div class="col-xs-6">
								<h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>
							</div>
							<div class="col-xs-6">
								<button type="button" class="btn btn-primary btn-sm btn-block">
									<span class="glyphicon glyphicon-share-alt"></span> Continue shopping
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="panel-body">
					<div class="row" data-ng-repeat="item in items">
						<div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70">
						</div>
						<div class="col-xs-4">
							<h4 class="product-name"><strong>{{item.name}}</strong></h4><h4><small>{{item.description}}</small></h4>
						</div>
						<div class="col-xs-6">
							<div class="col-xs-6 text-right">
								<h6><strong>{{item.price|currency}} <span class="text-muted">x</span></strong></h6>
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control input-sm" type="number" data-ng-model="item.quantity" value="1">
							</div>
							<div class="col-xs-2">
								<button type="button" class="btn btn-link btn-xs">
									<span class="glyphicon glyphicon-trash"> </span>
								</button>
							</div>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="text-center">
							<div class="col-xs-9">
								<h6 class="text-right">Added items?</h6>
							</div>
							<div class="col-xs-3">
								<button type="button" class="btn btn-default btn-sm btn-block">
									Update cart
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="panel-footer">
					<div...

CSS

body {
	margin-top: 20px;
}

JavaScript

function ShoppingCartController($scope) {
    $scope.items = [
        {name: 'BJJ GI A4',
        price: 107.02,
        quantity:1,
        description:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dolor expedita nam molestias vitae quisquam quasi voluptate minus sequi quod labore asperiores dolores maxime nisi vel ipsum dignissimos libero unde.'},
{name: 'BJJ GI A2',
        price: 107.02,
        quantity:1,
        description:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dolor expedita nam molestias vitae quisquam quasi voluptate minus sequi quod labore asperiores dolores maxime nisi vel ipsum dignissimos libero unde.'}];
    $scope.total = function()
    {
        var x = $scope.items;
        var t = 0;
        angular.forEach($scope.items, function(item) {
            t += item.quantity * item.price;
        });
        return t;
    }
}