body {
font-family: ‘Inter’, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f3f4f6; /* Tailwind gray-100 */
}
.calculator {
background-color: #ffffff; /* White background */
padding: 24px; /* p-6 */
border-radius: 16px; /* rounded-2xl */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
width: 100%;
max-width: 320px; /* sm:max-w-xs */
}
.display {
background-color: #e5e7eb; /* Tailwind gray-200 */
color: #1f2937; /* Tailwind gray-800 */
font-size: 2.25rem; /* text-4xl */
line-height: 2.5rem;
padding: 16px; /* p-4 */
text-align: right;
border-radius: 8px; /* rounded-lg */
margin-bottom: 24px; /* mb-6 */
word-wrap: break-word;
word-break: break-all;
min-height: 70px; /* Ensure a minimum height */
}
.buttons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px; /* gap-3 */
}
.btn {
background-color: #f9fafb; /* Tailwind gray-50 */
color: #374151; /* Tailwind gray-700 */
font-size: 1.25rem; /* text-xl */
padding: 16px; /* p-4 */
border-radius: 8px; /* rounded-lg */
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
}
.btn:hover {
background-color: #e5e7eb; /* Tailwind gray-200 */
}
.btn:active {
background-color: #d1d5db; /* Tailwind gray-300 */
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}
.btn-operator {
background-color: #fbbf24; /* Tailwind amber-400 */
color: #78350f; /* Tailwind amber-900 */
}
.btn-operator:hover {
background-color: #f59e0b; /* Tailwind amber-500 */
}
.btn-operator:active {
background-color: #d97706; /* Tailwind amber-600 */
}
.btn-equals {
background-color: #34d399; /* Tailwind emerald-400 */
color: #065f46; /* Tailwind emerald-800 */
grid-column: span 2; /* Make equals button wider */
}
.btn-equals:hover {
background-color: #10b981; /* Tailwind emerald-500 */
}
.btn-equals:active {
background-color: #059669; /* Tailwind emerald-600 */
}
.btn-clear {
background-color: #ef4444; /* Tailwind red-500 */
color: #ffffff; /* White */
}
.btn-clear:hover {
background-color: #dc2626; /* Tailwind red-600 */
}
.btn-clear:active {
background-color: #b91c1c; /* Tailwind red-700 */
}
/* Message Box Styling */
.message-box-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it’s on top */
visibility: hidden; /* Hidden by default */
opacity: 0;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.message-box-overlay.visible {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
.message-box {
background-color: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
}
.message-box p {
margin-bottom: 16px;
color: #374151; /* Tailwind gray-700 */
}
.message-box button {
background-color: #34d399; /* Tailwind emerald-400 */
color: #065f46; /* Tailwind emerald-800 */
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.message-box button:hover {
background-color: #10b981; /* Tailwind emerald-500 */
}
const display = document.getElementById(‘display’);
const buttons = document.querySelectorAll(‘.btn’);
const messageBoxOverlay = document.getElementById(‘messageBoxOverlay’);
const messageBoxText = document.getElementById(‘messageBoxText’);
const messageBoxOkButton = document.getElementById(‘messageBoxOkButton’);
let currentInput = ‘0’;
let operator = null;
let previousInput = null;
let shouldResetDisplay = false;
// Function to show custom message
function showMessage(message) {
messageBoxText.textContent = message;
messageBoxOverlay.classList.add(‘visible’);
}
// Function to hide custom message
function hideMessage() {
messageBoxOverlay.classList.remove(‘visible’);
}
messageBoxOkButton.addEventListener(‘click’, hideMessage);
messageBoxOverlay.addEventListener(‘click’, function(event) {
if (event.target === messageBoxOverlay) {
hideMessage();
}
});
// Function to update the display
function updateDisplay() {
display.textContent = currentInput;
}
// Function to handle digit clicks
function handleDigit(digit) {
if (currentInput === ‘0’ || shouldResetDisplay) {
currentInput = digit;
shouldResetDisplay = false;
} else {
currentInput += digit;
}
// Limit input length to prevent overflow
if (currentInput.length > 15) {
currentInput = currentInput.substring(0, 15);
}
}
// Function to handle operator clicks
function handleOperator(nextOperator) {
const inputValue = parseFloat(currentInput);
if (operator && previousInput !== null && !shouldResetDisplay) {
// If there’s an existing operator and previous input, calculate first
const result = calculate(previousInput, inputValue, operator);
currentInput = String(result);
previousInput = result;
} else {
previousInput = inputValue;
}
operator = nextOperator;
shouldResetDisplay = true; // Next number input should reset the display
}
// Function to perform calculation
function calculate(num1, num2, op) {
let result;
switch (op) {
case ‘+’:
result = num1 + num2;
break;
case ‘-‘:
result = num1 – num2;
break;
case ‘*’:
result = num1 * num2;
break;
case ‘/’:
if (num2 === 0) {
showMessage(“Error: Cannot divide by zero!”);
return ‘Error’;
}
result = num1 / num2;
break;
default:
return num2; // Should not happen
}
// Round to a reasonable number of decimal places to avoid floating point issues
return Math.round(result * 1e12) / 1e12;
}
// Function to handle equals click
function handleEquals() {
if (operator === null || previousInput === null) {
return; // Do nothing if no operator or previous input
}
const inputValue = parseFloat(currentInput);
const result = calculate(previousInput, inputValue, operator);
if (result === ‘Error’) {
currentInput = ‘Error’;
} else {
currentInput = String(result);
}
operator = null;
previousInput = null; // Reset previousInput after calculation
shouldResetDisplay = true; // Display should reset on next digit input
updateDisplay();
}
// Function to handle clear click
function handleClear() {
currentInput = ‘0’;
operator = null;
previousInput = null;
shouldResetDisplay = false;
updateDisplay();
}
// Function to handle decimal point
function handleDecimal() {
if (shouldResetDisplay) {
currentInput = ‘0.’;
shouldResetDisplay = false;
return;
}
if (!currentInput.includes(‘.’)) {
currentInput += ‘.’;
}
}
// Add event listeners to buttons
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const value = button.dataset.value;
if (!isNaN(parseFloat(value))) { // Check if it’s a number
handleDigit(value);
} else if (value === ‘.’) {
handleDecimal();
} else if (value === ‘C’) {
handleClear();
} else if (value === ‘=’) {
handleEquals();
} else { // Operator
handleOperator(value);
}
updateDisplay();
});
});
// Initialize display
updateDisplay();
// Keyboard support
document.addEventListener(‘keydown’, (event) => {
const key = event.key;
let buttonToClick = null;
if (key >= ‘0’ && key 1 && currentInput !== ‘0’ && currentInput !== ‘Error’) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = ‘0’;
}
shouldResetDisplay = false; // Allow further input
updateDisplay();
return; // Skip click simulation for backspace
}
if (buttonToClick) {
buttonToClick.click();
buttonToClick.classList.add(‘active’); // Visual feedback for key press
setTimeout(() => buttonToClick.classList.remove(‘active’), 100);
}
});