From 2e509d6a98ac9a639b5732974f295c0378734b56 Mon Sep 17 00:00:00 2001 From: Adam Crowe Date: Sun, 22 Nov 2020 17:29:23 -0500 Subject: [PATCH] Add Files --- .DS_Store | Bin 0 -> 6148 bytes scientficStyles.css | 112 ++++++++++++++++++++++++++++++++++++++++++++ scientific.html | 92 ++++++++++++++++++++++++++++++++++++ standard.html | 79 +++++++++++++++++++++++++++++++ standard.js | 63 +++++++++++++++++++++++++ standardStyles.css | 106 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 452 insertions(+) create mode 100644 .DS_Store create mode 100644 scientficStyles.css create mode 100644 scientific.html create mode 100644 standard.html create mode 100644 standard.js create mode 100644 standardStyles.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b784151d4bf76a5181ee9c456ecf7ea77e797e78 GIT binary patch literal 6148 zcmeHKU2D@&7=F)MT^cDC5$5i4BY06tOUK3#A*ni0 zU2ng@zv3V8hxh~ZIUmZ>x=Y2$dEtGZ^YMP!+>GnUuQt<-3moCqLYKTw0|FB=D~L-Jl3$fsWJ=aa1Gr>{ltnV$~>-G0G&{HyH;FQdWquyOY> zPjWv>2B{2=!U0^~yo!>LPkVflgqh6asR_%fS+&E)=6v4iba$IhcYABmbmlud?WVKU z-Cite*2ewLql2T-?EU=1;^Vn`4Gdo?DYrHLgbOtE`cAzxiFtB@5#e2@cjVJ4G^1lm z!PJ;?YGE`h^Tocw`!ZiOdQSVaM}2w + + + + + + + + Calculator + + + + +
+
+ +
+ Standard |Scientific +
+ +
+
+
0
+
+ + +
+ + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/standard.html b/standard.html new file mode 100644 index 0000000..173d3d4 --- /dev/null +++ b/standard.html @@ -0,0 +1,79 @@ + + + + + + + + Calculator + + + + +
+
+ +
+ Standard |Scientific +
+ +
+
+
0
+
+ + +
+ + + + +
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/standard.js b/standard.js new file mode 100644 index 0000000..a6428cc --- /dev/null +++ b/standard.js @@ -0,0 +1,63 @@ +class Calculator { + constructor(previousOperandTextElement, currentOperandTextElement) { + this.previousOperandTextElement = previousOperandTextElement + this.currentOperandTextElement = currentOperandTextElement + } + + clear() { + this.currentOperand = '' + this.previousOperand = '' + this.operation = undefined + } + + delete() { + + } + + appendNumber(number) { + this.currentOperand = number + } + + chooseOperation(operation) { + if (this.currentOperand === '') return + if (this.previousOperand !== '') { + this.compute() + } + this.operation = operation + this.previousOperand = this.currentOperand + this.currentOperand = '' + } + + compute() { + + } + + updateDisplay() { + this.currentOperandTextElement.innerText = this.currentOperand + this.previousOperandTextElement= this.previousOperand + } +} + + +const numberButtons = document.querySelectorAll('[data-number]') +const operationButtons = document.querySelectorAll('[data-operation]') +const equalsButton = document.querySelector('[data-equals]') +const allClearButton = document.querySelector('[data-all-clear]') +const previousOperandTextElement = document.querySelector('[data-previous-operand]') +const currentOperandTextElement = document.querySelector('[data-current-operand]') + +const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement) + +numberButtons.forEach(button => { + button.addEventListener('click', () => { + calculator.appendNumber(button.innerText) + calculator.updateDisplay() + }) +}) + +operationButtons.forEach(button => { + button.addEventListener('click', () => { + calculator.chooseOperation(button.innerText) + calculator.updateDisplay() + }) +}) \ No newline at end of file diff --git a/standardStyles.css b/standardStyles.css new file mode 100644 index 0000000..633c391 --- /dev/null +++ b/standardStyles.css @@ -0,0 +1,106 @@ + +.calc-container { + margin: center; + display: grid; + justify-content: center; + align-content: center; + align-items: center; + min-height: 10vh; +} + +.calc-grid { + height: 500px; + width: 580px; + background-color: white; + padding: 22px, 24px, 24px, 25px; + border: 1px solid lightgrey; + border-radius: 10px; +} + +.standard-scientific-btn { + margin-top: 10px; +} + +.standard-scientific-btn span { + font-size: 20px; +} + +#standard { + margin-left: 20px; + margin-right: 5px; +} + +#scientific { + margin-left: 9px; +} + +a:hover { + color: blue; +} + + + +.display { + width: 485px; + height: 30px; + border: 1px solid lightgray; + border-radius: 10px; + text-align: right; + font-size: 30px; + padding: 20px; + justify-content: center; + margin-top: 10px; + margin-bottom: 20px; + margin-left: 20px; + margin-right: 20px; +} + +button { + width: 122px; + height: 54px; + font-size: 20px; + margin-right: 9px; + margin-bottom: 12px; + border-radius: 10px; + border: .5px solid #f1f3f4; + background-color: #f1f3f4; + justify-content: center; +} + +.row1 { + margin-left: 20px; + margin-right: 20px; +} + +.row2 { + margin-left: 20px; + margin-right: 20px; +} + +.row3 { + margin-left: 20px; + margin-right: 20px; +} + +.row4 { + margin-left: 20px; + margin-right: 20px; +} + +.row5 { + margin-left: 20px; + margin-right: 20px; +} + +.row5-2 { + font-weight: bold; +} + +.row5-3 { + background-color: rgb(28, 112, 209); + color: white; +} + +#darker-gray { + background-color: rgb(160, 160, 160); +} \ No newline at end of file