Create a Calculator Using HTML, CSS, and JavaScript (Source Code)

Welcome to the Codewithrandom blog in this blog, We learn how we Create a Calculator Using HTML, CSS, and JavaScript. This is a fully functional calculator and responsive project.

Basic mathematical operations including addition, subtraction, multiplication, and division are carried out using a calculator.

Hope you enjoy our blog so let’s start with a basic HTML structure for the calculator project code.

Task Description

Step 1
We will use the HTML (Hypertext Markup Language) to generate the list’s structure and some of the required characteristics and elements for the Calculator Project.

Step 2

After that, we’ll utilise CSS (Cascading Style Sheets) to help us style or design the calculator project with the proper padding and alignment.

Step 3
The Calculator Project will finally employ JS (JavaScript) to add logic and make it user-responsive.

<section>
    <div class="container">
        <div class="calculator">
            <div class="display">
                <div class="display-1">0</div>
                <div class="display-2">0</div>
                <div class="temp-result"></div>
            </div>
            <div class="all_button">
                <div class="button all-clear">C</div>
                <div class="button last-entity-clear">CE</div>
                <div class="button operation">%</div>
                <div class="button operation">/</div>
                <div class="button number">7</div>
                <div class="button number">8</div>
                <div class="button number">9</div>
                <div class="button operation">x</div>
                <div class="button number">4</div>
                <div class="button number">5</div>
                <div class="button number">6</div>
                <div class="button operation">-</div>
                <div class="button number">1</div>
                <div class="button number">2</div>
                <div class="button number">3</div>
                <div class="button operation">+</div>
                <div class="button btn-0 number">0</div>
                <div class="button number dot">.</div>
                <div class="button equal">=</div>
            </div>
        </div>
    </div>
</section>

We’ve just added a section for the calculator structure, and inside of that section, we’ll build a div with the class “container” for the calculator. Then we’ll make a div container inside of our container, which we’ll use to display the calculator value. Then we’ll make distinct divs for the calculator’s numbers and arithmetic operators, and last we’ll make an equal button to calculate the outcome.

Restaurant Website Using HTML and CSS

There Is All The Html Code For The Calculator. Now You Can See Output Without Css And Javascript Then We Write Css And Javascript For Our Calculator Project.

 

JavaScript Code for calculator

const display1El = document.querySelector(".display-1");
const display2El = document.querySelector(".display-2");
const tempResultEl = document.querySelector(".temp-result");
const numbersEl = document.querySelectorAll(".number");
const operationEl = document.querySelectorAll(".operation");
const equalEl = document.querySelector(".equal");
const clearAllEl = document.querySelector(".all-clear");
const clearLastEl = document.querySelector(".last-entity-clear");
let dis1Num = "";
let dis2Num = "";
let result = null;
let lastOperation = "";
let haveDot = false;
numbersEl.forEach((number) => {
    number.addEventListener("click", (e) => {
        if (e.target.innerText === "." && !haveDot) {
            haveDot = true;
        } else if (e.target.innerText === "." && haveDot) {
            return;
        }
        dis2Num += e.target.innerText;
        display2El.innerText = dis2Num;
    });
});
operationEl.forEach((operation) => {
    operation.addEventListener("click", (e) => {
        if (!dis2Num) return;
        haveDot = false;
        const operationName = e.target.innerText;
        if (dis1Num && dis2Num && lastOperation) {
            mathOperation();
        } else {
            result = parseFloat(dis2Num);
        }
        clearVar(operationName);
        lastOperation = operationName;
        console.log(result);
    });
});
function clearVar(name = "") {
    dis1Num += dis2Num + " " + name + " ";
    display1El.innerText = dis1Num;
    display2El.innerText = "";
    dis2Num = "";
    tempResultEl.innerText = result;
}
function mathOperation() {
    if (lastOperation === "x") {
        result = parseFloat(result) * parseFloat(dis2Num);
    } else if (lastOperation === "+") {
        result = parseFloat(result) + parseFloat(dis2Num);
    } else if (lastOperation === "-") {
        result = parseFloat(result) - parseFloat(dis2Num);
    } else if (lastOperation === "/") {
        result = parseFloat(result) / parseFloat(dis2Num);
    } else if (lastOperation === "%") {
        result = parseFloat(result) % parseFloat(dis2Num);
    }
}
equalEl.addEventListener("click", () => {
    if (!dis2Num || !dis1Num) return;
    haveDot = false;
    mathOperation();
    clearVar();
    display2El.innerText = result;
    tempResultEl.innerText = "";
    dis2Num = result;
    dis1Num = "";
});
clearAllEl.addEventListener("click", () => {
    dis1Num = "";
    dis2Num = "";
    display1El.innerText = "";
    display2El.innerText = "";
    result = "";
    tempResultEl.innerText = "";
});
clearLastEl.addEventListener("click", () => {
    display2El.innerText = "";
    dis2Num = "";
});
window.addEventListener("keydown", (e) => {
    if (
        e.key === "0" ||
        e.key === "1" ||
        e.key === "2" ||
        e.key === "3" ||
        e.key === "4" ||
        e.key === "5" ||
        e.key === "6" ||
        e.key === "7" ||
        e.key === "8" ||
        e.key === "9" ||
        e.key === "."
    ) {
        clickButtonEl(e.key);
    } else if (
        e.key === "+" ||
        e.key === "-" ||
        e.key === "/" ||
        e.key === "%"
    ) {
        clickOperation(e.key);
    } else if (e.key === "*") {
        clickOperation("x");
    } else if (e.key == "Enter" || e.key === "=") {
        clickEqual();
    }
});
function clickButtonEl(key) {
    numbersEl.forEach((button) => {
        if (button.innerText === key) {
            button.click();
        }
    });
}
function clickOperation(key) {
    operationEl.forEach((operation) => {
        if (operation.innerText === key) {
            operation.click();
        }
    });
}
function clickEqual() {
    equalEl.click();
}

10+ HTML CSS Projects For Beginners (Source Code)

This is all our JavaScript code for the calculator project, I know it looks very lengthy but it’s a complete code calculator. So also you use it in your resume as a side project. Here is the output video of our project!

Final Output calculator