diff --git a/README.md b/README.md index af69754..0cbd2b4 100644 --- a/README.md +++ b/README.md @@ -1 +1,6 @@ -# calculator \ No newline at end of file +# ready-projects + +## Task 1. Calculator +- [описание задания](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/ready-projects/calculator.md) +- [видео](https://youtu.be/VHGaBc9OcXU) +- [демо](https://irinainina.github.io/ready-projects/calculator-ru/) diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b0769f --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Calculator + + + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d97b370 --- /dev/null +++ b/script.js @@ -0,0 +1,94 @@ +const numbers = document.querySelectorAll('.number'); +const operations = document.querySelectorAll('.operator'); +const clearBtns = document.querySelectorAll('.clear-btn'); +const decimalBtn = document.getElementById('decimal'); +const result = document.getElementById('result'); +const display = document.getElementById('display'); +let MemoryCurrentNumber = 0; +let MemoryNewNumber = false; +let MemoryPendingOperation = ''; + +for (var i = 0; i < numbers.length; i++) { + var number = numbers[i]; + number.addEventListener('click', function (e) { + numberPress(e.target.textContent); + }); +} + +for (var i = 0; i < operations.length; i++) { + var operationBtn = operations[i]; + operationBtn.addEventListener('click', function (e) { + operationPress(e.target.textContent); + }); +} + +for (var i = 0; i < clearBtns.length; i++) { + var clearBtn = clearBtns[i]; + clearBtn.addEventListener('click', function (e) { + clear(e.target.textContent); + }); +} + +decimalBtn.addEventListener('click', decimal); + +function numberPress(number) { + if (MemoryNewNumber) { + display.value = number; + MemoryNewNumber = false; + } else { + if (display.value === '0') { + display.value = number; + } else { + display.value += number; + } + } +} + +function operationPress(op) { + let localOperationMemory = display.value; + + if (MemoryNewNumber && MemoryPendingOperation !== '=') { + display.value = MemoryCurrentNumber; + } else { + MemoryNewNumber = true; + if (MemoryPendingOperation === '+') { + MemoryCurrentNumber += +localOperationMemory; + } else if (MemoryPendingOperation === '-') { + MemoryCurrentNumber -= +localOperationMemory; + } else if (MemoryPendingOperation === '*') { + MemoryCurrentNumber *= +localOperationMemory; + } else if (MemoryPendingOperation === '/') { + MemoryCurrentNumber /= +localOperationMemory; + } else { + MemoryCurrentNumber = +localOperationMemory; + } + display.value = MemoryCurrentNumber; + MemoryPendingOperation = op; + } +} + +function decimal(argument) { + let localDecimalMemory = display.value; + + if (MemoryNewNumber) { + localDecimalMemory = '0.'; + MemoryNewNumber = false; + } else { + if (localDecimalMemory.indexOf('.') === -1) { + localDecimalMemory += '.'; + } + } + display.value = localDecimalMemory; +} + +function clear(id) { + if (id === 'ce') { + display.value = '0'; + MemoryNewNumber = true; + } else if (id === 'c') { + display.value = '0'; + MemoryNewNumber = true; + MemoryCurrentNumber = 0; + MemoryPendingOperation = ''; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..89b3e8d --- /dev/null +++ b/style.css @@ -0,0 +1,115 @@ +body { + font-size: 20px; +} +.main { + display: flex; + justify-content: center; + padding-top: 40px; +} +.calc { + background-color: #1c93ee; + width: 385px; + padding: 30px; + border-radius: 6px; +} +.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; +} +.calc_button-row td { + margin: 0 auto; + padding: 5px; +} +.btn { + width: 85px; + height: 60px; + background-color: #f4f4f4; + font-size: 27px; + color: #666666; + text-transform: uppercase; + border-radius: 6px; + padding: 0; + cursor: pointer; + transition: 0.1s all; +} +.btn-hover-red:hover { + background-color: #d83e33; + color: #f2f2f2; +} +.btn-hover-orange:hover { + background-color: #ff6a00; + color: #f2f2f2; +} +.btn-hover-green:hover { + background-color: green; + color: #f2f2f2; +} +.btn:active { + transform: translateY(-1px); +} +.btn-long { + width: 183px; +} +.btn-equal { + height: 145px; +} +input, +button { + padding: 5px 15px; + margin: 10px; + border: 0; + outline: 0; + border-radius: 4px; +} +button { + margin-left: 0; + padding: 15px 24px; +} +@media screen and (max-width: 768px) { + .calc { + width: 300px; + margin: 0 auto; + } + .calc-display-input { + width: 280px; + } + input[placeholder] { + font-size: 28px; + } + input::-moz-placeholder { + font-size: 28px; + } + input:-moz-placeholder { + font-size: 28px; + } + input:-ms-input-placeholder { + font-size: 28px; + } + .btn { + width: 64px; + } + .btn-long { + width: 140px; + } +} +@media screen and (max-width: 400px) { + .calc { + width: 280px; + } + .calc-display-input { + width: 260px; + } + .btn { + width: 60px; + } + .btn-long { + width: 132px; + } +}