itsecd · gregory-237 · Mar 8, 2026 · Mar 8, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!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 class="calculator__title">Калькулятор</h1>
+
+        <div class="calculator__inputs">
+            <div class="calculator__field">
+                <input type="text" id="num1" class="calculator__input" placeholder="Число 1">
+                <span class="calculator__error" id="error1"></span>
+            </div>
+
+            <div class="calculator__operation">
+                <select id="operation" class="calculator__select">
+                    <option value="+">+</option>
+                    <option value="-">−</option>
+                    <option value="*">×</option>
+                    <option value="/">÷</option>
+                </select>
+            </div>
+
+            <div class="calculator__field">
+                <input type="text" id="num2" class="calculator__input" placeholder="Число 2">
+                <span class="calculator__error" id="error2"></span>
+            </div>
+        </div>
+
+        <button id="calculate" class="calculator__button">=</button>
+
+        <div class="calculator__result-area">
+            <div class="calculator__history" id="history"></div>
+            <div class="calculator__result" id="result">Результат</div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var num1Input = document.getElementById('num1');
+    var num2Input = document.getElementById('num2');
+    var operationSelect = document.getElementById('operation');
+    var calculateBtn = document.getElementById('calculate');
+    var resultDiv = document.getElementById('result');
+    var historyDiv = document.getElementById('history');
+    var error1Span = document.getElementById('error1');
+    var error2Span = document.getElementById('error2');
+
+    var history = [];
+
+    var operationSymbols = {
+        '+': '+',
+        '-': '−',
+        '*': '×',
+        '/': '÷'
+    };
+
+    function validateNumber(value) {
+        if (value.trim() === '') {
+            return { valid: false, error: 'Поле не может быть пустым' };
+        }
+        var num = Number(value.replace(',', '.'));
+        if (isNaN(num)) {
+            return { valid: false, error: 'Введите корректное число' };
+        }
+        return { valid: true, value: num };
+    }
+
+    function clearError(input, errorSpan) {
+        input.classList.remove('calculator__input--error');
+        errorSpan.textContent = '';
+    }
+
+    function setError(input, errorSpan, message) {
+        input.classList.add('calculator__input--error');
+        errorSpan.textContent = message;
+    }
+
+    function calculate() {
+        clearError(num1Input, error1Span);
+        clearError(num2Input, error2Span);
+
+        var v1 = validateNumber(num1Input.value);
+        var v2 = validateNumber(num2Input.value);
+        var hasError = false;
+
+        if (!v1.valid) {
+            setError(num1Input, error1Span, v1.error);
+            hasError = true;
+        }
+        if (!v2.valid) {
+            setError(num2Input, error2Span, v2.error);
+            hasError = true;
+        }
+        if (hasError) return;
+
+        var a = v1.value;
+        var b = v2.value;
+        var op = operationSelect.value;
+        var result;
+
+        switch (op) {
+            case '+': result = a + b; break;
+            case '-': result = a - b; break;
+            case '*': result = a * b; break;
+            case '/':
+                if (b === 0) {
+                    setError(num2Input, error2Span, 'Деление на ноль');
+                    return;
+                }
+                result = a / b;
+                break;
+        }
+
+        result = Math.round(result * 1e10) / 1e10;
+
+        var symbol = operationSymbols[op];
+        var expression = a + ' ' + symbol + ' ' + b + ' = ' + result;
+
+        history.push(expression);
+        if (history.length > 5) {
+            history.shift();
+        }
+
+        historyDiv.innerHTML = '';
+        for (var i = 0; i < history.length - 1; i++) {
+            var line = document.createElement('div');
+            line.textContent = history[i];
+            historyDiv.appendChild(line);
+        }
+
+        resultDiv.textContent = expression;
+        resultDiv.classList.remove('calculator__result--placeholder');
+    }
+
+    calculateBtn.addEventListener('click', calculate);
+
+    num1Input.addEventListener('input', function () {
+        clearError(num1Input, error1Span);
+    });
+
+    num2Input.addEventListener('input', function () {
+        clearError(num2Input, error2Span);
+    });
+
+    num1Input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') calculate();
+    });
+
+    num2Input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') calculate();
+    });
+
+    resultDiv.classList.add('calculator__result--placeholder');
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,178 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.calculator {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 32px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    width: 100%;
+    max-width: 520px;
+}
+
+.calculator__title {
+    text-align: center;
+    color: #333;
+    font-size: 28px;
+    margin-bottom: 24px;
+    font-weight: 600;
+}
+
+.calculator__inputs {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.calculator__field {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.calculator__input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 18px;
+    text-align: center;
+    outline: none;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.calculator__input:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.calculator__input--error {
+    border-color: #e74c3c;
+    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
+}
+
+.calculator__error {
+    color: #e74c3c;
+    font-size: 12px;
+    min-height: 18px;
+    margin-top: 4px;
+    padding-left: 4px;
+}
+
+.calculator__operation {
+    display: flex;
+    align-items: center;
+    padding-top: 6px;
+}
+
+.calculator__select {
+    padding: 12px 8px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 20px;
+    text-align: center;
+    background: #fff;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+.calculator__select:focus {
+    border-color: #667eea;
+}
+
+.calculator__button {
+    width: 100%;
+    padding: 14px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 24px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.calculator__button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.calculator__button:active {
+    transform: translateY(0);
+}
+
+.calculator__result-area {
+    margin-top: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 16px;
+    min-height: 60px;
+}
+
+.calculator__history {
+    color: #b0b0b0;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.calculator__result {
+    font-size: 22px;
+    font-weight: 600;
+    color: #333;
+    margin-top: 4px;
+}
+
+.calculator__result--placeholder {
+    color: #b0b0b0;
+    font-weight: 400;
+}
+
+/* Адаптивная верстка */
+@media (max-width: 480px) {
+    .calculator {
+        padding: 20px;
+    }
+
+    .calculator__title {
+        font-size: 22px;
+        margin-bottom: 16px;
+    }
+
+    .calculator__inputs {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .calculator__operation {
+        justify-content: center;
+        padding-top: 0;
+    }
+
+    .calculator__select {
+        width: 100%;
+    }
+
+    .calculator__input {
+        font-size: 16px;
+    }
+
+    .calculator__result {
+        font-size: 18px;
+    }
+}