Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 8, 2021 04:11 pm GMT

Simple JavaScript calculator Tutorial for Beginners

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}

Create a display for viewing calculations

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>

Add the required buttons
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;}

Designed the buttons

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 variableconst inputField = document.getElementById('input');// Insert number on input fiedconst insertNum = num => inputField.textContent += num;// Do operation using eval()const equalTo = () => (inputField.textContent) ? inputField.textContent = eval(inputField.textContent) : false;// Remove 1 val at timeconst eraseNum = () => inputField.textContent = inputField.textContent.substring(0, inputField.textContent.length - 1);// Clear all the inputconst clearInput = () => inputField.textContent = '';

Activate the calculator with JavaScript
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.


Original Link: https://dev.to/code_mystery/simple-javascript-calculator-tutorial-for-beginners-477c

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To