Kalkulator

Jasne, oto kod kalkulatora. Kalkulator

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to right, #6a11cb, #2575fc); font-family: 'Arial', sans-serif; } .calculator { background-color: #2d2d2d; padding: 20px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); width: 320px; } #display { width: calc(100% - 20px); /* Adjust width considering padding */ height: 60px; background-color: #1e1e1e; border: none; border-radius: 10px; margin-bottom: 20px; padding: 10px; font-size: 2.5em; text-align: right; color: #fff; box-sizing: border-box; /* Include padding in width calculation */ } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { padding: 20px; font-size: 1.5em; border: none; border-radius: 10px; background-color: #505050; color: #fff; cursor: pointer; transition: background-color 0.2s ease; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } button:hover { background-color: #6d6d6d; } button:active { background-color: #8a8a8a; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } .operator { background-color: #ff9500; color: #fff; } .operator:hover { background-color: #fcae4a; } .operator:active { background-color: #ffc078; } .equal { background-color: #4caf50; color: #fff; grid-row: span 2; /* Make equals button span 2 rows */ } .equal:hover { background-color: #66bb6a; } .equal:active { background-color: #81c784; } .zero { grid-column: span 2; /* Make zero button span 2 columns */ } let display = document.getElementById('display'); let currentInput = ''; let operator = null; let firstOperand = null; let shouldResetDisplay = false; function appendNumber(number) { if (shouldResetDisplay) { currentInput = ''; shouldResetDisplay = false; } // Prevent multiple leading zeros unless it's the only digit if (currentInput === '0' && number !== '.') { currentInput = number; } else { currentInput += number; } updateDisplay(); } function appendOperator(op) { if (currentInput === '' && firstOperand === null) return; // Do nothing if no number entered yet if (firstOperand !== null && !shouldResetDisplay) { calculateResult(); // Calculate intermediate result if chaining operations } // If the last input was an operator, replace it if (shouldResetDisplay && operator) { operator = op; return; // Don't update firstOperand again } firstOperand = parseFloat(currentInput) || firstOperand || 0; // Use current input or previous result operator = op; shouldResetDisplay = true; currentInput = ''; // Clear current input for the next number, but don't update display yet } function appendDecimal() { if (shouldResetDisplay) { currentInput = '0.'; // Start new number with 0. shouldResetDisplay = false; } else if (!currentInput.includes('.')) { currentInput += '.'; } else if (currentInput === '') { currentInput = '0.'; // Handle case where decimal is first input } updateDisplay(); } function calculateResult() { if (operator === null || firstOperand === null || shouldResetDisplay) return; // Need operator and both operands const secondOperand = parseFloat(currentInput); if (isNaN(secondOperand)) return; // Ensure second operand is valid let result; switch (operator) { case '+': result = firstOperand + secondOperand; break; case '-': result = firstOperand - secondOperand; break; case '*': result = firstOperand * secondOperand; break; case '/': if (secondOperand === 0) { result = 'Error'; // Handle division by zero } else { result = firstOperand / secondOperand; } break; default: return; } currentInput = result.toString(); operator = null; firstOperand = null; // Reset for next calculation chain shouldResetDisplay = true; // Display will reset on next number input updateDisplay(); } function clearDisplay() { currentInput = ''; operator = null; firstOperand = null; shouldResetDisplay = false; updateDisplay(); } function deleteLast() { if (shouldResetDisplay) { clearDisplay(); // If result is shown, DEL acts like C } else { currentInput = currentInput.slice(0, -1); if (currentInput === '') { // If deleting last digit makes input empty, show 0 or nothing // Depending on preference, you might want '0' or just empty // currentInput = '0'; // Option to show 0 } updateDisplay(); } } function updateDisplay() { // Limit display length if needed const maxLength = 12; let displayValue = currentInput; if (displayValue.length > maxLength) { // Handle very large numbers with scientific notation or truncation try { let num = parseFloat(displayValue); if (Math.abs(num) > 1e12 || (Math.abs(num) < 1e-6 && num !== 0)) { displayValue = num.toExponential(6); // Adjust precision as needed } else { // Or simply truncate (less ideal for precision) // displayValue = displayValue.substring(0, maxLength); // Better: round if possible displayValue = parseFloat(num.toPrecision(maxLength)).toString(); } } catch (e) { // Handle potential errors if displayValue isn't a number (e.g., "Error") displayValue = displayValue.substring(0, maxLength); } } display.value = displayValue === '' ? '0' : displayValue; } // Initialize display updateDisplay();