From 3a2d966984de993e7d23035d987aa78832be59da Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 2 May 2017 14:42:54 -0700 Subject: [PATCH 1/7] Submitting Phase 1 for review --- index.html | 55 +++++++++++++++++++++++ package.json | 22 ++++++++++ styles.css | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 199 insertions(+) create mode 100644 index.html create mode 100644 package.json create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..409fcb8 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + Mac Calculator + + + + + +
+
+
+ 0 +
+
+ +
+
AC
+
+/-
+
%
+
÷
+
+ +
+
7
+
8
+
9
+
x
+
+ +
+
4
+
5
+
6
+
-
+
+ +
+
1
+
2
+
3
+
+
+
+ +
+
0
+
.
+
=
+
+ +
+ + 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..69b574f --- /dev/null +++ b/styles.css @@ -0,0 +1,122 @@ +@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-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: 1px; + 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: 1px; + 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; + order: 1; + 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 +} From 64805523a4a2d35afbd8dfb748a73e4b1814d547 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 4 May 2017 16:33:14 -0700 Subject: [PATCH 2/7] WIP --- index.html | 64 ++++++++++++++++++---------------- javascripts/controller.js | 72 +++++++++++++++++++++++++++++++++++++++ styles.css | 9 +++-- 3 files changed, 113 insertions(+), 32 deletions(-) create mode 100644 javascripts/controller.js diff --git a/index.html b/index.html index 409fcb8..4f53411 100644 --- a/index.html +++ b/index.html @@ -10,46 +10,52 @@
+
- 0 +
-
-
AC
-
+/-
-
%
-
÷
-
+
-
-
7
-
8
-
9
-
x
-
+
+
AC
+
+/-
+
%
+
÷
+
-
-
4
-
5
-
6
-
-
-
+
+
7
+
8
+
9
+
x
+
-
-
1
-
2
-
3
-
+
-
+
+
4
+
5
+
6
+
-
+
+ +
+
1
+
2
+
3
+
+
+
+ +
+
0
+
.
+
=
+
-
-
0
-
.
-
=
+ diff --git a/javascripts/controller.js b/javascripts/controller.js new file mode 100644 index 0000000..80b35b5 --- /dev/null +++ b/javascripts/controller.js @@ -0,0 +1,72 @@ +(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 + 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 + return + } + if (/^\d$/.test(buttonValue)) { + if (operation) { + secondInput = parseInt( + secondInput + ? secondInput + '' + buttonValue + : buttonValue, + 10) + + } else { + firstInput = parseInt( + firstInput + ? firstInput + '' + buttonValue + : buttonValue, + 10) + } + return + } + if (buttonValue === '+') { + operation = '+' + return + } + // if (buttonValue === '=') { + // calculate() + // } + updateDisplay() + } + + clear.onClick = function() { + currentValue = []; + }; + function calculate() { + // do operation update display with the result of operation + result = firstInput + secondInput + console.log( '<3333333 success <3333333', result ) + return result + } + + function updateDisplay() { + console.log( '---===firstInput===---', firstInput ) + console.log( '---===secondInput===---', secondInput ) + console.log( '---===operation===---', operation ) + displayPort.innerText = secondInput ? secondInput : firstInput + } + +})() diff --git a/styles.css b/styles.css index 69b574f..4210681 100644 --- a/styles.css +++ b/styles.css @@ -18,6 +18,10 @@ user-select: none; } +/*.calculator-display-port{ + background-color: #bada55 +}*/ + .calculator-decimal-button:hover, .calculator-number-button:hover, .calculator-function-button:hover { @@ -44,7 +48,7 @@ transition: background-color 100ms; transition-delay: 50ms; width: 25%; - margin: 1px; + margin: 0px 1px 1px 0px; display:flex; font-weight: 400; justify-content: center; @@ -56,7 +60,7 @@ width: 41%; justify-content: flex-start; align-items: center; - margin: 1px; + margin: 0px 1px 1px 0px; padding-left: 22px; } @@ -74,7 +78,6 @@ .calculator-display { display: flex; - order: 1; font-size: 3em; height: 77.5px; justify-content: flex-end; From 02507693e035b6682b67db34477d6b987ae9dc89 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 4 May 2017 16:51:09 -0700 Subject: [PATCH 3/7] addition works --- javascripts/controller.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/javascripts/controller.js b/javascripts/controller.js index 80b35b5..b479ae0 100644 --- a/javascripts/controller.js +++ b/javascripts/controller.js @@ -23,6 +23,7 @@ console.log( '---===target===---', buttonValue ) if (buttonValue === 'AC') { firstInput = secondInput = operation = null + updateDisplay() return } if (/^\d$/.test(buttonValue)) { @@ -40,16 +41,19 @@ : buttonValue, 10) } + updateDisplay() return } if (buttonValue === '+') { operation = '+' + updateDisplay() + return + } + if (buttonValue === '=') { + calculate() + updateDisplay() return } - // if (buttonValue === '=') { - // calculate() - // } - updateDisplay() } clear.onClick = function() { @@ -59,6 +63,9 @@ // do operation update display with the result of operation result = firstInput + secondInput console.log( '<3333333 success <3333333', result ) + secondInput = undefined + firstInput = result + updateDisplay() return result } From 3ca607f0ef404c3d0fb4909a0cd800104ad2504f Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Fri, 5 May 2017 11:13:46 -0700 Subject: [PATCH 4/7] Added in math calculations, need to work on order of operations now --- javascripts/controller.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/javascripts/controller.js b/javascripts/controller.js index b479ae0..9410bd4 100644 --- a/javascripts/controller.js +++ b/javascripts/controller.js @@ -45,7 +45,22 @@ return } if (buttonValue === '+') { - operation = '+' + operation = function(firstInput,secondInput) {return firstInput + secondInput} + updateDisplay() + return + } + if (buttonValue === '-') { + operation = function(firstInput,secondInput) {return firstInput - secondInput} + updateDisplay() + return + } + if (buttonValue === '/') { + operation = function(firstInput,secondInput) {return firstInput / secondInput} + updateDisplay() + return + } + if (buttonValue === 'x') { + operation = function(firstInput,secondInput) {return firstInput * secondInput} updateDisplay() return } @@ -58,10 +73,11 @@ clear.onClick = function() { currentValue = []; - }; + } + function calculate() { // do operation update display with the result of operation - result = firstInput + secondInput + result = operation(firstInput, secondInput) console.log( '<3333333 success <3333333', result ) secondInput = undefined firstInput = result From 499dae4ec2c3e4bc22e9bb2da21a8b72971dc5e2 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Fri, 5 May 2017 14:07:56 -0700 Subject: [PATCH 5/7] percent button and +/- button working : --- javascripts/controller.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/javascripts/controller.js b/javascripts/controller.js index 9410bd4..a7d453f 100644 --- a/javascripts/controller.js +++ b/javascripts/controller.js @@ -6,6 +6,7 @@ firstInput = null operation = null + secondOperation = null secondInput = null // currentValue = 0 @@ -64,6 +65,18 @@ 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() From 4f2bc5722e34f70546637e165e5d12dbbb501836 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Fri, 5 May 2017 14:31:17 -0700 Subject: [PATCH 6/7] fixed code given feedback --- javascripts/controller.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/javascripts/controller.js b/javascripts/controller.js index a7d453f..35cfe1f 100644 --- a/javascripts/controller.js +++ b/javascripts/controller.js @@ -46,22 +46,22 @@ return } if (buttonValue === '+') { - operation = function(firstInput,secondInput) {return firstInput + secondInput} + operation = operations.add updateDisplay() return } if (buttonValue === '-') { - operation = function(firstInput,secondInput) {return firstInput - secondInput} + operation = operations.subtract updateDisplay() return } if (buttonValue === '/') { - operation = function(firstInput,secondInput) {return firstInput / secondInput} + operation = operations.divide updateDisplay() return } if (buttonValue === 'x') { - operation = function(firstInput,secondInput) {return firstInput * secondInput} + operation = operations.multiply updateDisplay() return } @@ -84,6 +84,13 @@ } } + 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 = []; } From 6de7d03ff6863b9a6b443a1f344eaa5ea2d34f3e Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Fri, 5 May 2017 16:59:20 -0700 Subject: [PATCH 7/7] forgot to add commas which broke my code --- javascripts/controller.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/javascripts/controller.js b/javascripts/controller.js index 35cfe1f..40f9c65 100644 --- a/javascripts/controller.js +++ b/javascripts/controller.js @@ -85,9 +85,9 @@ } var operations = { - add: function(a,b) { return a + b } - subtract: function(a,b) { return a - b } - divide: function(a,b) { return a / b } + 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 } }