diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4f53411
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Mac Calculator
+
+
+
+
+
+
+
+
+
diff --git a/javascripts/controller.js b/javascripts/controller.js
new file mode 100644
index 0000000..40f9c65
--- /dev/null
+++ b/javascripts/controller.js
@@ -0,0 +1,115 @@
+(function(){
+ var calculatorButtons, input, screen, clear, number, mathFunction, operation, operationStack, numberStack, currentValue;
+
+ calculatorButtons = document.querySelectorAll('.calculator-button-container')[0];
+ calculatorButtons.addEventListener("click", buttonClicked, false)
+
+ firstInput = null
+ operation = null
+ secondOperation = null
+ secondInput = null
+ // currentValue = 0
+
+ displayPort = document.querySelectorAll(".calculator-display-port")[0];
+ clear = document.querySelector(".calculator-AC-button");
+ number = document.querySelector(".calculator-number-button");
+ mathFunction = document.querySelector(".calculator-function-button");
+ // operation = document.querySelector(".calculator-operation-button");
+ decimal = document.querySelector(".calculator-decimal-button");
+
+
+ function buttonClicked(event) {
+ var displayedNumber = displayPort.innerText
+ var buttonValue = event.target.innerText
+ console.log( '---===target===---', buttonValue )
+ if (buttonValue === 'AC') {
+ firstInput = secondInput = operation = null
+ updateDisplay()
+ return
+ }
+ if (/^\d$/.test(buttonValue)) {
+ if (operation) {
+ secondInput = parseInt(
+ secondInput
+ ? secondInput + '' + buttonValue
+ : buttonValue,
+ 10)
+
+ } else {
+ firstInput = parseInt(
+ firstInput
+ ? firstInput + '' + buttonValue
+ : buttonValue,
+ 10)
+ }
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '+') {
+ operation = operations.add
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '-') {
+ operation = operations.subtract
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '/') {
+ operation = operations.divide
+ updateDisplay()
+ return
+ }
+ if (buttonValue === 'x') {
+ operation = operations.multiply
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '+/-') {
+ operation = function(firstInput,secondInput) {return firstInput * -1}
+ calculate()
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '%') {
+ operation = function(firstInput,secondInput) {return firstInput / 100}
+ calculate()
+ updateDisplay()
+ return
+ }
+ if (buttonValue === '=') {
+ calculate()
+ updateDisplay()
+ return
+ }
+ }
+
+ var operations = {
+ add: function(a,b) { return a + b },
+ subtract: function(a,b) { return a - b },
+ divide: function(a,b) { return a / b },
+ multiply: function(a,b) { return a * b }
+ }
+
+ clear.onClick = function() {
+ currentValue = [];
+ }
+
+ function calculate() {
+ // do operation update display with the result of operation
+ result = operation(firstInput, secondInput)
+ console.log( '<3333333 success <3333333', result )
+ secondInput = undefined
+ firstInput = result
+ updateDisplay()
+ return result
+ }
+
+ function updateDisplay() {
+ console.log( '---===firstInput===---', firstInput )
+ console.log( '---===secondInput===---', secondInput )
+ console.log( '---===operation===---', operation )
+ displayPort.innerText = secondInput ? secondInput : firstInput
+ }
+
+})()
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..964ed26
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "mac-calculator-clone",
+ "version": "1.0.0",
+ "description": "A clone of the mac calculator for the web!",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/mKleinCreative/mac-calculator-clone.git"
+ },
+ "author": "Michael Klein",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mKleinCreative/mac-calculator-clone/issues"
+ },
+ "homepage": "https://github.com/mKleinCreative/mac-calculator-clone#readme",
+ "dependencies": {
+ "normalize.css": "^6.0.0"
+ }
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..4210681
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,400');
+
+
+
+.calculator-container {
+ display: flex;
+ position: absolute;
+ left: 50%;
+ top: 35%;
+ transform: translateX(-50%);
+ flex-direction: column;
+ justify-content: center;
+ font-family: 'Roboto', sans-serif;
+ border-radius: 1.5%;
+ width: 230px;
+ height: 320px;
+ background-color: #A0A0A0;
+ user-select: none;
+}
+
+/*.calculator-display-port{
+ background-color: #bada55
+}*/
+
+.calculator-decimal-button:hover,
+.calculator-number-button:hover,
+.calculator-function-button:hover {
+ background-color: #B7B7B7;
+}
+
+.calculator-decimal-button:active,
+.calculator-number-button:active,
+.calculator-function-button:active {
+ background-color: #9E9E9E;
+ fontfilter: invert(100%);
+}
+
+.calculator-operation-button:hover {
+ background-color: #D68039;
+}
+
+.calculator-operation-button:active {
+ background-color: #AF692F;
+ color: rgb(104,104,104);
+}
+
+.calculator-button {
+ transition: background-color 100ms;
+ transition-delay: 50ms;
+ width: 25%;
+ margin: 0px 1px 1px 0px;
+ display:flex;
+ font-weight: 400;
+ justify-content: center;
+ align-items: center;
+}
+
+.calculator-zero-button {
+ display: flex;
+ width: 41%;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 0px 1px 1px 0px;
+ padding-left: 22px;
+}
+
+.calculator-row-1,
+.calculator-row-2,
+.calculator-row-3,
+.calculator-row-4,
+.calculator-row-5,
+.calculator-row-6 {
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ height: 48.5px;
+}
+
+.calculator-display {
+ display: flex;
+ font-size: 3em;
+ height: 77.5px;
+ justify-content: flex-end;
+ align-items: center;
+ color: #F7F1EF;
+ padding-right: 5px;
+ font-weight: 100;
+}
+
+.calculator-operation-button {
+ font-size: 1.25em;
+ background-color: #EF9343;
+ color: #F7F1EF;
+}
+
+.calculator-decimal-button,
+.calculator-number-button {
+ font-size: 1.25em;
+ background-color: #E0E0E0;
+ align-content: center;
+}
+.calculator-function-button {
+ font-size: 1.25em;
+ background-color: #D6D6D6 ;
+}
+
+.calculator-row-1 {
+ order: 2;
+}
+
+.calculator-row-2 {
+ order: 3
+}
+
+.calculator-row-3 {
+ order: 4
+}
+
+.calculator-row-4 {
+ order: 5
+}
+
+.calculator-row-5 {
+ order: 6
+}