akinyeleolat/index.html

## index.html
<html ng-app="root">
  <form id="shopping">
<div class="container" ng-controller="index">

		  <div class="box margin-right" id="shopping-list">
		    <h1>My Shopping List</h1>

		    <div id="errorMessage"><i class="icon-cross"></i>Please enter all inputs!</div>

		    <div id="successMessage"><i class="icon-checkmark"></i>Item added to shopping list!</div>

		    <div class="half margin-right">
		     <input type='text'   class="searchButton" placeholder='Item Name' name="item" autofocus required>
		    </div>
		     <div class="half margin-right">
		     	<input type='number' class="searchButton margin-right" placeholder='Quantity' name="itemQty" required>
		    </div><div class="dollar half">
		      <span>$</span>
		      <input type='number' class="searchButton" placeholder='Price (each)' name="itemPrice" required>
        </div></form>

		    <button id="addItem" onclick="addToCart()">Add Item</button>

		    <div class="list">
		      <table border="0" cellspacing="0">
		        <tr class="table-header">
		          <td></td>
		          <td class="left">Item Name</td>

		          <td>Quantity</td>
		          <td class="center">Price</td>
		          <td class="center">Delete</td>
		        </tr>
		        <tr ng-repeat="item in list | orderBy: '-checked':true">
		          <td><input ng-show="!item.checked" ng-checked="item.checked" ng-click="add(item, list)" type='checkbox' checklist-value="item.checked"></td>
		          <td ng-class="{selected: item.checked==true}">{{item.name}}</td>

		          <td ng-class="{selected: item.checked==true}" class="center">{{item.quantity}}</td>
		          <td ng-class="{selected: item.checked==true}">{{item.price | currency}}</td>
		          <td><i class="icon-cross delete" ng-click="remove(item)"></i></td>
		        </tr>
		      </table>
		      <div ng-hide="list.length" class="center">Your shopping list is empty.</div>
		      <div class="cost cf">
		        <span class="left">Total Cost:</span>
		        <span class="right" ng-class="{total: length!==0}">{{getTotal() | currency}}</span>
		      </div>
		      <button class="clear" ng-click="clearAll(list)">Clear Shopping List</button>
		    </div>
		  </div>

		  <div class="box" id="inventory">
		    <h1>Inventory</h1>
		    <div class="list">
		      <table border="0" cellspacing="0">
		        <div ng-hide="inventory.length" class="center">Your inventory is empty.</div>
		        <tr ng-repeat="item in inventory">
		          <td>{{item.name}}</td>

		          <td class="center">{{item.quantity}}</td>
		          <td class="center">{{item.price | currency}}</td>
		          <td><i class="icon-cross delete" ng-click="removeInventory(item)"></i></td>
		        </tr>
		      </table>
		      <button class="clear" ng-click="clearAll(inventory)">Clear Inventory</button>
		  </div>
		  </div>
		</div>
</html>


## script.js
class ShoppingCart {

  constructor(){
    this.cart=[];
    this.TotalCost=0;
    this.newItem={};
  }


  getCart() {
    return this.cart;
  }

  setCart(c) {
    this.cart = c;
    return this.cart;
  }


  addToCart(item,qty,price) {
    //var price = Math.floor(Math.random()*100);
    var newItem = {
      itemName: item,
      itemPrice: price,
      itemQty: qty,
    };
    var Cost = qty * price;
    this.cart.push(newItem);
    return `${newItem.itemName} has been added to your cart. The cost is ${Cost}`;
  }


  viewCart() {
    var array = [];
    let cart = this.cart;

    for ( let i = 0; i < cart.length; i++) {
      array.push(`${cart[i].itemQty} ${cart[i].itemName} at $${cart[i].itemPrice}`);
    }
    if (cart.length === 0) {
      return `Your shopping cart is empty.`;}

    if (cart.length === 1){
      return `In your cart, you have ${cart[0].itemQty} ${cart[0].itemName} at $${cart[0].itemPrice}.`;
    }

    if (cart.length ===2){
      return `In your cart, you have ${cart[0].itemQty} ${cart[0].itemName} at $${cart[0].itemPrice}, and ${cart[1].itemQty} ${cart[1].itemName} at $${cart[1].itemPrice}.`
    }else{
      let lastItem = array.pop();
      return `In your cart, you have ${array.join(', ')}, and ${lastItem}.`;
    }
  }

  total() {
    let totalCost = 0;
    let cart = this.cart;
    for (let i = 0; i < cart.length; i++) {
      totalCost += cart[i].itemPrice * cart[i].itemQty;
    }
    return `Total so far is ${totalCost}`;
  }

  removeFromCart(item) {
    let cart = this.cart;
    for (let i = 0; i < cart.length; i++){
      if (cart[i].itemName === item){
        cart.splice(i,1);
        return cart;
      }
    }
    return "That item is not in your cart.";
  }

  placeOrder(cardNumber) {
    if (cardNumber){
      let totalCost = total();
      this.cart =[];
      return `Your total cost is $${totalCost}, which will be charged to the card ${cardNumber}.`;
    } else {
      return "Sorry, we don't have a credit card on file for you.";
    }
  }

}

const myItem = new ShoppingCart();

console.log(myItem.addToCart('Books',3,100));
console.log(myItem.addToCart('Clothe',3,100));
console.log(myItem.addToCart('HDD',5,100));
console.log(myItem.viewCart());
console.log(myItem.total());
myItem.removeFromCart('HDD');
console.log(myItem.viewCart());
console.log(myItem.total());

## shopping-expenses.markdown

      
    Raw
  

              shopping-expenses.markdown
            
          
    shopping expenses

A Pen by Akinyele Oluwatosin Akintayo on CodePen.
License.

  
## style.css
@import "compass/css3";

*, *:before, *:after {
  @include box-sizing(border-box);
}

$red: #fb887c;
$green: #AFC7B9;
$navy: #34495e;

@import url("https://www.markmurray.co/codepen/customstyle.css"), url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

html, body {
  background: $green;
  font-family: 'Lato', sans-serif;
  height: 100%;
  padding: 1em;
}

.left { text-align: left!important }
.center { text-align: center!important }
.right { text-align: right!important }

.container {
  max-width: 1080px;
  margin: 0 auto;
  height: 100%;
}

.box {
  width: 49%;
  background: #f3f3f3;
  margin: 0 auto 2em auto;
  overflow: auto;
  padding: 1em;
  border-radius: 3px;
  display: inline-block;
  vertical-align: top;

    &:first-child{
      margin-right: 1%;
    }
}

h1 {
  color: #3a3a3a;
  text-align: center;
  margin: 1em 0;
}

table {
  border: none;
  outline: none;
  width: 100%;
  margin: 0.5em 0 1em;

  tr.table-header {
    td {
      font-size: 0.7em;
      font-weight: bolder;
    }
  }

  td {
    padding: 0.75em 0.5em;
  }

  td:first-child {
    text-align: left;
  }

  td:nth-child(3){
    text-align: center;
  }

  td:last-child, td:nth-child(4){
    text-align: right;
  }

  tr:nth-child(2n+2){
    background: darken(#eee, 1%);
  }
}

.searchButton {
  border: 1px solid #e0e0e0;
  background: #fff;
  outline: none;
  padding: 1em;
  border-radius: 3px;
  font-weight: 300;
  font-size: 0.8em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  position: relative;
}

.margin-right {
  margin-right: 1%;
}

.half {
  width: 49.5%;
  display: inline-block;

  input {
    width: 100%;
  }
}

.half:first-child {
  margin-right: 2%;
}

.selected {
  text-decoration: line-through;
  color: #aaa;
}

.dollar {
  position: relative;
  display: inline-block;
}

.dollar input {
  padding-left: 2em;
}

.dollar span {
  position: absolute;
  display: block;
  padding: 3px 3px 3px 7px;
  pointer-events: none;
  left: 5px; top: 13px;
  color: #aaa;
  z-index: 1;
}

.searchButton.full {
  width: 100%;
}

.list {
  font-family: 'Lato', sans-serif;
  font-weight: 300;

  ul {

    li {
      margin: 1em 0;
    }
  }
}

.inventory h1 {
  color: #3a3a3a;
  padding-top: 5px;
  font-family: 'Lato', sans-serif;
  text-align: center;

}

input[type='checkbox']{
  background: transparent;
  border: 2px solid #3a3a3a;
  padding: 0.2em;
  font-size: 1em;
}

button.clear {
  background: lighten($navy, 6%);
  border-bottom: 4px solid darken($navy, 5%);
}

button.clear:hover {
  background: lighten($navy, 2%);
  border-bottom: 2px solid darken($navy, 5%);
}

button {
  margin: 0.25em 0;
  display: block;
  outline: none;
  background: $red;
  border: none;
  padding: 1.1em;
  border-radius: 6px;
  width: 100%;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 4px solid darken($red, 5%);

    &:hover {
      border-bottom: 2px solid darken($red, 5%);
      margin-bottom: 0.9em;
      @include box-shadow(inset 0 0 10px 0px rgba(black, 0.2));
    }

}

.cost {
  margin-bottom: 1em;

  span {
    padding: 0.5em;

    &:first-child {
      float: left;
    }

    &:nth-child(2){
      float: right;
      vertical-align: baseline;
    }
  }
}

.total {

  background: $red;
  color: white;
  font-weight: bolder;
  border-radius: 5px;
}

#successMessage, #errorMessage {
  display: none;
  text-align: center;
  margin: 0.5em 0;
  @include transition(display 0.3s ease);

}

i {
    vertical-align: baseline;
    margin-right: 0.5em;
    border-radius: 50%;
    width: 0.5em; height: 0.5em;
    padding: 0.5em;
    font-size: 0.8em;
    color: white;
}

i.icon-checkmark {
  background: green;
}

i.icon-cross {
  background: red;
}

i.delete {
  color: lighten($red, 8%);
  background: transparent;
  font-size: 1.1em;
  vertical-align: sub;
  cursor: pointer;

  &:hover {
    color: darken($red, 8%);
  }
}

#successMessage {
  color: green;
}

#errorMessage {
  color: red;
}


@media (max-width: 800px) {
  .box {
    width: 100%;
    display: block;
  }
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
	<html ng-app="root">
	<form id="shopping">
	<div class="container" ng-controller="index">

	<div class="box margin-right" id="shopping-list">
	<h1>My Shopping List</h1>

	<div id="errorMessage"><i class="icon-cross"></i>Please enter all inputs!</div>

	<div id="successMessage"><i class="icon-checkmark"></i>Item added to shopping list!</div>

	<div class="half margin-right">
	<input type='text' class="searchButton" placeholder='Item Name' name="item" autofocus required>
	</div>
	<div class="half margin-right">
	<input type='number' class="searchButton margin-right" placeholder='Quantity' name="itemQty" required>
	</div><div class="dollar half">
	<span>$</span>
	<input type='number' class="searchButton" placeholder='Price (each)' name="itemPrice" required>
	</div></form>

	<button id="addItem" onclick="addToCart()">Add Item</button>

	<div class="list">
	<table border="0" cellspacing="0">
	<tr class="table-header">
	<td></td>
	<td class="left">Item Name</td>

	<td>Quantity</td>
	<td class="center">Price</td>
	<td class="center">Delete</td>
	</tr>
	<tr ng-repeat="item in list \| orderBy: '-checked':true">
	<td><input ng-show="!item.checked" ng-checked="item.checked" ng-click="add(item, list)" type='checkbox' checklist-value="item.checked"></td>
	<td ng-class="{selected: item.checked==true}">{{item.name}}</td>

	<td ng-class="{selected: item.checked==true}" class="center">{{item.quantity}}</td>
	<td ng-class="{selected: item.checked==true}">{{item.price \| currency}}</td>
	<td><i class="icon-cross delete" ng-click="remove(item)"></i></td>
	</tr>
	</table>
	<div ng-hide="list.length" class="center">Your shopping list is empty.</div>
	<div class="cost cf">
	<span class="left">Total Cost:</span>
	<span class="right" ng-class="{total: length!==0}">{{getTotal() \| currency}}</span>
	</div>
	<button class="clear" ng-click="clearAll(list)">Clear Shopping List</button>
	</div>
	</div>

	<div class="box" id="inventory">
	<h1>Inventory</h1>
	<div class="list">
	<table border="0" cellspacing="0">
	<div ng-hide="inventory.length" class="center">Your inventory is empty.</div>
	<tr ng-repeat="item in inventory">
	<td>{{item.name}}</td>

	<td class="center">{{item.quantity}}</td>
	<td class="center">{{item.price \| currency}}</td>
	<td><i class="icon-cross delete" ng-click="removeInventory(item)"></i></td>
	</tr>
	</table>
	<button class="clear" ng-click="clearAll(inventory)">Clear Inventory</button>
	</div>
	</div>
	</div>
	</html>
	class ShoppingCart {

	constructor(){
	this.cart=[];
	this.TotalCost=0;
	this.newItem={};
	}


	getCart() {
	return this.cart;
	}

	setCart(c) {
	this.cart = c;
	return this.cart;
	}


	addToCart(item,qty,price) {
	//var price = Math.floor(Math.random()*100);
	var newItem = {
	itemName: item,
	itemPrice: price,
	itemQty: qty,
	};
	var Cost = qty * price;
	this.cart.push(newItem);
	return `${newItem.itemName} has been added to your cart. The cost is ${Cost}`;
	}



	viewCart() {
	var array = [];
	let cart = this.cart;

	for ( let i = 0; i < cart.length; i++) {
	array.push(`${cart[i].itemQty} ${cart[i].itemName} at $${cart[i].itemPrice}`);
	}
	if (cart.length === 0) {
	return `Your shopping cart is empty.`;}

	if (cart.length === 1){
	return `In your cart, you have ${cart[0].itemQty} ${cart[0].itemName} at $${cart[0].itemPrice}.`;
	}

	if (cart.length ===2){
	return `In your cart, you have ${cart[0].itemQty} ${cart[0].itemName} at $${cart[0].itemPrice}, and ${cart[1].itemQty} ${cart[1].itemName} at $${cart[1].itemPrice}.`
	}else{
	let lastItem = array.pop();
	return `In your cart, you have ${array.join(', ')}, and ${lastItem}.`;
	}
	}

	total() {
	let totalCost = 0;
	let cart = this.cart;
	for (let i = 0; i < cart.length; i++) {
	totalCost += cart[i].itemPrice * cart[i].itemQty;
	}
	return `Total so far is ${totalCost}`;
	}

	removeFromCart(item) {
	let cart = this.cart;
	for (let i = 0; i < cart.length; i++){
	if (cart[i].itemName === item){
	cart.splice(i,1);
	return cart;
	}
	}
	return "That item is not in your cart.";
	}

	placeOrder(cardNumber) {
	if (cardNumber){
	let totalCost = total();
	this.cart =[];
	return `Your total cost is $${totalCost}, which will be charged to the card ${cardNumber}.`;
	} else {
	return "Sorry, we don't have a credit card on file for you.";
	}
	}

	}

	const myItem = new ShoppingCart();

	console.log(myItem.addToCart('Books',3,100));
	console.log(myItem.addToCart('Clothe',3,100));
	console.log(myItem.addToCart('HDD',5,100));
	console.log(myItem.viewCart());
	console.log(myItem.total());
	myItem.removeFromCart('HDD');
	console.log(myItem.viewCart());
	console.log(myItem.total());
	@import "compass/css3";

	, :before, *:after {
	@include box-sizing(border-box);
	}

	$red: #fb887c;
	$green: #AFC7B9;
	$navy: #34495e;

	@import url("https://www.markmurray.co/codepen/customstyle.css"), url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

	html, body {
	background: $green;
	font-family: 'Lato', sans-serif;
	height: 100%;
	padding: 1em;
	}

	.left { text-align: left!important }
	.center { text-align: center!important }
	.right { text-align: right!important }

	.container {
	max-width: 1080px;
	margin: 0 auto;
	height: 100%;
	}

	.box {
	width: 49%;
	background: #f3f3f3;
	margin: 0 auto 2em auto;
	overflow: auto;
	padding: 1em;
	border-radius: 3px;
	display: inline-block;
	vertical-align: top;

	&:first-child{
	margin-right: 1%;
	}
	}

	h1 {
	color: #3a3a3a;
	text-align: center;
	margin: 1em 0;
	}

	table {
	border: none;
	outline: none;
	width: 100%;
	margin: 0.5em 0 1em;

	tr.table-header {
	td {
	font-size: 0.7em;
	font-weight: bolder;
	}
	}

	td {
	padding: 0.75em 0.5em;
	}

	td:first-child {
	text-align: left;
	}

	td:nth-child(3){
	text-align: center;
	}

	td:last-child, td:nth-child(4){
	text-align: right;
	}

	tr:nth-child(2n+2){
	background: darken(#eee, 1%);
	}
	}

	.searchButton {
	border: 1px solid #e0e0e0;
	background: #fff;
	outline: none;
	padding: 1em;
	border-radius: 3px;
	font-weight: 300;
	font-size: 0.8em;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	position: relative;
	}

	.margin-right {
	margin-right: 1%;
	}

	.half {
	width: 49.5%;
	display: inline-block;

	input {
	width: 100%;
	}
	}

	.half:first-child {
	margin-right: 2%;
	}

	.selected {
	text-decoration: line-through;
	color: #aaa;
	}

	.dollar {
	position: relative;
	display: inline-block;
	}

	.dollar input {
	padding-left: 2em;
	}

	.dollar span {
	position: absolute;
	display: block;
	padding: 3px 3px 3px 7px;
	pointer-events: none;
	left: 5px; top: 13px;
	color: #aaa;
	z-index: 1;
	}

	.searchButton.full {
	width: 100%;
	}

	.list {
	font-family: 'Lato', sans-serif;
	font-weight: 300;

	ul {

	li {
	margin: 1em 0;
	}
	}
	}

	.inventory h1 {
	color: #3a3a3a;
	padding-top: 5px;
	font-family: 'Lato', sans-serif;
	text-align: center;

	}

	input[type='checkbox']{
	background: transparent;
	border: 2px solid #3a3a3a;
	padding: 0.2em;
	font-size: 1em;
	}

	button.clear {
	background: lighten($navy, 6%);
	border-bottom: 4px solid darken($navy, 5%);
	}

	button.clear:hover {
	background: lighten($navy, 2%);
	border-bottom: 2px solid darken($navy, 5%);
	}

	button {
	margin: 0.25em 0;
	display: block;
	outline: none;
	background: $red;
	border: none;
	padding: 1.1em;
	border-radius: 6px;
	width: 100%;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	border-bottom: 4px solid darken($red, 5%);

	&:hover {
	border-bottom: 2px solid darken($red, 5%);
	margin-bottom: 0.9em;
	@include box-shadow(inset 0 0 10px 0px rgba(black, 0.2));
	}

	}

	.cost {
	margin-bottom: 1em;

	span {
	padding: 0.5em;

	&:first-child {
	float: left;
	}

	&:nth-child(2){
	float: right;
	vertical-align: baseline;
	}
	}
	}

	.total {

	background: $red;
	color: white;
	font-weight: bolder;
	border-radius: 5px;
	}

	#successMessage, #errorMessage {
	display: none;
	text-align: center;
	margin: 0.5em 0;
	@include transition(display 0.3s ease);

	}

	i {
	vertical-align: baseline;
	margin-right: 0.5em;
	border-radius: 50%;
	width: 0.5em; height: 0.5em;
	padding: 0.5em;
	font-size: 0.8em;
	color: white;
	}

	i.icon-checkmark {
	background: green;
	}

	i.icon-cross {
	background: red;
	}

	i.delete {
	color: lighten($red, 8%);
	background: transparent;
	font-size: 1.1em;
	vertical-align: sub;
	cursor: pointer;

	&:hover {
	color: darken($red, 8%);
	}
	}

	#successMessage {
	color: green;
	}

	#errorMessage {
	color: red;
	}


	@media (max-width: 800px) {
	.box {
	width: 100%;
	display: block;
	}
	}



	/* Clearfix */
	.cf:before,
	.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
	}

	.cf:after {
	clear: both;
	}