Skip to content

Instantly share code, notes, and snippets.

@intellectronica

intellectronica/calculator.html

Last active June 29, 2025 21:08
Show Gist options
  • Save intellectronica/6d8ccc38f617643982619cc277af7bee to your computer and use it in GitHub Desktop.
Save intellectronica/6d8ccc38f617643982619cc277af7bee to your computer and use it in GitHub Desktop.
Download ZIP
ArtiGist Example: Calculator #artigist
Raw
calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Calculator</title>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* Custom styles for the calculator */
body {
font-family: 'Inter', sans-serif;
-webkit-tap-highlight-color: transparent; /* Removes blue highlight on mobile tap */
}
/* Style for the calculator buttons */
.calc-button {
transition: all 0.2s ease-in-out;
}
.calc-button:active {
transform: scale(0.95);
background-color: rgba(255, 255, 255, 0.3);
}
/* Custom scrollbar for the display */
#display::-webkit-scrollbar {
height: 4px;
}
#display::-webkit-scrollbar-track {
background: transparent;
}
#display::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
</style>
</head>
<body class="bg-gray-900 flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-gray-800 to-black">
<!-- Calculator Body -->
<div class="w-full max-w-sm mx-auto bg-white/10 backdrop-blur-md rounded-2xl shadow-2xl p-6 border border-white/20">
<!-- Display Screen -->
<div class="bg-black/20 rounded-lg p-4 mb-6 text-right text-white">
<div id="history" class="text-gray-400 text-sm h-6 overflow-hidden"></div>
<div id="display" class="text-4xl font-bold break-all whitespace-nowrap overflow-x-auto overflow-y-hidden">0</div>
</div>
<!-- Button Grid -->
<div class="grid grid-cols-4 gap-4">
<!-- Row 1 -->
<button class="calc-button bg-orange-500/50 hover:bg-orange-500/70 text-white text-2xl font-bold rounded-lg h-16" onclick="clearAll()">AC</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="deleteLast()">DEL</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="appendOperator('%')">%</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="appendOperator('/')">÷</button>
<!-- Row 2 -->
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('7')">7</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('8')">8</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('9')">9</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="appendOperator('*')">×</button>
<!-- Row 3 -->
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('4')">4</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('5')">5</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('6')">6</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="appendOperator('-')">−</button>
<!-- Row 4 -->
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('1')">1</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('2')">2</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendNumber('3')">3</button>
<button class="calc-button bg-gray-500/30 hover:bg-gray-500/50 text-white text-2xl font-bold rounded-lg h-16" onclick="appendOperator('+')">+</button>
<!-- Row 5 -->
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16 col-span-2" onclick="appendNumber('0')">0</button>
<button class="calc-button bg-gray-700/50 hover:bg-gray-700/70 text-white text-2xl font-bold rounded-lg h-16" onclick="appendDecimal()">.</button>
<button class="calc-button bg-orange-500/50 hover:bg-orange-500/70 text-white text-2xl font-bold rounded-lg h-16" onclick="calculateResult()">=</button>
</div>
</div>
<script>
// DOM elements for display
const display = document.getElementById('display');
const historyDisplay = document.getElementById('history');
// Calculator state variables
let currentInput = '0';
let operator = null;
let previousInput = null;
let shouldResetDisplay = false;
/**
* Updates the main display with the current input.
*/
function updateDisplay() {
display.textContent = currentInput;
// Scroll to the end of the display if it overflows
display.scrollLeft = display.scrollWidth;
}
/**
* Resets the entire calculator to its initial state.
*/
function clearAll() {
currentInput = '0';
operator = null;
previousInput = null;
historyDisplay.textContent = '';
shouldResetDisplay = false;
updateDisplay();
}
/**
* Deletes the last character from the current input.
*/
function deleteLast() {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = '0';
}
updateDisplay();
}
/**
* Appends a number to the current input string.
* @param {string} number - The number to append.
*/
function appendNumber(number) {
if (currentInput === '0' || shouldResetDisplay) {
currentInput = number;
shouldResetDisplay = false;
} else {
currentInput += number;
}
updateDisplay();
}
/**
* Appends a decimal point if one does not already exist.
*/
function appendDecimal() {
if (shouldResetDisplay) {
currentInput = '0.';
shouldResetDisplay = false;
} else if (!currentInput.includes('.')) {
currentInput += '.';
}
updateDisplay();
}
/**
* Handles operator selection and intermediate calculations.
* @param {string} nextOperator - The operator being selected.
*/
function appendOperator(nextOperator) {
const inputValue = parseFloat(currentInput);
if (operator && shouldResetDisplay) {
operator = nextOperator;
historyDisplay.textContent = `${previousInput} ${operator}`;
return;
}
if (previousInput === null) {
previousInput = inputValue;
} else if (operator) {
const result = performCalculation();
currentInput = String(result);
previousInput = result;
}
operator = nextOperator;
shouldResetDisplay = true;
historyDisplay.textContent = `${previousInput} ${operator}`;
updateDisplay();
}
/**
* Calculates the final result when '=' is pressed.
*/
function calculateResult() {
if (operator === null || shouldResetDisplay) return;
const result = performCalculation();
historyDisplay.textContent = `${previousInput} ${operator} ${currentInput} =`;
currentInput = String(result);
operator = null;
previousInput = null;
shouldResetDisplay = true;
updateDisplay();
}
/**
* Performs the actual calculation based on stored inputs and operator.
* @returns {number} The result of the calculation.
*/
function performCalculation() {
const current = parseFloat(currentInput);
if (isNaN(previousInput) || isNaN(current)) return;
let result;
switch (operator) {
case '+':
result = previousInput + current;
break;
case '-':
result = previousInput - current;
break;
case '*':
result = previousInput * current;
break;
case '/':
if (current === 0) {
return "Error";
}
result = previousInput / current;
break;
case '%':
result = previousInput % current;
break;
default:
return;
}
// Round to a reasonable number of decimal places to avoid floating point issues
return Math.round(result * 1e12) / 1e12;
}
// Initial display update
updateDisplay();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment