Basic Calculator Html Code

MUAZHAN

6 min read

·

Jul 03, 2024

26

Share

Basic Calculator HTML Code

This article will guide you through creating a basic calculator using HTML, CSS, and JavaScript.

HTML Structure (index.html)

    
    
    
    


    

        

        

            +
            -
            *
            /
            7
            8
            9
            =
            4
            5
            6
            C
            1
            2
            3
            0
            .
        
    

    

Explanation:

• We start with basic HTML structure, including head and body sections.
• <div class="calculator">: This will be the main container for our calculator.
• <div class="display">: This will show the input and the result of calculations.
• <div class="buttons">: This container holds all the buttons of the calculator.
• <button>: Each button is defined with specific classes:
  • operator: For buttons like '+', '-', '*', '/'.
  • number: For number buttons.
  • equal: For the '=' button.
  • clear: For the 'C' (clear) button.
  • dot: For the decimal point button.
• data- attributes: We add data-* attributes to each button for easier access and manipulation using JavaScript.

CSS Styling (style.css)

.calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.display {
    background-color: #f0f0f0;
    padding: 10px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
}

.buttons button {
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #eee;
    font-size: 18px;
    cursor: pointer;
}

.operator {
    background-color: #ff9900;
    color: white;
}

.equal {
    background-color: #00cc00;
    color: white;
}

.clear {
    background-color: #cc0000;
    color: white;
}

.dot {
    background-color: #999;
    color: white;
}

Explanation:

• This CSS code defines styles for the calculator, display, and buttons.
• You can customize colors, fonts, dimensions, and other aspects according to your preferences.

JavaScript Functionality (script.js)

const display = document.querySelector('.display');
const buttons = document.querySelectorAll('button');

let currentInput = '';
let operator = null;
let previousInput = null;

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const buttonValue = button.dataset.number || button.dataset.operator || button.dataset.equal || button.dataset.clear || button.dataset.dot;

        if (buttonValue === '=') {
            calculateResult();
        } else if (buttonValue === 'C') {
            clearDisplay();
        } else if (buttonValue === '+' || buttonValue === '-' || buttonValue === '*' || buttonValue === '/') {
            handleOperator(buttonValue);
        } else {
            handleNumber(buttonValue);
        }
    });
});

function handleNumber(number) {
    currentInput += number;
    display.textContent = currentInput;
}

function handleOperator(op) {
    operator = op;
    previousInput = currentInput;
    currentInput = '';
}

function calculateResult() {
    const result = eval(previousInput + operator + currentInput);
    display.textContent = result;
    currentInput = result.toString();
    previousInput = null;
    operator = null;
}

function clearDisplay() {
    currentInput = '';
    operator = null;
    previousInput = null;
    display.textContent = '0';
}

Explanation:

• Event Listeners: We attach event listeners to each button to handle clicks.
• Data Attributes: We use dataset to get the value of the clicked button.
• handleNumber(): Appends the clicked number to currentInput and updates the display.
• handleOperator(): Sets the operator and stores the previous input.
• calculateResult(): Performs calculation using eval() and updates the display.
• clearDisplay(): Clears the input, operator, and previous input, and resets the display to '0'.

Running the Calculator

1. Create three files: index.html, style.css, and script.js.
2. Paste the respective code into each file.
3. Open index.html in your web browser.

Now you have a basic calculator that can perform addition, subtraction, multiplication, and division!