Cal11 calculator
Search calculator...

Create Calculator by Html Java Script As Follow Picture

Reviewed by Calculator Editorial Team

Creating a calculator using HTML and JavaScript is a fundamental web development skill. This guide will walk you through the process of building a simple yet functional calculator that follows the visual design shown in the reference picture.

Basic HTML Structure

The foundation of any calculator is its HTML structure. We'll create a basic layout with input fields, buttons, and a display area. Here's the essential HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>HTML/JavaScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="operator">+</button>
            <button class="operator">-</button>
            <button class="operator">*</button>
            <button class="operator">/</button>
            <button class="number">7</button>
            <button class="number">8</button>
            <button class="number">9</button>
            <button class="operator">C</button>
            <button class="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="operator">=</button>
            <button class="number">1</button>
            <button class="number">2</button>
            <button class="number">3</button>
            <button class="number">0</button>
            <button class="number">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This basic structure includes a display area and buttons for numbers and operators. The calculator will be styled and made functional through CSS and JavaScript.

CSS Styling

To make our calculator visually appealing, we'll add CSS styling. The styling should match the design shown in the reference picture, with a clean, professional appearance.

/* Basic calculator styling */
.calculator {
    width: 300px;
    margin: 20px auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.display {
    background-color: #f1f5f9;
    padding: 20px;
    text-align: right;
    font-size: 2rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #e5e7eb;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: #e5e7eb;
}

button {
    padding: 20px;
    font-size: 1.2rem;
    border: none;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #f1f5f9;
}

.operator {
    background-color: #f1f5f9;
    color: #2563eb;
}

.operator:hover {
    background-color: #e5e7eb;
}

This CSS creates a clean, grid-based calculator layout with proper spacing and visual hierarchy. The display area shows the current input or result, while the buttons are arranged in a familiar calculator layout.

JavaScript Functionality

The JavaScript brings our calculator to life by handling user input and performing calculations. Here's the core functionality:

// Calculator functionality
document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('button');
    let currentInput = '0';
    let previousInput = '';
    let operation = null;
    let resetScreen = false;

    function updateDisplay() {
        display.textContent = currentInput;
    }

    function appendNumber(number) {
        if (currentInput === '0' || resetScreen) {
            currentInput = number;
            resetScreen = false;
        } else {
            currentInput += number;
        }
        updateDisplay();
    }

    function setOperation(op) {
        if (operation !== null) calculate();
        previousInput = currentInput;
        operation = op;
        resetScreen = true;
    }

    function calculate() {
        let result;
        const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);

        if (isNaN(prev) || isNaN(current)) return;

        switch (operation) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                result = prev / current;
                break;
            default:
                return;
        }

        currentInput = result.toString();
        operation = null;
        updateDisplay();
    }

    function clear() {
        currentInput = '0';
        previousInput = '';
        operation = null;
        updateDisplay();
    }

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            if (button.classList.contains('number')) {
                appendNumber(button.textContent);
            } else if (button.classList.contains('operator')) {
                if (button.textContent === 'C') {
                    clear();
                } else if (button.textContent === '=') {
                    calculate();
                } else {
                    setOperation(button.textContent);
                }
            }
        });
    });

    updateDisplay();
});

This JavaScript code handles number input, operations, and calculations. It maintains the current state of the calculator and updates the display accordingly. The calculator can perform basic arithmetic operations and handle clear/reset functionality.

Example Calculator

Here's a complete example of a simple calculator that combines the HTML structure, CSS styling, and JavaScript functionality we've discussed:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <style>
        .calculator {
            width: 300px;
            margin: 20px auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .display {
            background-color: #f1f5f9;
            padding: 20px;
            text-align: right;
            font-size: 2rem;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-bottom: 1px solid #e5e7eb;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background-color: #e5e7eb;
        }

        button {
            padding: 20px;
            font-size: 1.2rem;
            border: none;
            background-color: white;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #f1f5f9;
        }

        .operator {
            background-color: #f1f5f9;
            color: #2563eb;
        }

        .operator:hover {
            background-color: #e5e7eb;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="operator">+</button>
            <button class="operator">-</button>
            <button class="operator">*</button>
            <button class="operator">/</button>
            <button class="number">7</button>
            <button class="number">8</button>
            <button class="number">9</button>
            <button class="operator">C</button>
            <button class="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="operator">=</button>
            <button class="number">1</button>
            <button class="number">2</button>
            <button class="number">3</button>
            <button class="number">0</button>
            <button class="number">.</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const display = document.getElementById('display');
            const buttons = document.querySelectorAll('button');
            let currentInput = '0';
            let previousInput = '';
            let operation = null;
            let resetScreen = false;

            function updateDisplay() {
                display.textContent = currentInput;
            }

            function appendNumber(number) {
                if (currentInput === '0' || resetScreen) {
                    currentInput = number;
                    resetScreen = false;
                } else {
                    currentInput += number;
                }
                updateDisplay();
            }

            function setOperation(op) {
                if (operation !== null) calculate();
                previousInput = currentInput;
                operation = op;
                resetScreen = true;
            }

            function calculate() {
                let result;
                const prev = parseFloat(previousInput);
                const current = parseFloat(currentInput);

                if (isNaN(prev) || isNaN(current)) return;

                switch (operation) {
                    case '+':
                        result = prev + current;
                        break;
                    case '-':
                        result = prev - current;
                        break;
                    case '*':
                        result = prev * current;
                        break;
                    case '/':
                        result = prev / current;
                        break;
                    default:
                        return;
                }

                currentInput = result.toString();
                operation = null;
                updateDisplay();
            }

            function clear() {
                currentInput = '0';
                previousInput = '';
                operation = null;
                updateDisplay();
            }

            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    if (button.classList.contains('number')) {
                        appendNumber(button.textContent);
                    } else if (button.classList.contains('operator')) {
                        if (button.textContent === 'C') {
                            clear();
                        } else if (button.textContent === '=') {
                            calculate();
                        } else {
                            setOperation(button.textContent);
                        }
                    }
                });
            });

            updateDisplay();
        });
    </script>
</body>
</html>

This complete example includes all the necessary HTML, CSS, and JavaScript to create a functional calculator. You can copy this code into a single HTML file and open it in any web browser to use the calculator.

Frequently Asked Questions

How do I add more advanced functions to my calculator?
To add more advanced functions like square roots, exponents, or memory functions, you'll need to extend the JavaScript code. You can add new buttons to the HTML and corresponding functions in the JavaScript that handle these operations.
Can I make the calculator responsive?
Yes, you can make the calculator responsive by adding media queries to the CSS. This will allow the calculator to adjust its size and layout based on the screen size of the device it's being viewed on.
How can I improve the calculator's appearance?
You can improve the calculator's appearance by adding more CSS styling. Consider using different colors, fonts, and button designs to create a more visually appealing interface that matches your preferences or design requirements.
Is it possible to add keyboard support to the calculator?
Yes, you can add keyboard support by listening for keydown events in the JavaScript code. This will allow users to interact with the calculator using their keyboard in addition to clicking the buttons.
How can I save the calculator's state or history?
To save the calculator's state or history, you can use browser storage APIs like localStorage or sessionStorage. This will allow you to persist data between page reloads or browser sessions.