Create Calculator in HTML

  • Last updated Apr 25, 2024

In this tutorial, you will learn how to create a functional calculator using HTML, CSS, and JavaScript. This example combines HTML for structure, CSS for styling, and JavaScript for functionality to create a simple calculator interface. Users can input numbers and perform basic arithmetic operations, with the results displayed in the designated display area.


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f4;

    .calculator {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

    .display {
        font-size: 48px;
        margin-bottom: 20px;
        padding: 10px 15px;
        width: 89%;
        text-align: right;
        border: 1px solid #ccc;
        border-radius: 8px;

    .buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;

    button {
        padding: 20px;
        font-size: 24px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s;

    button:hover {
        background-color: #e0e0e0;


<div class="calculator">
    <div class="display" id="display">0</div>
    <div class="buttons">
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('/')">/</button>
        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('*')">*</button>
        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="appendToDisplay('-')">-</button>
        <button onclick="appendToDisplay('0')">0</button>
        <button onclick="appendToDisplay('.')">.</button>
        <button onclick="calculate()">=</button>
        <button onclick="appendToDisplay('+')">+</button>
        <button onclick="clearDisplay()">C</button>

    function appendToDisplay(value) {
        const display = document.getElementById('display');
        if (display.textContent === '0' && value !== '.') {
            display.textContent = value;
        } else {
            display.textContent += value;

    function calculate() {
        const display = document.getElementById('display');
        try {
            display.textContent = eval(display.textContent);
        } catch (error) {
            display.textContent = 'Error';

    function clearDisplay() {
        const display = document.getElementById('display');
        display.textContent = '0';