Simple JavaScript calculator Tutorial for Beginners

#html #css #javascript #webdev

In this article I will show you how to make a simple JavaScript calculator. The calculator is a simple UI design used to perform mathematical calculations. The calculator made in the article is very simple. Here you can easily do small mathematical calculations like addition, subtraction, multiplication and division. Here I have used a total of eighteen buttons. There are eleven number buttons and 6 operator buttons. There are numbers from zero to 9 and there are operator buttons like plus, minus, equal, cancel etc.

You can watch the live demo to know how the calculator works. As you can see in the picture above there is a small display with some buttons here. In this case, I made all these buttons using HTML code. I have designed this calculator using CSS code and added the colors in it. JavaScript has implemented the buttons of this calculator. In this case I have used very little i.e. only five lines of js code.

If you know basic HTML CSS and JavaScript programming then you will definitely understand how to make this calculator.

Step 1: Basic structure of calculator

The following HTML code is the basic structure in which we will add all the buttons and displays.



<div class="main-container">
            <div class="calc-container">


            </div>
        </div>

I have designed the basic structure of this calculator using the following css codes.

Here I have not set any size of the calculator i.e. width, height etc. The size of the calculator will be determined depending on the size of the buttons.



@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

* , html, body, p {
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
}
body{
    margin-top: 10%;
}


/* Grid */
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    /* height: 100vh; */
}


.calc-container {
    display: grid;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Step 2:Create a display for viewing calculations

Each calculator has a display where all the calculations can be seen. Here again I have used a small display which I have used to create the following HTML and CSS code. I have used 2em height and 100% width of the display.

In this case I have used the background color equivalent to the background of the calculator. As a result, the display does not look different. However you can change this background color if you want the display to be seen separately.



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



/* Input */
#input {
    width: 100%;
    height: 2em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #FDFEFE;
    padding-right: 10px;
    font-size: 3em;
    text-align: right;
    background-color: #223850;
    transition: all 0.3s ease-in
}

Step 3: Add the required buttons

I have added all the buttons using the following HTML codes. As I said before here I have used eighteen buttons. There are eleven number buttons and the remaining 7 operator buttons. If you know the basic HTML, you must understand the following codes.



      <div id='buttons-container'>
                    <div class="btn btn-operator " onclick="clearInput()">C</div>
                    <div class="btn btn-operator " onclick="eraseNum()">⌦</div>
                    <div class="btn btn-operator " onclick="insertNum('/')">/</div>
                    <div class="btn btn-operator " onclick="insertNum('*')">x</div>

                    <div class="btn btn-num" onclick="insertNum(7)">7</div>
                    <div class="btn btn-num" onclick="insertNum(8)">8</div>
                    <div class="btn btn-num" onclick="insertNum(9)">9</div>
                    <div class="btn btn-operator " onclick="insertNum('-')">-</div>

                    <div class="btn btn-num" onclick="insertNum(4)">4</div>
                    <div class="btn btn-num" onclick="insertNum(5)">5</div>
                    <div class="btn btn-num" onclick="insertNum(6)">6</div>
                    <div class="btn btn-operator " onclick="insertNum('+')">+</div>

                    <div class="btn btn-num" onclick="insertNum(1)">1</div>
                    <div class="btn btn-num" onclick="insertNum(2)">2</div>
                    <div class="btn btn-num" onclick="insertNum(3)">3</div>
                    <div class="btn btn-operator equal " onclick="equalTo()">=</div>
                    <div class="btn btn-num dot" onclick="insertNum(0)">0</div>
                    <div class="btn btn-num" onclick="insertNum('.')">.</div>

                </div>

I have designed the buttons added above using the css codes below. As I said earlier the size of the calculator will be determined depending on the size of this button. In this case I have used padding: 20px 30px but you can increase the amount if you want.



#buttons-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    text-align: center;

}

/* Btn's */
.btn {
    display: flex;
    font-size: 1.2em;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    transition: all 0.3s ease-in;
    border: 0.3px solid rgba(251, 253, 255, 0.171);

}

.dot {
    grid-column: span 2;
}

.equal {
    grid-row: span 2;
}

.btn-num {
    background-color: #223850;
    color: #6885A7;
}

.btn-num:hover {
    background-color: #233B55;
}

.btn-operator {

    background-color: #128094;
    color: #ffffff;
}

.btn-operator:hover {
    background-color: rgb(52, 155, 196) !important
}

.equal{
    background-color: #e77c18;
}

Step 4: Activate the calculator with JavaScript

Now we have only designed this calculator, now we will implement it. In this case, I have used five lines of JavaScript code. Next to each line I have explained why I have used this code so that beginners will understand.



// Value input variable
const inputField = document.getElementById('input');

// Insert number on input fied
const insertNum = num => inputField.textContent += num;

// Do operation using eval()
const equalTo = () => (inputField.textContent) ? inputField.textContent = eval(inputField.textContent) : false;

// Remove 1 val at time
const eraseNum = () => inputField.textContent = inputField.textContent.substring(0, inputField.textContent.length - 1);

// Clear all the input
const clearInput = () => inputField.textContent = '';

I hope you have learned from this tutorial how I made this calculator. You can watch a live demo of this calculator to learn how it works. Be sure to comment on how you like this design.