My Awesome Cart

<!DOCTYPE html>
<html ng-app="cartApp">

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <script src="store.js"></script>
  <script src="cart.js"></script>
  <script src="cart.ctrl.js"></script>
  <script src="store.service.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="CartController as vm">
  <h1>{{vm.cart.name}}</h1>
  <p>Items added to your Cart ({{vm.cart.getCount() || 0}})</p>
  <hr />
  <p ng-show="vm.cart.items.length < 1">
    You have no items in your cart... Buy something!
  </p>
  <table class="table" ng-if="vm.cart.items.length > 0">
    <thead>
      <tr>
        <th>Item</th>
        <th>Color</th>
        <th>Size</th>
        <th>Quantity</th>
        <th>Price</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in vm.cart.items">
        <td>{{item.name}}</td>
        <td>{{item.color}}</td>
        <td>{{item.size}}</td>
        <td>
          <select ng-model="item.quantity" ng-options="o as o for o in [1,2,3,4,5,6,7,8,9,10]"></select>
        </td>
        <td>{{item.price * item.quantity | currency}}</td>
        <td>
          <button class="btn btn-xs btn-warning" ng-click=vm.cart.removeItem(item)>X</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td class="text-right">Total:</td>
        <td>{{vm.cart.calculateTotal() | currency}}</td>
        <td></td>
      </tr>
    </tfoot>
  </table>
  <hr />
  <div class="container">
    <div class="row">
      <div ng-repeat="item in vm.store.items" class="col-sm-4">
        <div class="shopping-item">
          <p class="item-price">{{item.price | currency}}</p>
          <p class="item-name">
            {{item.name}}</p>
          <img src="{{item.img}}">
          <p>
            <select ng-model="item.selectedColor" ng-options="color.name as color.name for color in item.colors">
              <option value=''>--Color--</option>
            </select>
            <select ng-model="item.selectedSize">
               <option value=''>--Size--</option>
              <option ng-repeat="size in item.sizes">{{size}}</option>
            </select>
          </p>
          <button class="btn btn-xs btn-primary" ng-disabled="!item.selectedColor || !item.selectedSize" ng-click="vm.cart.addItem(item)">Add</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

// Code goes here
var cartApp = angular.module('cartApp',[]);

cartApp.controller('CartController',function(storeService){
  var vm = this;
  vm.store = {};
  storeService.getItems().then(function(items){
    vm.store.items = items[0];
  });
  this.cart = myCart;
})

/* Styles go here */

.shopping-item{
  width:200px;
  border:2px solid darkslategray;
  padding:20px;
  background-color:lightslategray;
  text-align:center;
}

.shopping-item .item-name{
  color:white;
  text-align:center;
  font-weight:bold;
}

.shopping-item button{
  width:50%;
}

.shopping-item select{
  margin:1px;
  width:50%;
}

.shopping-item img{
  margin:10px 0;
  width:100px;
  height:100px;
}

.shopping-item .item-price{
  color:yellow;
  font-size:16px;
  font-weight:bold;
}

[My Awesome Cart](http://plnkr.co/edit/6i1I26j32BdCy9VJfBMk?p=info)
===============

In this project you have been provided with a basic shoping cart that is capable
of adding items from a store and calculating the total cost of any items added 
to the cart. However you will notice the site is broken because of some missing
items. 

###Step 1 - Creating the Store Object
You have been tasked with creating the store object. Open store.js and create an
variable called store and set it equal to an object. Give the store object two
properties one called name and the other called items.

###Step 2 - Adding Items
The items property in the store object will be a list of objects (AKA an Array).
Each item in the store should have the following properties. 

```javascript
name: String
colors: Array of Objects
sizes: Array of Strings
price: Number
img: String(*hint a url)
```

As you are working you will automagically see your store populating to the view.
We will cover how this is working at a later point for now simply enjoy it.

###Step 3 - Save Locally
Once you have added your items download your plunk and push it to your github
account under the name of your choice.


//Add a function getCount and return any number;

myCart = {
  name: "My Awesome Cart!",
  
  items : [],
  
  getCount : function(){
    return this.items.length;
  },
  
  calculateTotal : function(){
    var runningTotal = 0;
    this.items.forEach(function(item){
      runningTotal += item.price * item.quantity;
    });
    return runningTotal;
  },
  
  removeItem : function(item){
    var index = this.items.indexOf(item)
    if(index >= 0){
      this.items.splice(index,1);
    }
  },
  
  addItem : function(item){
      var newItem = {
        name:item.name,
        color:item.selectedColor,
        size: item.selectedSize,
        quantity: 1,
        price:item.price,
      }
      this.items.push(newItem);
  }
};

var cartApp = angular.module('cartApp');

cartApp.factory('storeService', function($http){
  return {
    getItems: function(){
      return $http({
        method: 'GET',
        url: 'https://api.myjson.com/bins/5caxy'
      }).then(function(res){
        return res.data;
      });
    }
  }
})