shanebarringer/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">

  </head>
  <body>
    <div class="container-fluid">
      <div class="calc">
        <div class="row buttons screen">
          <input type="text" disabled="disabled" id="display"/>
        </div>
        <div class="row buttons">
          <a class="ctrl btn">AC</a>
          <a class="ctrl btn">C</a>
          <a class ="operator btn">%</a>
          <a class ="operator btn">÷</a>
        </div>
        <div class="row buttons">
          <a class="btn">7</a>
          <a class="btn">8</a>
          <a class="btn">9</a>
          <a class="operator btn">x</a>
        </div>
        <div class="row buttons">
          <a class="btn">4</a>
          <a class="btn">5</a>
          <a class="btn">6</a>
          <a class="operator btn">-</a>
        </div>
        <div class="row buttons">
          <a class="btn">1</a>
          <a class="btn">2</a>
          <a class="btn">3</a>
          <a class="plus operator btn">+</a>
        </div>
        <div class="row buttons last-a-group">
          <a class="btn">0</a>
          <a class="operator btn">.</a>
          <a class="operator btn equal">=</a>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
}

body{
  /*background-image: url(http://49.media.tumblr.com/tumblr_lx8ybzt0LY1qduy16o1_500.gif);
  background-repeat: no-repeat;
  background-size: 100%;*/
  background-color: #A3F7BF;
}

.calc {
  width: 265px;
  height: 390px;
  margin: 12% auto;
  border-radius: 12px;
  box-shadow: 3px 3px 8px -1px #000000;
  background-color: #DDDDDD;
}

.buttons {
  margin-top: 10px;
  margin-left: 10px;
}
a {
  width: 50px;
  margin: 4px;
  text-align: center;
  background-color: #B9B8BD;
  color: #ffffff;
  outline: 0 none;
  padding: 100%;
  box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75);
}

a:hover {
  background-color: #A09FA4;
  color: #ffffff;
}

.plus {
  height: 94px;
  vertical-align: top;
  margin-bottom: -54px;
}
.operator {
  background-color: #53535F;
  color: #ffffff;
}

.operator:hover {
  background-color: #3A3A46;
  color: #ffffff;
}

.last-button-group {
  margin-top: 10px;
}

input, select, textarea {
  margin: 20px 0;
  margin-left: 3px;
  background-color: #AAB292;
  width: 89%;
  font-size: 2.2em;
  padding-left: 5px;
}

.ctrl {
  background-color: #B56777;
  color: #fff;
  text-align: center;
}

.ctrl:hover {
  background-color: #9C4E5E;
  color: #fff;
}

## main.js
var display = document.getElementById('display');
var numbers = [];
var digits = [];
var total = 0;
var operation;

function add(number){
  total += number;
  return total;
}

function subtract(number){
  total = Math.abs(total) - number;
  return total;
}

function multiply(number){
  return performOperation("*", number);
}

function divide(number){
  return performOperation("/", number);
}

function performOperation(operator, number){
  if (total === 0) {
    total = numbers[0];
  } else if (number === 0){
    numbers.pop();
  } else {
    total = eval(total + operator + number);
  }
  return total;
}

function calculate(numbers){
  if (operation === "+"){
    return add(numbers[numbers.length-1]);
  }else if (operation === "-"){
    return subtract(numbers[numbers.length-1]);
  }else if (operation === "x"){
    return multiply(numbers[numbers.length-1]);
  }else if (operation === "÷"){
    return divide(numbers[numbers.length-1]);
  }
}

$('a').on('click', function() {
 	var request = $(this).text();
  if (!isNaN(request)){
    var number = Number(request);
    digits.push(number);
    display.value = Number(digits.join(""));
  } else if (request === "="){
    $('.equal').on('click', function(){
      numbers.push(Number(digits.join("")));
      digits = [];
      calculate(numbers);
      display.value = total;
    });
  } else if(request === "C" || request === "AC"){
      numbers = [];
      digits = [];
      total = 0;
      display.value = total;
  } else {
      operation = request;
      numbers.push(Number(digits.join("")));
      digits = [];
      calculate(numbers);
      display.value = total;
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
	<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">

	</head>
	<body>
	<div class="container-fluid">
	<div class="calc">
	<div class="row buttons screen">
	<input type="text" disabled="disabled" id="display"/>
	</div>
	<div class="row buttons">
	<a class="ctrl btn">AC</a>
	<a class="ctrl btn">C</a>
	<a class ="operator btn">%</a>
	<a class ="operator btn">÷</a>
	</div>
	<div class="row buttons">
	<a class="btn">7</a>
	<a class="btn">8</a>
	<a class="btn">9</a>
	<a class="operator btn">x</a>
	</div>
	<div class="row buttons">
	<a class="btn">4</a>
	<a class="btn">5</a>
	<a class="btn">6</a>
	<a class="operator btn">-</a>
	</div>
	<div class="row buttons">
	<a class="btn">1</a>
	<a class="btn">2</a>
	<a class="btn">3</a>
	<a class="plus operator btn">+</a>
	</div>
	<div class="row buttons last-a-group">
	<a class="btn">0</a>
	<a class="operator btn">.</a>
	<a class="operator btn equal">=</a>
	</div>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
	<script src="main.js" charset="utf-8"></script>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body{
	/*background-image: url(http://49.media.tumblr.com/tumblr_lx8ybzt0LY1qduy16o1_500.gif);
	background-repeat: no-repeat;
	background-size: 100%;*/
	background-color: #A3F7BF;
	}

	.calc {
	width: 265px;
	height: 390px;
	margin: 12% auto;
	border-radius: 12px;
	box-shadow: 3px 3px 8px -1px #000000;
	background-color: #DDDDDD;
	}

	.buttons {
	margin-top: 10px;
	margin-left: 10px;
	}
	a {
	width: 50px;
	margin: 4px;
	text-align: center;
	background-color: #B9B8BD;
	color: #ffffff;
	outline: 0 none;
	padding: 100%;
	box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75);
	}

	a:hover {
	background-color: #A09FA4;
	color: #ffffff;
	}

	.plus {
	height: 94px;
	vertical-align: top;
	margin-bottom: -54px;
	}
	.operator {
	background-color: #53535F;
	color: #ffffff;
	}

	.operator:hover {
	background-color: #3A3A46;
	color: #ffffff;
	}

	.last-button-group {
	margin-top: 10px;
	}

	input, select, textarea {
	margin: 20px 0;
	margin-left: 3px;
	background-color: #AAB292;
	width: 89%;
	font-size: 2.2em;
	padding-left: 5px;
	}

	.ctrl {
	background-color: #B56777;
	color: #fff;
	text-align: center;
	}

	.ctrl:hover {
	background-color: #9C4E5E;
	color: #fff;
	}
	var display = document.getElementById('display');
	var numbers = [];
	var digits = [];
	var total = 0;
	var operation;

	function add(number){
	total += number;
	return total;
	}

	function subtract(number){
	total = Math.abs(total) - number;
	return total;
	}

	function multiply(number){
	return performOperation("*", number);
	}

	function divide(number){
	return performOperation("/", number);
	}

	function performOperation(operator, number){
	if (total === 0) {
	total = numbers[0];
	} else if (number === 0){
	numbers.pop();
	} else {
	total = eval(total + operator + number);
	}
	return total;
	}

	function calculate(numbers){
	if (operation === "+"){
	return add(numbers[numbers.length-1]);
	}else if (operation === "-"){
	return subtract(numbers[numbers.length-1]);
	}else if (operation === "x"){
	return multiply(numbers[numbers.length-1]);
	}else if (operation === "÷"){
	return divide(numbers[numbers.length-1]);
	}
	}

	$('a').on('click', function() {
	var request = $(this).text();
	if (!isNaN(request)){
	var number = Number(request);
	digits.push(number);
	display.value = Number(digits.join(""));
	} else if (request === "="){
	$('.equal').on('click', function(){
	numbers.push(Number(digits.join("")));
	digits = [];
	calculate(numbers);
	display.value = total;
	});
	} else if(request === "C" \|\| request === "AC"){
	numbers = [];
	digits = [];
	total = 0;
	display.value = total;
	} else {
	operation = request;
	numbers.push(Number(digits.join("")));
	digits = [];
	calculate(numbers);
	display.value = total;
	}
	});