How I Created A Simple Calculator App With Just Simple Line Of Javascript

In this article i will share with you on how i designed a simple calculator site using HTML CSS and Javascript.
I have seen a lot of people designing calculator site code and when i go through there code, I keep wondering that there must be an easy way to do this. We all know calculator site a among a beginner project which helps to build your javascript knowledge.
this is my method of designing the site:

Step 1:Create the basic structure of the calculator

First i created a main tag which wrap where the answer will be display and the button also.

<main>
            <!--where the text and the answer will be displayed-->
            <div class="answer" id="answer"></div>
            <!--where the button will be using grid to display it-->
            <div class="grid"></div>
</main>

Step 2: Styled the aspect where the answer display

to style that aspect i first make sure it takes the whole width, I aligned the text to the right cause it's left by default. I also gave it an height cause i need it to have space.

<div class="answer" id="answer"></div>

.answer {
    height: 11vh;
    font-weight: bolder;
    font-size: 2rem;
    text-align: right;
    width: 100%;
    padding-top: 2rem;
    margin-bottom: 27px;
}

Step 3:Added all the button

I added the button in a class called grid cause the button will be displayed 4 in a row. so i used display grid to do these.

<div class="grid">
                <div class="btn btn1">c</div>
                <div class="btn btn1">ce</div>
                <div class="btn btn1">%</div>
                <div class="btn btn1">/</div>
                <div class="btn">7</div>
                <div class="btn">8</div>
                <div class="btn">9</div>
                <div class="btn btn1">*</div>
                <div class="btn">4</div>
                <div class="btn">5</div>
                <div class="btn">6</div>
                <div class="btn btn1">-</div>
                <div class="btn">1</div>
                <div class="btn">2</div>
                <div class="btn">3</div>
                <div class="btn btn1">+</div>
                <div class="btn">0</div>
                <div class="btn btn1">=</div>
</div>

.grid {
    grid-column-gap: 57px;
    grid-row-gap: 60px;
    place-items: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

Step 4: Styled the button element

when styling the button i gave it same width and height cause i want it to have a border-radius:50%. also displayed it grid so i can center the element using place-items:center.

.btn {
    display: grid;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    place-items: center;
    cursor: pointer;
}
.btn:hover {
    background-color: #d4d6d8;
}

Step 5: Activating the Calculator button using Javascript

Now i have activated each button using javascript code. First i set constants to the class and id. Here ".btn", "#answer"

const btns = document.querySelectorAll(".btn");
const answer = document.getElementById("answer");

then i cycle through the btn using a foreach so each type a particular button is clicked it should get the textcontent of the value which was stored in a let variable called click.

btn.addEventListener("click", (e) => {
        let click = e.target.textContent;)
}

After that we need to check if the textcontent we clicked is c , ce, = if it's any of these do something.

btns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
        let click = e.target.textContent;

        switch (click) {
            case "=":
                answer.textContent = eval(answer.textContent);
                break;
            case "c":
                answer.textContent = "";
                break;
            case "ce":
                answer.textContent = answer.textContent.substr(
                    0,
                    answer.textContent.length - 1
                );
                break;
            default:
                answer.textContent += click;
        }
    });
});

Hope you know the basic of Javascript and understand javascript structure above.

Hopefully this article have explained how to design a calculator using Html Css and Javascript.