Calculator Code in HTML: How to Write It

Updated 6 November 2026 · Standard formula, shown below

To put a calculator on a web page, you write HTML for the buttons and display, CSS for styling, and JavaScript for the math logic. This article explains the core structure, gives a working example you can copy, and covers common pitfalls like rounding and button event handling.

What a Calculator Needs: HTML, CSS, and JavaScript

A calculator in a browser is made of three layers that work together:

HTML defines the structure: the display screen and each button as a <button> element inside a container.
CSS controls layout and appearance: grid arrangement, size, colors, and responsive behavior.
JavaScript handles the logic: listening for clicks, storing the current value and operation, and updating the display.

You can write all three in a single .html file using <style> and <script> tags, or split them into separate files. For a simple calculator, a single file is easiest to test and share.

Basic HTML Structure

The HTML part is a container with a display area and a grid of buttons. A minimal example looks like this:

<div class="calculator">
  <input type="text" id="display" disabled>
  <div class="buttons">
    <button onclick="press('7')">7</button>
    <button onclick="press('+')">+</button>
    <button onclick="calculate()">=</button>
  </div>
</div>

The onclick attribute is the simplest way to wire buttons to JavaScript, but modern practice often uses addEventListener in a separate script. The display is usually an <input> with disabled so users cannot type directly, or a <div> styled to look like a screen.

JavaScript Logic: The Core Functions

The script needs three main functions:

press(value) – appends a digit or operator to the current expression.
clear() – resets the display and stored values.
calculate() – evaluates the expression and shows the result.

A simple approach stores the expression as a string and uses eval() to compute it. For example:

let expression = '';
function press(val) {
  expression += val;
  document.getElementById('display').value = expression;
}
function calculate() {
  let result = eval(expression);
  document.getElementById('display').value = result;
  expression = String(result);
}

Using eval() is fine for a personal project, but it executes any JavaScript code, so it is risky on public sites. A safer alternative is to parse the expression manually or use a library like math.js. For most learning purposes, eval() is acceptable if you control the input.

Handling Decimal Points and Operators

Two common bugs appear when handling decimals and operators:

Allowing multiple decimal points in one number (e.g., “5..3�).
Allowing consecutive operators (e.g., “5+*3�).

To prevent these, check the last character before appending. For a decimal, only add if the current number does not already contain a dot. For an operator, only add if the last character is not already an operator. A simple check:

function press(val) {
  let last = expression.slice(-1);
  if (val === '.' && last === '.') return;
  if ('+-*/'.includes(val) && '+-*/'.includes(last)) return;
  expression += val;
  updateDisplay();
}

Styling with CSS Grid

CSS Grid makes arranging buttons easy. A typical layout uses a 4-column grid:

.calculator { width: 200px; }
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
button { padding: 15px; font-size: 18px; }

You can adjust the number of columns to match your button layout. For a standard calculator with digits 0-9 and four operators, a 4-column grid works well. The display spans the full width.

Common Mistakes and How to Avoid Them

Beginners often run into these issues:

Using eval() without input validation – can lead to security vulnerabilities if the calculator is public.
Forgetting to convert string to number – JavaScript treats input values as strings; use parseFloat() or Number() when needed.
Not handling division by zero – eval() returns Infinity; you may want to show an error.
Rounding errors – floating-point arithmetic can produce results like 0.1 + 0.2 = 0.30000000000000004. Use toFixed() or round the result to a reasonable number of decimals.

For rounding, a common fix is to display the result with a fixed number of decimal places: result.toFixed(10) then strip trailing zeros, or use a library like Decimal.js for precise arithmetic.

Advanced Features: Keyboard Support and Memory

Once the basic calculator works, you can add:

Keyboard input – listen for keydown events and map number keys and operators to the same functions.
Memory buttons – store a value in a variable, then recall it with M+ and MR.
History – keep a list of previous calculations and display them.

Keyboard support improves usability. A simple event listener:

document.addEventListener('keydown', function(e) {
  if (e.key >= '0' && e.key <= '9') press(e.key);
  if (e.key === 'Enter') calculate();
});

Frequently Asked Questions

Can I write a calculator without JavaScript?

No. HTML only defines structure and CSS only styles it; you need JavaScript (or another scripting language) to perform calculations and update the display dynamically. Without JavaScript, the page would be static.

Is it safe to use eval() in a calculator?

For a personal or local project, yes. But if the calculator is publicly accessible, eval() can execute malicious code if a user types something like alert('hack'). Use a parser library or manually validate input to avoid this risk.

How do I make the calculator responsive?

Use CSS media queries to adjust the button size and grid layout on smaller screens. For example, set a max-width on the calculator and use relative font sizes like em or vw.

Why does 0.1 + 0.2 show 0.30000000000000004?

This is a floating-point precision issue in JavaScript (and most languages). To fix it, round the result to a sensible number of decimals using toFixed() or use a decimal arithmetic library.

Can I use CSS only to make a calculator?

No. CSS can style buttons and layout, but it cannot perform arithmetic or respond to clicks. You need a scripting language like JavaScript for the logic.

What is the best way to learn calculator code in HTML?

Start with a simple 4-function calculator using eval(), then add features like decimal handling, keyboard support, and error checking. Practice by modifying the code to add new buttons or functions.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.