Beginner project

Calculator

What you'll learn

• DOM selection
• Event delegation
• String → number conversion
• State in a variable

Features

✓ Add, subtract, multiply, divide
✓ Clear button
✓ Decimal support
✓ Keyboard-friendly layout

Live demo

Source code

html

<div class="calc">
  <input id="display" disabled />
  <div class="keys">
    <button data-k="C">C</button>
    <button data-k="/">÷</button>
    <button data-k="*">×</button>
    <button data-k="-">−</button>
    <button data-k="7">7</button><button data-k="8">8</button><button data-k="9">9</button>
    <button data-k="+">+</button>
    <button data-k="4">4</button><button data-k="5">5</button><button data-k="6">6</button>
    <button data-k="=" class="eq">=</button>
    <button data-k="1">1</button><button data-k="2">2</button><button data-k="3">3</button>
    <button data-k="0" class="zero">0</button><button data-k=".">.</button>
  </div>
</div>