Calculator

Calculator with display, expression preview, keypad, operator/function buttons, and glass variant.

Basic Calculator

Preview

125 × 3

375

<div class="calculator">
  <div class="calculator-display">
    <div class="calculator-expression">125 × 3</div>
    <div class="calculator-result">375</div>
  </div>
  <div class="calculator-keypad">
    <button class="calculator-btn calculator-btn-function">AC</button>
    <button class="calculator-btn calculator-btn-function">+/-</button>
    <button class="calculator-btn calculator-btn-function">%</button>
    <button class="calculator-btn calculator-btn-operator">÷</button>
    <button class="calculator-btn calculator-btn-number">7</button>
    <button class="calculator-btn calculator-btn-number">8</button>
    <button class="calculator-btn calculator-btn-number">9</button>
    <button class="calculator-btn calculator-btn-operator">×</button>
    <button class="calculator-btn calculator-btn-number">4</button>
    <button class="calculator-btn calculator-btn-number">5</button>
    <button class="calculator-btn calculator-btn-number">6</button>
    <button class="calculator-btn calculator-btn-operator">−</button>
    <button class="calculator-btn calculator-btn-number">1</button>
    <button class="calculator-btn calculator-btn-number">2</button>
    <button class="calculator-btn calculator-btn-number">3</button>
    <button class="calculator-btn calculator-btn-operator">+</button>
    <button class="calculator-btn calculator-btn-number calculator-btn-wide">0</button>
    <button class="calculator-btn calculator-btn-number">.</button>
    <button class="calculator-btn calculator-btn-equals">=</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col select-none w-80 max-w-full p-6 bg-base-100 rounded-box shadow-lg">
  <div class="flex flex-col items-end justify-end overflow-hidden min-h-30 px-6 py-4 mb-4 bg-base-200 rounded-box">
    <div class="w-full text-right overflow-hidden truncate whitespace-nowrap text-base text-base-content/60 min-h-6">125 × 3</div>
    <div class="w-full text-right overflow-hidden truncate whitespace-nowrap font-mono text-5xl font-light tabular-nums leading-tight">375</div>
  </div>
  <div class="grid grid-cols-4 gap-3">
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">AC</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">+/-</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">%</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">÷</button>
    <!-- number rows 7-9, 4-6, 1-3 -->
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">7</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">8</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">9</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">×</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">4</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">5</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">6</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">−</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">1</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">2</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">3</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">+</button>
    <!-- bottom row: 0 (wide), dot, equals -->
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95 col-span-2">0</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">.</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-primary border-primary rounded-box text-2xl font-medium text-primary-content hover:brightness-90 active:scale-95">=</button>
  </div>
</div>

Requires: tw.min.css

// Basic calculator logic
let expression = '';
let result = '0';

document.querySelectorAll('.calculator-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const val = btn.textContent;
    if (val === 'AC') { expression = ''; result = '0'; }
    else if (val === '=') { result = eval(expression); }
    else { expression += val; }
    // Update display
    document.querySelector('.calculator-expression').textContent = expression;
    document.querySelector('.calculator-result').textContent = result;
  });
});

Active Operator

Preview

50 +

<div class="calculator">
  <div class="calculator-display">
    <div class="calculator-expression">50 +</div>
    <div class="calculator-result">50</div>
  </div>
  <div class="calculator-keypad">
    <button class="calculator-btn calculator-btn-function">AC</button>
    <button class="calculator-btn calculator-btn-function">+/-</button>
    <button class="calculator-btn calculator-btn-function">%</button>
    <button class="calculator-btn calculator-btn-operator">÷</button>
    <button class="calculator-btn calculator-btn-number">7</button>
    <button class="calculator-btn calculator-btn-number">8</button>
    <button class="calculator-btn calculator-btn-number">9</button>
    <button class="calculator-btn calculator-btn-operator">×</button>
    <button class="calculator-btn calculator-btn-number">4</button>
    <button class="calculator-btn calculator-btn-number">5</button>
    <button class="calculator-btn calculator-btn-number">6</button>
    <button class="calculator-btn calculator-btn-operator">−</button>
    <button class="calculator-btn calculator-btn-number">1</button>
    <button class="calculator-btn calculator-btn-number">2</button>
    <button class="calculator-btn calculator-btn-number">3</button>
    <button class="calculator-btn calculator-btn-operator is-active">+</button>
    <button class="calculator-btn calculator-btn-number calculator-btn-wide">0</button>
    <button class="calculator-btn calculator-btn-number">.</button>
    <button class="calculator-btn calculator-btn-equals">=</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col select-none w-80 max-w-full p-6 bg-base-100 rounded-box shadow-lg">
  <div class="flex flex-col items-end justify-end overflow-hidden min-h-30 px-6 py-4 mb-4 bg-base-200 rounded-box">
    <div class="w-full text-right overflow-hidden truncate whitespace-nowrap text-base text-base-content/60 min-h-6">50 +</div>
    <div class="w-full text-right overflow-hidden truncate whitespace-nowrap font-mono text-5xl font-light tabular-nums leading-tight">50</div>
  </div>
  <div class="grid grid-cols-4 gap-3">
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">AC</button>
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">+/-</button>
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">%</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">÷</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">7</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">8</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">9</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">×</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">4</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">5</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">6</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">−</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">1</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">2</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">3</button>
    <!-- Active operator: inverted colors (white bg, warning text) -->
    <button class="flex items-center justify-center min-h-16 bg-white border-warning rounded-box text-2xl font-medium text-warning hover:brightness-95 active:scale-95">+</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95 col-span-2">0</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">.</button>
    <button class="flex items-center justify-center min-h-16 bg-primary border-primary rounded-box text-2xl font-medium text-primary-content hover:brightness-90 active:scale-95">=</button>
  </div>
</div>

Requires: tw.min.css

// Toggle .is-active on operator buttons
document.querySelectorAll('.calculator-btn-operator').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.calculator-btn-operator').forEach(b => b.classList.remove('is-active'));
    btn.classList.add('is-active');
  });
});

Error & Small Result

Preview

1 ÷ 0

Error

123456789 × 987654321

121,932,631,112,635,269

<!-- Error state -->
<div class="calculator">
  <div class="calculator-display">
    <div class="calculator-expression">1 ÷ 0</div>
    <div class="calculator-result calculator-result-error">Error</div>
  </div>
  <div class="calculator-keypad">
    <button class="calculator-btn calculator-btn-function">AC</button>
    <button class="calculator-btn calculator-btn-function">+/-</button>
    <button class="calculator-btn calculator-btn-function">%</button>
    <button class="calculator-btn calculator-btn-operator">÷</button>
    <button class="calculator-btn calculator-btn-number">7</button>
    <button class="calculator-btn calculator-btn-number">8</button>
    <button class="calculator-btn calculator-btn-number">9</button>
    <button class="calculator-btn calculator-btn-operator">×</button>
    <button class="calculator-btn calculator-btn-number">4</button>
    <button class="calculator-btn calculator-btn-number">5</button>
    <button class="calculator-btn calculator-btn-number">6</button>
    <button class="calculator-btn calculator-btn-operator">−</button>
    <button class="calculator-btn calculator-btn-number">1</button>
    <button class="calculator-btn calculator-btn-number">2</button>
    <button class="calculator-btn calculator-btn-number">3</button>
    <button class="calculator-btn calculator-btn-operator">+</button>
    <button class="calculator-btn calculator-btn-number calculator-btn-wide">0</button>
    <button class="calculator-btn calculator-btn-number">.</button>
    <button class="calculator-btn calculator-btn-equals">=</button>
  </div>
</div>

<!-- Long number (auto-shrink) -->
<div class="calculator calculator-compact" style="margin-top: 1.5rem;">
  <div class="calculator-display">
    <div class="calculator-expression">123456789 × 987654321</div>
    <div class="calculator-result calculator-result-small">121,932,631,112,635,269</div>
  </div>
  <div class="calculator-keypad">
    <button class="calculator-btn calculator-btn-function">AC</button>
    <button class="calculator-btn calculator-btn-function">+/-</button>
    <button class="calculator-btn calculator-btn-function">%</button>
    <button class="calculator-btn calculator-btn-operator">÷</button>
    <button class="calculator-btn calculator-btn-number">7</button>
    <button class="calculator-btn calculator-btn-number">8</button>
    <button class="calculator-btn calculator-btn-number">9</button>
    <button class="calculator-btn calculator-btn-operator">×</button>
    <button class="calculator-btn calculator-btn-number">4</button>
    <button class="calculator-btn calculator-btn-number">5</button>
    <button class="calculator-btn calculator-btn-number">6</button>
    <button class="calculator-btn calculator-btn-operator">−</button>
    <button class="calculator-btn calculator-btn-number">1</button>
    <button class="calculator-btn calculator-btn-number">2</button>
    <button class="calculator-btn calculator-btn-number">3</button>
    <button class="calculator-btn calculator-btn-operator">+</button>
    <button class="calculator-btn calculator-btn-number calculator-btn-wide">0</button>
    <button class="calculator-btn calculator-btn-number">.</button>
    <button class="calculator-btn calculator-btn-equals">=</button>
  </div>
</div>

Requires: ux.min.css

<!-- Error state -->
<div class="flex flex-col select-none w-80 max-w-full p-6 bg-base-100 rounded-box shadow-lg">
  <div class="flex flex-col items-end justify-end overflow-hidden min-h-30 px-6 py-4 mb-4 bg-base-200 rounded-box">
    <div class="w-full text-right text-base text-base-content/60 min-h-6">1 ÷ 0</div>
    <div class="w-full text-right font-mono text-5xl font-light tabular-nums leading-tight text-error">Error</div>
  </div>
  <div class="grid grid-cols-4 gap-3">
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">AC</button>
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">+/-</button>
    <button class="flex items-center justify-center min-h-16 bg-base-200 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-300 active:scale-95">%</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">÷</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">7</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">8</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">9</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">×</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">4</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">5</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">6</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">−</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">1</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">2</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">3</button>
    <button class="flex items-center justify-center min-h-16 bg-warning border-warning rounded-box text-2xl font-medium text-white hover:brightness-90 active:scale-95">+</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95 col-span-2">0</button>
    <button class="flex items-center justify-center min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl hover:bg-base-200 active:scale-95">.</button>
    <button class="flex items-center justify-center min-h-16 bg-primary border-primary rounded-box text-2xl font-medium text-primary-content hover:brightness-90 active:scale-95">=</button>
  </div>
</div>

Requires: tw.min.css

// Auto-shrink result when too long
const resultEl = document.querySelector('.calculator-result');
if (resultEl.textContent.length > 10) {
  resultEl.classList.add('calculator-result-small');
}

Glass

Preview

42 × 10

420

<div class="calculator glass" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem;">
  <div class="calculator-display">
    <div class="calculator-expression">42 × 10</div>
    <div class="calculator-result">420</div>
  </div>
  <div class="calculator-keypad">
    <button class="calculator-btn calculator-btn-function">AC</button>
    <button class="calculator-btn calculator-btn-function">+/-</button>
    <button class="calculator-btn calculator-btn-function">%</button>
    <button class="calculator-btn calculator-btn-operator">÷</button>
    <button class="calculator-btn calculator-btn-number">7</button>
    <button class="calculator-btn calculator-btn-number">8</button>
    <button class="calculator-btn calculator-btn-number">9</button>
    <button class="calculator-btn calculator-btn-operator">×</button>
    <button class="calculator-btn calculator-btn-number">4</button>
    <button class="calculator-btn calculator-btn-number">5</button>
    <button class="calculator-btn calculator-btn-number">6</button>
    <button class="calculator-btn calculator-btn-operator">−</button>
    <button class="calculator-btn calculator-btn-number">1</button>
    <button class="calculator-btn calculator-btn-number">2</button>
    <button class="calculator-btn calculator-btn-number">3</button>
    <button class="calculator-btn calculator-btn-operator">+</button>
    <button class="calculator-btn calculator-btn-number calculator-btn-wide">0</button>
    <button class="calculator-btn calculator-btn-number">.</button>
    <button class="calculator-btn calculator-btn-equals">=</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col select-none w-80 max-w-full p-6 rounded-box shadow-lg glass text-white" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="flex flex-col items-end justify-end overflow-hidden min-h-30 px-6 py-4 mb-4 glass rounded-box">
    <div class="w-full text-right text-base text-white/60 min-h-6">42 × 10</div>
    <div class="w-full text-right font-mono text-5xl font-light tabular-nums leading-tight text-white">420</div>
  </div>
  <div class="grid grid-cols-4 gap-3">
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:brightness-110 active:scale-95">AC</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:brightness-110 active:scale-95">+/-</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:brightness-110 active:scale-95">%</button>
    <button class="flex items-center justify-center min-h-16 bg-white/30 rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:bg-white/40 active:scale-95">÷</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">7</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">8</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">9</button>
    <button class="flex items-center justify-center min-h-16 bg-white/30 rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:bg-white/40 active:scale-95">×</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">4</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">5</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">6</button>
    <button class="flex items-center justify-center min-h-16 bg-white/30 rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:bg-white/40 active:scale-95">−</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">1</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">2</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">3</button>
    <button class="flex items-center justify-center min-h-16 bg-white/30 rounded-box text-2xl font-medium text-white border-none cursor-pointer hover:bg-white/40 active:scale-95">+</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95 col-span-2">0</button>
    <button class="flex items-center justify-center min-h-16 glass rounded-box text-2xl text-white border-none cursor-pointer hover:brightness-110 active:scale-95">.</button>
    <button class="flex items-center justify-center min-h-16 bg-white/40 rounded-box text-2xl font-bold text-white border-none cursor-pointer hover:bg-white/50 active:scale-95">=</button>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is CSS-only