Calculator Html

Create Calculator Using HTML ,CSS & JavaScript (Source Code)

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.

Calculator Using HTML, CSS, and JavaScript

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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

Code byAysenur Turk
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNO
ResponsiveYES
Calculator Table

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>

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.

Calculator Using HTML, CSS, and JavaScript
 

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

step 1: The padding and margin will be adjusted to “zero” using the universal selection (*). We’ll use the box-sizing attribute to specify “border-box” as the box size.

Gym Website Using HTML and CSS With Source Code

We will now update the font style in our HTML structure using the HTML tag selector. We will specify “Montserrat” as the font family using the font-family attribute.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: "Montserrat", sans-serif;
}

Step2: The background colour will now be modified using the class selector (.section). The background will be set to “black” using the background-color property, and the width will be set to “100%” using the width property. We will centre the objects by using the align-items attribute.

Similarly we will add styling to the container of our calculator  

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+ JavaScript Projects With Source Code ( Beginners to Advanced)

Calculator Using HTML, CSS, and JavaScript
 

 

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

Calculator Using HTML, CSS, and JavaScript
 

 

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

Which code editor do you use for this Calculator coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes!

Do you use any external links to create this project?

No!



Leave a Reply