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

Калькулятор

+
+ + + +
+ +
+
+

История

+
+
+
+ + + diff --git a/calculator/script.js b/calculator/script.js new file mode 100644 index 0000000..45afa1e --- /dev/null +++ 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 new file mode 100644 index 0000000..71ebada --- /dev/null +++ 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%; + } +}