itsecd · Darktezi · Feb 22, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Калькулятор</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="calculator-card">
+    <div class="input-group">
+        <input type="text" id="num1">
+
+        <select id="operation">
+            <option value="+">+</option>
+            <option value="-">-</option>
+            <option value="*">*</option>
+            <option value="/">/</option>
+        </select>
+
+        <input type="text" id="num2">
+    </div>
+
+    <button id="calcBtn">подсчитать</button>
+
+    <div class="result-box">
+        <div id="historyContainer"></div>
+        <div id="currentResult" class="current-val"></div>
+    </div>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const calcBtn = document.getElementById('calcBtn');
+    const historyContainer = document.getElementById('historyContainer');
+    const currentResult = document.getElementById('currentResult');
+
+    let historyArr = [];
+
+    calcBtn.addEventListener('click', () => {
+        const n1 = document.getElementById('num1');
+        const n2 = document.getElementById('num2');
+        const op = document.getElementById('operation').value;
+
+        n1.classList.remove('error-border');
+        n2.classList.remove('error-border');
+
+        const val1 = n1.value.trim();
+        const val2 = n2.value.trim();
+
+        if (val1 === '' || isNaN(val1)) {
+            n1.classList.add('error-border');
+            return;
+        }
+        if (val2 === '' || isNaN(val2)) {
+            n2.classList.add('error-border');
+            return;
+        }
+
+        const a = parseFloat(val1);
+        const b = parseFloat(val2);
+        let res;
+
+        if (op === '/' && b === 0) {
+            alert("Деление на ноль невозможно!");
+            return;
+        }
+
+        switch(op) {
+            case '+': res = a + b; break;
+            case '-': res = a - b; break;
+            case '*': res = a * b; break;
+            case '/': res = a / b; break;
+        }
+
+        const formula = `${a} ${op} ${b} = ${Number(res.toFixed(10))}`;
+
+        if (currentResult.innerText !== "") {
+            historyArr.push(currentResult.innerText);
+            if (historyArr.length > 1) historyArr.shift();
+        }
+
+        historyContainer.innerHTML = historyArr
+            .map(item => `<div class="history-item">${item}</div>`)
+            .join('');
+
+        currentResult.innerText = formula;
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,65 @@
+body {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    background: #fff;
+    margin: 0;
+}
+
+.calculator-card {
+    background: #c1ffc1;
+    padding: 25px;
+    border-radius: 15px;
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    color: red;
+}
+
+.input-group {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 15px;
+    align-items: center;
+}
+
+input, select, button, .result-box {
+    background: transparent;
+    border: 1px dashed red;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 18px;
+    color: inherit;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+input { min-width: 0; }
+select { width: 80px; appearance: auto; }
+
+button { 
+    padding: 8px 30px; 
+    cursor: pointer; 
+    justify-self: center;
+    width: auto;
+}
+
+@media (max-width: 600px) {
+    .input-group {
+        grid-template-columns: 1fr;
+        justify-items: center;
+    }
+}
+
+.result-box {
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.history-item { color: rgba(255, 0, 0, 0.4); margin-bottom: 5px; }
+
+.error-border { 
+    border-style: solid; 
+    background: rgba(255, 0, 0, 0.1); 
+}