<div class="calc">
  <input type="text" class="calc-display" id="display" readonly>
  <div class="calc-keys">
    <button onclick="clearDisplay()" class="btn-gray">AC</button>
    <button onclick="deleteLast()" class="btn-gray">DEL</button>
    <button onclick="append('/')" class="btn-gray">&divide;</button>
    <button onclick="append('*')" class="btn-orange">&times;</button>
    <button onclick="append('7')">7</button>
    <button onclick="append('8')">8</button>
    <button onclick="append('9')">9</button>
    <button onclick="append('-')" class="btn-orange">-</button>
    <button onclick="append('4')">4</button>
    <button onclick="append('5')">5</button>
    <button onclick="append('6')">6</button>
    <button onclick="append('+')" class="btn-orange">+</button>
    <button onclick="append('1')">1</button>
    <button onclick="append('2')">2</button>
    <button onclick="append('3')">3</button>
    <button onclick="calculate()" class="btn-orange span-2">=</button>
    <button onclick="append('0')" class="span-2">0</button>
    <button onclick="append('.')">.</button>
  </div>
</div>

.calc {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 300px;
  background: #000;
  border-radius: 20px;
  padding: 20px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.calc-display {
  width: 100%;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  text-align: right;
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
}
.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
button {
  height: 60px;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  background: #333;
  color: white;
  transition: filter 0.2s;
}
button:active {
  filter: brightness(1.2);
}
.btn-orange {
  background: #f97316;
}
.btn-gray {
  background: #a3a3a3;
  color: black;
}
.span-2 {
  grid-row: span 2;
  height: 100%;
  border-radius: 30px;
}

let display = document.getElementById("display");

function append(input) {
  display.value += input;
}

function clearDisplay() {
  display.value = "";
}

function deleteLast() {
  display.value = display.value.slice(0, -1);
}

function calculate() {
  try {
    // Note: eval() is used here for simplicity in a client-side snippet.
    // In production apps, consider a safer parser.
    display.value = eval(display.value);
  } catch (error) {
    display.value = "Error";
  }
}

Back to Snippets

Simple JavaScript Calculator

Perform basic math operations with this clean calculator layout. It uses CSS Grid for the button arrangement and a safe JavaScript evaluation method to calculate the results instantly.

372

#javascript

#css

#calculator

#math

#grid

#ui

#interactive

/HTML *CSS ()JS Output Live Updates

<div class="calc">
  <input type="text" class="calc-display" id="display" readonly>
  <div class="calc-keys">
    <button onclick="clearDisplay()" class="btn-gray">AC</button>
    <button onclick="deleteLast()" class="btn-gray">DEL</button>
    <button onclick="append('/')" class="btn-gray">&divide;</button>
    <button onclick="append('*')" class="btn-orange">&times;</button>
    <button onclick="append('7')">7</button>
    <button onclick="append('8')">8</button>
    <button onclick="append('9')">9</button>
    <button onclick="append('-')" class="btn-orange">-</button>
    <button onclick="append('4')">4</button>
    <button onclick="append('5')">5</button>
    <button onclick="append('6')">6</button>
    <button onclick="append('+')" class="btn-orange">+</button>
    <button onclick="append('1')">1</button>
    <button onclick="append('2')">2</button>
    <button onclick="append('3')">3</button>
    <button onclick="calculate()" class="btn-orange span-2">=</button>
    <button onclick="append('0')" class="span-2">0</button>
    <button onclick="append('.')">.</button>
  </div>
</div>