---
layout: default
title: Calculator - Shivering Playground
description: Simple HTML calculator without JavaScript frameworks
---

<style>
  .calculator-wrapper {
    max-width: 400px;
    margin: 40px auto;
    text-align: center;
  }

  .calculator-wrapper h1 {
    margin-bottom: 30px;
    color: var(--text-primary);
  }

  .back-link {
    display: inline-block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .back-link:hover {
    background: var(--primary);
    color: white;
  }

  form {
    background: var(--surface);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 16px var(--shadow);
    border: 1px solid var(--border);
  }

  #display {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    text-align: right;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
  }

  .calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  input[type="button"] {
    padding: 20px;
    font-size: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
  }

  input[type="button"]:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
  }

  input[type="button"]:active {
    transform: translateY(0);
  }

  input[type="button"].operator {
    background: var(--primary);
    color: white;
  }

  input[type="button"].operator:hover {
    background: var(--primary-dark);
  }

  #clear {
    background: #ef4444;
    color: white;
  }

  #clear:hover {
    background: #dc2626;
  }

  input[name="doit"] {
    background: #10b981;
    color: white;
  }

  input[name="doit"]:hover {
    background: #059669;
  }
</style>

<div class="calculator-wrapper">
  <a href="/playground/" class="back-link">← Back to Playground</a>

  <h1>🔢 Calculator</h1>

  <form name="calculator">
    <input type="text" name="display" id="display" disabled value="0">

    <div class="calculator-grid">
      <input type="button" name="seven" value="7" onclick="calculator.display.value = calculator.display.value === '0' ? '7' : calculator.display.value + '7'">
      <input type="button" name="eight" value="8" onclick="calculator.display.value = calculator.display.value === '0' ? '8' : calculator.display.value + '8'">
      <input type="button" name="nine" value="9" onclick="calculator.display.value = calculator.display.value === '0' ? '9' : calculator.display.value + '9'">
      <input type="button" class="operator" name="div" value="÷" onclick="calculator.display.value += '/'">

      <input type="button" name="four" value="4" onclick="calculator.display.value = calculator.display.value === '0' ? '4' : calculator.display.value + '4'">
      <input type="button" name="five" value="5" onclick="calculator.display.value = calculator.display.value === '0' ? '5' : calculator.display.value + '5'">
      <input type="button" name="six" value="6" onclick="calculator.display.value = calculator.display.value === '0' ? '6' : calculator.display.value + '6'">
      <input type="button" class="operator" name="times" value="×" onclick="calculator.display.value += '*'">

      <input type="button" name="one" value="1" onclick="calculator.display.value = calculator.display.value === '0' ? '1' : calculator.display.value + '1'">
      <input type="button" name="two" value="2" onclick="calculator.display.value = calculator.display.value === '0' ? '2' : calculator.display.value + '2'">
      <input type="button" name="three" value="3" onclick="calculator.display.value = calculator.display.value === '0' ? '3' : calculator.display.value + '3'">
      <input type="button" class="operator" name="minus" value="−" onclick="calculator.display.value += '-'">

      <input type="button" id="clear" name="clear" value="C" onclick="calculator.display.value = '0'">
      <input type="button" name="zero" value="0" onclick="calculator.display.value = calculator.display.value === '0' ? '0' : calculator.display.value + '0'">
      <input type="button" name="doit" value="=" onclick="try { calculator.display.value = eval(calculator.display.value); } catch(e) { calculator.display.value = 'Error'; }">
      <input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'">
    </div>
  </form>
</div>