diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..b784151 Binary files /dev/null and b/.DS_Store differ diff --git a/scientficStyles.css b/scientficStyles.css new file mode 100644 index 0000000..b04d8ac --- /dev/null +++ b/scientficStyles.css @@ -0,0 +1,112 @@ + +.calc-container { + margin: center; + display: grid; + justify-content: center; + align-content: center; + align-items: center; + min-height: 10vh; +} + +.calc-grid { + height: 500px; + width: 970px; + background-color: white; + padding: 22px, 24px, 24px, 25px; + border: 1px solid lightgrey; + border-radius: 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: 887px; + 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; +} + +.rad-deg { + width: 255px; + height: 54px; + font-size: 20px; + margin-right: 9px; + margin-left: 20px; + margin-bottom: 12px; + border-radius: 10px; + border: .5px solid #f1f3f4; + background-color: #f1f3f4; +} + +.rad-button { + margin-right: 30px; +} + +.deg-button { + margin-left: 40px; +} + +#darker-gray { + background-color: rgb(160, 160, 160); +} + +.row2-1 { + margin-left: 20px; +} + +.row3-1 { + margin-left: 20px; +} + +.row4-1 { + margin-left: 20px; +} + +.row5-1 { + margin-left: 20px; +} + +.stick { + font-size: 24px; + font-weight: bold; + color: lightgray; +} + +.row5-6 { + background-color: rgb(28, 112, 209); + color: white; +} diff --git a/scientific.html b/scientific.html new file mode 100644 index 0000000..0e66002 --- /dev/null +++ b/scientific.html @@ -0,0 +1,92 @@ + + + + + + + + + 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