Create Calculator Using HTML CSS JAVASCRIPT (Source Code)

Create Calculator Using HTML CSS JAVASCRIPT (Source Code)

Welcome to the codewithrandom blog in this blog we learn how we create a calculator project. We Create a calculator using HTML, Css, and Javascript for this calculator Project.

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

HTML code for Calculator 

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

 

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.

CSS Code for calculator

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-family: "Montserrat", sans-serif;
}
section {
    background-color: rgb(18, 26, 31);
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    width: 90%;
    max-width: 400px;
    background-color: rgb(39, 55, 59);
    border-radius: 8px;
    overflow: hidden;
}
.display {
    background-color: rgb(182, 182, 182);
    height: 100px;
    width: 100%;
    text-align: right;
    padding: 20px;
    font-size: 30px;
    position: relative;
}
.display-1 {
    opacity: 0.4;
    font-size: 20px;
    height: 20px;
    overflow: hidden;
}
.temp-result {
    position: absolute;
    bottom: 0;
    left: 10;
    font-size: 20px;
    opacity: 0.3;
}
.all_button {
    color: whitesmoke;
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(4, 1fr);
}
.button {
    border: 0.5px solid rgba(92, 92, 92, 0.137);
    display: inline-block;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
}
.button:hover {
    background-color: rgb(30, 43, 46);
}
.btn-0 {
    grid-column: 1/3;
}

Now We Complete Our Css Code Section For The Calculator,  Here Is Our Updated Output With Css Code. In The Next Code Slide, We Cover Our Whole Javascript Code For The Calculator.

100+ Front-end Projects for Web developers (Source Code)

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();
}

 

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

 

Create Image Slider Using HTML, CSS And JavaScript Code

In this post, we learn how to create a calculator Using html javascript with simple coding of HTML & css and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by – codewithrandom/Anki

Share on:

Leave a Comment