Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple Calculator</title> | |
| <!-- Tailwind CSS CDN for styling --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Custom styles for the calculator */ | |
| body { | |
| font-family: 'Inter', sans-serif; /* Using Inter font as per instructions */ | |
| background-color: #f0f2f5; /* Light gray background */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 20px; /* Add some padding for smaller screens */ | |
| box-sizing: border-box; | |
| } | |
| .calculator-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); /* 4 columns for buttons */ | |
| gap: 10px; /* Space between buttons */ | |
| } | |
| .calculator-button { | |
| padding: 20px; | |
| font-size: 1.5rem; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */ | |
| user-select: none; /* Prevent text selection on buttons */ | |
| } | |
| .calculator-button:hover { | |
| transform: translateY(-2px); /* Slight lift on hover */ | |
| } | |
| .calculator-button:active { | |
| transform: translateY(0); /* Return to normal on click */ | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */ | |
| } | |
| .span-two { | |
| grid-column: span 2; /* Make button span two columns */ | |
| } | |
| .output { | |
| grid-column: span 4; /* Output display spans all columns */ | |
| background-color: #222; /* Dark background for output */ | |
| color: #fff; /* White text */ | |
| padding: 20px; | |
| text-align: right; | |
| font-size: 2.5rem; | |
| overflow: hidden; /* Hide overflow text */ | |
| white-space: nowrap; /* Prevent wrapping */ | |
| text-overflow: ellipsis; /* Add ellipsis for overflow */ | |
| min-height: 80px; /* Ensure minimum height */ | |
| display: flex; | |
| align-items: flex-end; /* Align text to bottom */ | |
| justify-content: flex-end; /* Align text to right */ | |
| } | |
| /* Responsive adjustments for smaller screens */ | |
| @media (max-width: 640px) { | |
| .calculator-container { | |
| width: 100%; /* Full width on small screens */ | |
| max-width: 350px; /* Limit max width even on full width */ | |
| } | |
| .calculator-button { | |
| padding: 15px; | |
| font-size: 1.2rem; | |
| } | |
| .output { | |
| font-size: 2rem; | |
| min-height: 60px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-100 to-purple-200"> | |
| <!-- Calculator Container --> | |
| <div class="calculator-container bg-white p-6 rounded-2xl shadow-xl max-w-sm w-full border border-gray-200"> | |
| <!-- Calculator Display Output --> | |
| <div id="output" class="output rounded-t-xl mb-4 shadow-inner">0</div> | |
| <!-- Calculator Buttons Grid --> | |
| <div class="calculator-grid"> | |
| <!-- Clear and Delete Buttons --> | |
| <button class="calculator-button bg-red-500 text-white rounded-xl span-two hover:bg-red-600" onclick="clearDisplay()">AC</button> | |
| <button class="calculator-button bg-yellow-500 text-white rounded-xl hover:bg-yellow-600" onclick="deleteLast()">DEL</button> | |
| <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('/')">/</button> | |
| <!-- Number Buttons (7-9) and Multiplication --> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('7')">7</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('8')">8</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('9')">9</button> | |
| <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('*')">*</button> | |
| <!-- Number Buttons (4-6) and Subtraction --> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('4')">4</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('5')">5</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('6')">6</button> | |
| <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('-')">-</button> | |
| <!-- Number Buttons (1-3) and Addition --> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('1')">1</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('2')">2</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('3')">3</button> | |
| <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('+')">+</button> | |
| <!-- Number Button (0), Decimal, and Equals --> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl span-two hover:bg-gray-300" onclick="appendNumber('0')">0</button> | |
| <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('.')">.</button> | |
| <button class="calculator-button bg-green-500 text-white rounded-xl hover:bg-green-600" onclick="calculateResult()">=</button> | |
| </div> | |
| </div> | |
| <script> | |
| let currentInput = '0'; // Stores the current number or expression | |
| let operator = null; // Stores the last operator clicked | |
| let previousInput = ''; // Stores the previous number for calculations | |
| let shouldResetDisplay = false; // Flag to clear display after an operation | |
| const outputElement = document.getElementById('output'); | |
| /** | |
| * Updates the calculator display. | |
| * Ensures '0' is shown if input is empty. | |
| */ | |
| function updateDisplay() { | |
| outputElement.innerText = currentInput === '' ? '0' : currentInput; | |
| } | |
| /** | |
| * Appends a number to the current input. | |
| * Handles leading zeros and decimal points. | |
| * @param {string} number - The number string to append. | |
| */ | |
| function appendNumber(number) { | |
| if (shouldResetDisplay) { | |
| currentInput = number; | |
| shouldResetDisplay = false; | |
| } else { | |
| // Prevent multiple leading zeros (e.g., 007 -> 7) | |
| if (currentInput === '0' && number !== '.') { | |
| currentInput = number; | |
| } else if (number === '.' && currentInput.includes('.')) { | |
| // Prevent multiple decimal points | |
| return; | |
| } else { | |
| currentInput += number; | |
| } | |
| } | |
| updateDisplay(); | |
| } | |
| /** | |
| * Appends an operator to the current input. | |
| * If an operator already exists, it calculates the intermediate result. | |
| * @param {string} nextOperator - The operator string to append. | |
| */ | |
| function appendOperator(nextOperator) { | |
| if (currentInput === '0' && previousInput === '') { | |
| // Allow starting with a negative sign | |
| if (nextOperator === '-') { | |
| currentInput = '-'; | |
| } | |
| return; | |
| } | |
| if (operator !== null && !shouldResetDisplay) { | |
| // If there's a pending operation and we're not starting a new number | |
| calculateResult(); // Calculate intermediate result | |
| } | |
| operator = nextOperator; | |
| previousInput = currentInput; | |
| shouldResetDisplay = true; // Next number input will clear the display | |
| updateDisplay(); // Display the previous input (before operator) | |
| } | |
| /** | |
| * Clears the entire calculator display and resets all states. | |
| */ | |
| function clearDisplay() { | |
| currentInput = '0'; | |
| operator = null; | |
| previousInput = ''; | |
| shouldResetDisplay = false; | |
| updateDisplay(); | |
| } | |
| /** | |
| * Deletes the last character from the current input. | |
| * If input becomes empty, sets it to '0'. | |
| */ | |
| function deleteLast() { | |
| if (currentInput === '0' || currentInput === '') return; | |
| currentInput = currentInput.slice(0, -1); | |
| if (currentInput === '') { | |
| currentInput = '0'; | |
| } | |
| updateDisplay(); | |
| } | |
| /** | |
| * Calculates the final result of the expression. | |
| * Handles basic arithmetic operations. | |
| */ | |
| function calculateResult() { | |
| if (operator === null || shouldResetDisplay) return; // No pending operation | |
| const prev = parseFloat(previousInput); | |
| const current = parseFloat(currentInput); | |
| if (isNaN(prev) || isNaN(current)) { | |
| currentInput = 'Error'; | |
| updateDisplay(); | |
| shouldResetDisplay = true; | |
| operator = null; | |
| previousInput = ''; | |
| return; | |
| } | |
| let result; | |
| switch (operator) { | |
| case '+': | |
| result = prev + current; | |
| break; | |
| case '-': | |
| result = prev - current; | |
| break; | |
| case '*': | |
| result = prev * current; | |
| break; | |
| case '/': | |
| if (current === 0) { | |
| currentInput = 'Error: Div by 0'; | |
| updateDisplay(); | |
| shouldResetDisplay = true; | |
| operator = null; | |
| previousInput = ''; | |
| return; | |
| } | |
| result = prev / current; | |
| break; | |
| default: | |
| return; | |
| } | |
| // Handle floating point precision issues (optional, but good for calculators) | |
| result = parseFloat(result.toFixed(10)); // Limit to 10 decimal places | |
| currentInput = result.toString(); | |
| operator = null; | |
| previousInput = ''; | |
| shouldResetDisplay = true; // Next number input will clear the display | |
| updateDisplay(); | |
| } | |
| // Initialize display on load | |
| window.onload = updateDisplay; | |
| </script> | |
| </body> | |
| </html> | |