Calculator Html Css Javascript Code

MUAZHAN

6 min read

·

Jun 22, 2024

35

Share

Building a Simple Calculator with HTML, CSS, and JavaScript

This article will guide you through creating a basic calculator using HTML, CSS, and JavaScript. We'll cover the fundamental steps involved in building a functional calculator interface and implementing the necessary logic for performing calculations.

HTML Structure

First, let's create the HTML structure for our calculator:

    
    
    
    


    

        

        

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

This HTML code defines a calculator container with a display area for showing the input and result and a buttons area containing all the calculator buttons. Each button has an onclick event handler that calls corresponding JavaScript functions for handling user input.

CSS Styling

Next, let's style our calculator using CSS in a style.css file:

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

.display {
    height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 18px;
    text-align: right;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

button {
    height: 40px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.number {
    background-color: #eee;
}

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

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

This CSS styles the calculator with basic appearance, including dimensions, colors, button layout, and font sizes. Feel free to customize this to your preferences.

JavaScript Logic

Finally, we implement the JavaScript logic in script.js:

let display = document.querySelector('.display');
let previousOperator = null;
let previousOperand = null;

function appendNumber(num) {
    display.textContent += num;
}

function appendOperator(operator) {
    if (previousOperator) {
        calculate();
    }
    previousOperand = parseFloat(display.textContent);
    previousOperator = operator;
    display.textContent += operator;
}

function calculate() {
    let currentOperand = parseFloat(display.textContent.slice(display.textContent.lastIndexOf(previousOperator) + 1));
    let result;

    switch (previousOperator) {
        case '+':
            result = previousOperand + currentOperand;
            break;
        case '-':
            result = previousOperand - currentOperand;
            break;
        case '*':
            result = previousOperand * currentOperand;
            break;
        case '/':
            result = previousOperand / currentOperand;
            break;
        default:
            result = currentOperand;
    }

    display.textContent = result;
    previousOperator = null;
    previousOperand = null;
}

function clearDisplay() {
    display.textContent = '';
    previousOperator = null;
    previousOperand = null;
}

This JavaScript code manages the calculator's functionality:

• It defines variables to store the display, previous operator, and previous operand.
• appendNumber() adds numbers to the display.
• appendOperator() handles operator input and stores the previous operand and operator.
• calculate() performs the calculation based on the chosen operator and displays the result.
• clearDisplay() clears the display and resets the variables.

Running the Calculator

Save the HTML, CSS, and JavaScript files in the same directory. Open the HTML file in a web browser to see the working calculator. You can now perform basic calculations by clicking on the buttons!

This simple calculator serves as a starting point for building more complex calculators with additional features like advanced functions, history, and more. Feel free to experiment with different styling and add more functionalities to enhance your calculator.