diff --git a/index.html b/index.html index df6b231..4caa0e2 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,40 @@ - - - - Calculator - - + + + Calculator + + + -
-
-
-
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - -
- \ No newline at end of file + diff --git a/script.js b/script.js index 4c8aa9d..16f256b 100644 --- a/script.js +++ b/script.js @@ -1,126 +1,119 @@ -class Calculator { - constructor(previousOperandTextElement, currentOperandTextElement) { - this.previousOperandTextElement = previousOperandTextElement - this.currentOperandTextElement = currentOperandTextElement - this.clear() - } - - clear() { - this.currentOperand = '' - this.previousOperand = '' - this.operation = undefined - } - - delete() { - this.currentOperand = this.currentOperand.toString().slice(0, -1) - } - - appendNumber(number) { - if (number === '.' && this.currentOperand.includes('.')) return - this.currentOperand = this.currentOperand.toString() + number.toString() - } - - chooseOperation(operation) { - if (this.currentOperand === '') return - if (this.previousOperand !== '') { - this.compute() - } - this.operation = operation - this.previousOperand = this.currentOperand - this.currentOperand = '' - } - - compute() { - let computation - const prev = parseFloat(this.previousOperand) - const current = parseFloat(this.currentOperand) - if (isNaN(prev) || isNaN(current)) return - switch (this.operation) { - case '+': - computation = prev + current - break - case '-': - computation = prev - current - break - case '*': - computation = prev * current - break - case '÷': - computation = prev / current - break - default: - return - } - this.currentOperand = computation - this.operation = undefined - this.previousOperand = '' - } - - getDisplayNumber(number) { - const stringNumber = number.toString() - const integerDigits = parseFloat(stringNumber.split('.')[0]) - const decimalDigits = stringNumber.split('.')[1] - let integerDisplay - if (isNaN(integerDigits)) { - integerDisplay = '' +let numbers = document.querySelectorAll('[data-number]'), + operations = document.querySelectorAll('[data-operation]'), + decemalBtn = document.querySelector('[decimal]'), + clearBtns = document.querySelectorAll('.clear_btn'), + resultBtn = document.querySelector('[data-equals]'), + plusMinusBtn = document.querySelector('[plus-minus]'), + display = document.getElementById('display'), + MemoryCurrentNumber = 0, + MemoryNewNumber = false, + MemoryPendingOperation = ''; + + +for (let i = 0; i < numbers.length; i++) { + let number = numbers[i]; + number.addEventListener('click', function (e) { + NumberPress(e.target.textContent); + }) +}; + +for (let i = 0; i < operations.length; i++) { + let operationBtn = operations[i]; + operationBtn.addEventListener('click', function (e) { + operation(e.target.textContent); + }); +}; + +for (let i = 0; i < clearBtns.length; i++) { + + let clearBtn = clearBtns[i]; + clearBtn.addEventListener('click', function (e) { + clear(e.srcElement.id); + }); +}; + +decemalBtn.addEventListener('click', decimal); + +plusMinusBtn.addEventListener('click', negativeNumber); + + +function NumberPress(number) { + if (MemoryNewNumber) { + display.value = number; + MemoryNewNumber = false; } else { - integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 }) - } - if (decimalDigits != null) { - return `${integerDisplay}.${decimalDigits}` + if (display.value === '0') { + display.value = number; + } else { + display.value += number; + } + }; +}; + +function operation(op) { + let localOperationMemory = display.value; + + + if (MemoryNewNumber && MemoryPendingOperation !== '=') { + display.value = MemoryCurrentNumber; } else { - return integerDisplay + MemoryNewNumber = true; + if (MemoryPendingOperation === '+') { + MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10+localOperationMemory*10)/10); + } else if (MemoryPendingOperation === '-') { + MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10-localOperationMemory*10)/10); + } else if (MemoryPendingOperation === '*') { + MemoryCurrentNumber = +parseFloat(((MemoryCurrentNumber*10)*(localOperationMemory*10))/100); + } else if (MemoryPendingOperation === '÷') { + MemoryCurrentNumber = +parseFloat((MemoryCurrentNumber*10)/(localOperationMemory*10)); + } else if (MemoryPendingOperation === '√') { + MemoryCurrentNumber **= parseFloat(1/localOperationMemory); + if (MemoryCurrentNumber.toString() == NaN.toString()) { + MemoryCurrentNumber = "Error"; + }; + } else if (MemoryPendingOperation === '^') { + MemoryCurrentNumber **= parseFloat(localOperationMemory); + } else { + MemoryCurrentNumber= parseFloat(localOperationMemory); + }; + display.value = MemoryCurrentNumber; + MemoryPendingOperation = op; } - } - - updateDisplay() { - this.currentOperandTextElement.innerText = - this.getDisplayNumber(this.currentOperand) - if (this.operation != null) { - this.previousOperandTextElement.innerText = - `${this.getDisplayNumber(this.previousOperand)} ${this.operation}` + + console.log('click on button with operation ' + op +'!'); +}; + +function decimal(argument) { + let localDecimalMemory = display.value; + + if (MemoryNewNumber) { + localDecimalMemory ='0.'; + MemoryNewNumber = false; } else { - this.previousOperandTextElement.innerText = '' + if (localDecimalMemory.indexOf('.') === -1 ) { + localDecimalMemory += '.'; + }; + }; + display.value = localDecimalMemory; +}; + +function clear(id) { + if (id === 'DEL') { + display.value = '0'; + MemoryNewNumber = true; + } else if (id === 'AC') { + display.value = '0'; + MemoryNewNumber = true; + MemoryCurrentNumber = 0; + MemoryPendingOperation = ''; } - } -} - - -const numberButtons = document.querySelectorAll('[data-number]') -const operationButtons = document.querySelectorAll('[data-operation]') -const equalsButton = document.querySelector('[data-equals]') -const deleteButton = document.querySelector('[data-delete]') -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() - }) -}) - -equalsButton.addEventListener('click', button => { - calculator.compute() - calculator.updateDisplay() -}) - -allClearButton.addEventListener('click', button => { - calculator.clear() - calculator.updateDisplay() -}) - -deleteButton.addEventListener('click', button => { - calculator.delete() - calculator.updateDisplay() -}) \ No newline at end of file + console.log('click on button with '+ id +'!'); +}; + + + +function negativeNumber(argument) { + let localNegatuveNumberMemory = display.value; + MemoryCurrentNumber = localNegatuveNumberMemory * (-1); + display.value = MemoryCurrentNumber; +}; diff --git a/styles.css b/styles.css index 11b6fdb..dd3f596 100644 --- a/styles.css +++ b/styles.css @@ -1,58 +1,65 @@ -*, *::before, *::after { - box-sizing: border-box; - font-family: Gotham Rounded, sans-serif; - font-weight: normal; +*, * ::before, *::after { + box-sizing: border-box; + font-family: Gotham Rounded, sans-serif; + font-weight: normal; } - body { - padding: 0; - margin: 0; - background: linear-gradient(to right, #00AAFF, #00FF6C); + padding: 0; + margin: 0; + background: linear-gradient(to right, #00AAFF, #00FF6C); } - .calculator-grid { - display: grid; - justify-content: center; - align-content: center; - min-height: 100vh; - grid-template-columns: repeat(4, 100px); - grid-template-rows: minmax(120px, auto) repeat(5, 100px); + display: grid; + justify-content: center; + align-content: center; + min-height: 100vh; + grid-template-columns: repeat(4, 100px); + grid-template-rows: minmax(120px, auto) repeat(5, 100px); +} +.calc-display-input { + width: 360px; + height: 60px; + margin: 20px 0; + border-radius: 6px; + background-color: #1d1d1d; + color: #fff; + text-align: right; + font-size: 35px; + padding: 10px; } - .calculator-grid > button { - cursor: pointer; - font-size: 2rem; - border: 1px solid white; - outline: none; - background-color: rgba(255, 255, 255, .75); + cursor: pointer; + font-size: 2rem; + border: 1px solid white; + outline: none; + background-color: rgba(255, 255, 255, .75); } - .calculator-grid > button:hover { - background-color: rgba(255, 255, 255, .9); -} - -.span-two { - grid-column: span 2; + background-color: rgba(255, 255, 255, .9); } +.four-size { + grid-column: span 4; + border-radius: 0 0 6px 6px; +} .output { - grid-column: 1 / -1; - background-color: rgba(0, 0, 0, .75); - display: flex; - align-items: flex-end; - justify-content: space-around; - flex-direction: column; - padding: 10px; - word-wrap: break-word; - word-break: break-all; + grid-column: 1/ -1; + background-color: rgba(0, 0, 0, .75); + display: flex; + align-items: flex-end; + justify-content: space-around; + flex-direction: column; + padding: 10px; + word-wrap: break-word; + word-break: break-all; } .output .previous-operand { - color: rgba(255, 255, 255, .75); - font-size: 1.5rem; + background-color: rgba(255, 255, 255, .75); + font-size: 1.5rem; } .output .current-operand { - color: white; - font-size: 2.5rem; -} \ No newline at end of file + color: white;; + font-size: 1.5rem; +}