itsecd · KonovalovDS · Feb 28, 2026
diff --git a/calculator/index.html b/calculator/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Калькулятор</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="calculator">
+    <h1>Калькулятор</h1>
+    <div class="input-row">
+        <input type="number" id="num1" placeholder="Первое число">
+        <select id="operation">
+            <option value="+">+</option>
+            <option value="-">-</option>
+            <option value="*">*</option>
+            <option value="/">/</option>
+        </select>
+        <input type="number" id="num2" placeholder="Второе число">
+    </div>
+    <button id="calculateBtn">Вычислить</button>
+    <div class="result" id="result"></div>
+    <div class="history">
+        <h3>История</h3>
+        <div id="historyList"></div>
+    </div>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/calculator/script.js b/calculator/script.js
@@ -0,0 +1,95 @@
+(function() {
+    const history = [];
+    const maxHistory = 10;
+
+    const num1Input = document.getElementById('num1');
+    const num2Input = document.getElementById('num2');
+    const operationSelect = document.getElementById('operation');
+    const resultDiv = document.getElementById('result');
+    const historyList = document.getElementById('historyList');
+    const calculateBtn = document.getElementById('calculateBtn');
+
+    if (!num1Input || !num2Input || !operationSelect || !resultDiv || !historyList || !calculateBtn) {
+        console.error('Не найден один из элементов калькулятора');
+        return;
+    }
+
+    const canUseLocalStorage = (() => {
+        try {
+            localStorage.setItem('__test__', 'test');
+            localStorage.removeItem('__test__');
+            return true;
+        } catch(e) {
+            return false;
+        }
+    })();
+
+    if (canUseLocalStorage) {
+        try {
+            const stored = localStorage.getItem('calculatorHistory');
+            if (stored) history.push(...JSON.parse(stored));
+        } catch(e) { history.length = 0; }
+        updateHistoryUI();
+    }
+
+    function calculate() {
+        const num1 = parseFloat(num1Input.value);
+        const num2 = parseFloat(num2Input.value);
+        const operation = operationSelect.value;
+
+        resultDiv.classList.remove('result--ok', 'result--error');
+
+        if (isNaN(num1) || isNaN(num2)) {
+            resultDiv.textContent = 'Введите корректные числа!';
+            resultDiv.classList.add('result--error');
+            return;
+        }
+
+        let res;
+        switch (operation) {
+            case '+': res = num1 + num2; break;
+            case '-': res = num1 - num2; break;
+            case '*': res = num1 * num2; break;
+            case '/':
+                if (num2 === 0) {
+                    resultDiv.textContent = 'Деление на 0 невозможно!';
+                    resultDiv.classList.add('result--error');
+                    return;
+                }
+                res = num1 / num2;
+                break;
+            default: return;
+        }
+
+        const expression = `${num1} ${operation} ${num2} = ${res}`;
+        resultDiv.textContent = expression;
+        resultDiv.classList.add('result--ok');
+
+        history.unshift(expression);
+        if (history.length > maxHistory) history.pop();
+        updateHistoryUI();
+
+        if (canUseLocalStorage) {
+            try {
+                localStorage.setItem('calculatorHistory', JSON.stringify(history));
+            } catch(e) {}
+        }
+    }
+
+    function updateHistoryUI() {
+        historyList.innerHTML = '';
+        if (history.length === 0) {
+            historyList.textContent = 'История пуста';
+            return;
+        }
+
+        history.forEach(item => {
+            const p = document.createElement('p');
+            p.className = 'history-item';
+            p.textContent = item;
+            historyList.appendChild(p);
+        });
+    }
+
+    calculateBtn.addEventListener('click', calculate);
+})();
diff --git a/calculator/style.css b/calculator/style.css
@@ -0,0 +1,108 @@
+:root {
+    --main-color: #4caf50;
+    --hover-color: #449d48;
+    --result-color: #2e7d32;
+    --error-color: #a8d5a2;
+    --transition-duration: 0.2s;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 100vh;
+    background: #e8f5e9;
+    padding: 20px;
+}
+
+.calculator {
+    background: #f0f9f0;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 500px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--result-color);
+}
+
+.input-row {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+}
+
+input, select, button {
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 8px;
+    border: 1px solid #c8e6c9;
+}
+
+input {
+    flex: 1;
+    width: 100%;
+}
+
+select {
+    width: 90px;
+}
+
+button {
+    width: 100%;
+    margin-top: 10px;
+    background: var(--main-color);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color var(--transition-duration);
+}
+
+button:hover {
+    background: var(--hover-color);
+}
+
+.result {
+    margin-top: 15px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.result--ok {
+    color: var(--result-color);
+}
+
+.result--error {
+    color: var(--error-color);
+}
+
+.history {
+    margin-top: 20px;
+    font-size: 14px;
+    color: #555;
+}
+
+.history-item {
+    margin-bottom: 5px;
+}
+
+@media (max-width: 480px) {
+    .input-row {
+        flex-direction: column;
+    }
+    select {
+        width: 100%;
+    }
+}