diff --git a/index.html b/index.html new file mode 100644 index 0000000..6f8fd80 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + Калькулятор + + + +
+

Калькулятор

+ +
+
+ + +
+ +
+ +
+ +
+ + +
+
+ + + +
+
+
Результат
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a9a6a72 --- /dev/null +++ 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 new file mode 100644 index 0000000..04809c5 --- /dev/null +++ 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; + } +}