itsecd · IluhaZaz · Feb 20, 2026 · Feb 20, 2026 · Feb 21, 2026 · Feb 21, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+    <title>Calculator</title>
+</head>
+<body>
+        <div class="calculator">
+            <div id="operand-1" class="grid-elem">
+                <input type="text">
+            </div>
+            <select class="grid-elem" id="operation">
+                <option value="+">+</option>
+                <option value="-">-</option>
+                <option value="*">*</option>
+                <option value="/">/</option>
+            </select>
+            <div id="operand-2" class="grid-elem">
+                <input type="text">
+            </div>
+
+            <button id="calculate" class="grid-elem">подсчитать</button>
+
+            <div id="results" class="grid-elem"></div>
+        </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,80 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const num1Input = document.querySelector('#operand-1 input');
+    const num2Input = document.querySelector('#operand-2 input');
+    const operatorSelect = document.getElementById('operation');
+    const calculateBtn = document.getElementById('calculate');
+    const resultDiv = document.getElementById('results');
+
+    let calculationHistory = [];
+
+    function updateHistoryDisplay() {
+    resultDiv.innerHTML = '';
+
+    const lastItems = calculationHistory.slice(-3);
+
+    lastItems.forEach((calc, index) => {
+        const item = document.createElement('div');
+        item.className = 'history-item';
+        if (index === lastItems.length - 1) { 
+            item.classList.add('current-result');
+        }
+        item.textContent = `${calc.num1} ${calc.operator} ${calc.num2} = ${calc.result}`;
+        resultDiv.appendChild(item);
+    });
+}
+
+    function calculate() {
+
+        const num1 = num1Input.value;
+        const num2 = num2Input.value;
+        const operator = operatorSelect.value;
+
+        if (num1 === '' || isNaN(num1)) {
+            alert('Некорректное число 1');
+            return;
+        }
+
+        if (num2 === '' || isNaN(num2)) {
+            alert('Некорректное число 2');
+            return;
+        }
+
+        const n1 = parseFloat(num1);
+        const n2 = parseFloat(num2);
+
+        let result;
+        switch(operator) {
+            case '+':
+                result = n1 + n2;
+                break;
+            case '-':
+                result = n1 - n2;
+                break;
+            case '*':
+                result = n1 * n2;
+                break;
+            case '/':
+                if (n2 === 0) {
+                    alert('Деление на ноль');
+                    return;
+                }
+                result = n1 / n2;
+                break;
+        }
+
+        calculationHistory.push({
+            num1: n1,
+            operator: operator,
+            num2: n2,
+            result: result
+        });
+
+        updateHistoryDisplay();
+
+        resultDiv.scrollTop = resultDiv.scrollHeight;
+    }
+
+    calculateBtn.addEventListener('click', calculate);
+
+    updateHistoryDisplay();
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,96 @@
+*{
+    color: #f4261d;
+    font-size: medium;
+}
+.calculator{
+    width: 50%;
+    padding: 20px;
+    display: grid;
+    grid-template-areas:
+        "operand-1 operation operand-2"
+        "calculate calculate calculate"
+        "results results results";
+     grid-template-rows: 1fr 1fr 2fr;
+     grid-template-columns: 3fr 1fr 3fr;
+     gap: 30px;
+     background-color: #baffc2;
+     border-radius: 8px;
+     height: 40%;
+
+     min-width: 150px;
+     min-height: 260px;
+}
+body, html{
+    height: 100%;
+}
+#operand-1{ 
+    grid-area: operand-1; 
+}
+#operation{ 
+    grid-area: operation; 
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    text-align: center;
+}
+#operand-2{ 
+    grid-area: operand-2; 
+}
+#calculate{ 
+    grid-area: calculate; 
+    width: 30%;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 130px;
+}
+#results{ 
+    grid-area: results; 
+}
+.grid-elem input{
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: inherit;
+  text-align: center;
+}
+.calculator > .grid-elem {
+    border-radius: 10px;
+    border-color: #f4261d;
+    border-width: 2px;
+    border-style: dashed;
+    background: transparent;
+}
+.history-item{
+    color: #f4261d;
+    opacity: 0.5;
+}
+.current-result{
+    opacity: 1;
+}
+
+@media (max-width: 600px) {
+  .calculator {
+    grid-template-areas:
+      "operand-1"
+      "operation"
+      "operand-2"
+      "calculate"
+      "results";
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(5, 1fr);
+    height: auto;
+    min-height: 400px;
+    gap: 10px;
+    padding: 15px;
+    min-width: 300px;
+  }
+
+  .grid-elem, .operation {
+    font-size: smaller;
+  }
+}