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.

Example:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
    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;
    }

</style>
</head>
<body>

<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>
    </div>
</div>

<script>
    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';
    }
</script>

</body>
</html>