Путешествие длиною в жизнь

styles.css display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: 'Arial', sans-serif; } .calculator { border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background-color: #fff; } .calculator-screen { width: 100%; height: 80px; border: none; background-color: #252525; color: #fff; text-align: right; padding-right: 20px; padding-left: 10px; font-size: 2.5rem; } .calculator-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; } button { height: 60px; border-radius: 5px; border: none; background-color: #e0e0e0; font-size: 1.5rem; color: #333; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #d0d0d0; } .operator { background-color: #ff9500; color: #fff; } .operator:hover { background-color: #e08e00; } .equal-sign { background-color: #4caf50; color: #fff; grid-column: span 2; } .equal-sign:hover { background-color: #45a049; } .all-clear { background-color: #f44336; color: #fff; } .all-clear:hover { background-color: #e53935; } { script.js const calculator = { displayValue: '0', firstOperand: null, waitingForSecondOperand: false, operator: null, }; function inputDigit(digit) { const { displayValue, waitingForSecondOperand } = calculator; if (waitingForSecondOperand === true) { calculator.displayValue = digit; calculator.waitingForSecondOperand = false; } else { calculator.displayValue = displayValue === '0' ? digit : displayValue + digit; } } function inputDecimal(dot) { if (calculator.waitingForSecondOperand === true) return; if (!calculator.displayValue.includes(dot)) { calculator.displayValue += dot; } } function handleOperator(nextOperator) { const { firstOperand, displayValue, operator } = calculator; const inputValue = parseFloat(displayValue); if (operator && calculator.waitingForSecondOperand) { calculator.operator = nextOperator; return; } if (firstOperand == null && !isNaN(inputValue)) { calculator.firstOperand = inputValue; } else if (operator) { const result = performCalculation[operator](firstOperand, inputValue); calculator.displayValue = String(result); calculator.firstOperand = result; } calculator.waitingForSecondOperand = true; calculator.operator = nextOperator; } const performCalculation = { '/': (firstOperand, secondOperand) => firstOperand / secondOperand, '*': (firstOperand, secondOperand) => firstOperand * secondOperand, '+': (firstOperand, secondOperand) => firstOperand + secondOperand, '-': (firstOperand, secondOperand) => firstOperand – secondOperand, '=': (firstOperand, secondOperand) => secondOperand }; function resetCalculator() { calculator.displayValue = '0'; calculator.firstOperand = null; calculator.waitingForSecondOperand = false; calculator.operator = null; } function updateDisplay() { const display = document.querySelector('.calculator-screen'); display.value = calculator.displayValue; } updateDisplay(); const keys = document.querySelector('.calculator-keys'); keys.addEventListener('click', (event) => { const { target } = event; if (!target.matches('button')) { return; } if (target.classList.contains('operator')) { handleOperator(target.value); updateDisplay(); return; } if (target.classList.contains('decimal')) { inputDecimal(target.value); updateDisplay(); return; } if (target.classList.contains('all-clear')) { resetCalculator(); updateDisplay(); return; } inputDigit(target.value); updateDisplay(); });