irinainina · A1exgu · Sep 19, 2020 · Sep 19, 2020 · Oct 15, 2020
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# calculator
+# 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
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+    <link href="styles.css" rel="stylesheet" >
+    <script src="sccript.js" defer></script>
+</head>
+<body>
+    <div class="calculator-grid">
+        <div class="output">
+            <div data-previous-operator class="previous-operator"></div>
+            <div data-current-operator class="current-operator"></div>
+        </div>
+        <button data-all-clear class="span-two">AC</button>
+        <button data-delete>DEL</button>
+        <button data-operation>/</button>
+        <button data-number>1</button>
+        <button data-number>2</button>
+        <button data-number>3</button>
+        <button data-operation>*</button>
+        <button data-number>4</button>
+        <button data-number>5</button>
+        <button data-number>6</button>
+        <button data-operation>+</button>
+        <button data-number>7</button>
+        <button data-number>8</button>
+        <button data-number>9</button>
+        <button data-operation>-</button>
+        <button data-number>.</button>
+        <button data-number>0</button>
+        <button data-equals class="span-two">=</button>
+    </div>
+</body>
+</html>
diff --git a/script.js 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
@@ -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;
+  }
+}