In this article we’re going to discuss a simple algorithm on how to build a simple calculator using just HTML and JavaScript.

We call it a simple calculator because it’ll only consist of basic operations like addition(+), multiplication (*), division(/), subtraction(-), squares and square-roots.

Also see How to perform a page search using JavaScript.

Before we begin, we’ll assume you already know the basics of the core languages needed which are HTML and JavaScript. CSS can be used to improve styling but that isn’t the scope of this tutorial. Let’s just say we’re dealing with the structure and functioning of this calculator. Just to simplify it more.

Creating a HTML table to align our calculator buttons.

Lets start with arranging our buttons for the calculator in the table. No, it’s not just a desk table where you keep your books or sleep with in classes. This table is a row and column arrangement which is originally used to store related data. But here we just need the row-column arrangement to make our calculator look professional.

Let’s begin with the HTML code.

JavaScript calculator form.

<table>
//First row.
  <tr>
    <td>
<button
onclick="display('9')"
  value="9">9</button>
    </td>
    <td>
<button
onclick="display('8')"
  value="8">8</button>
    </td>
    <td>
<button
onclick="display('7')"
  value="7">7</button>
    </td>
    <td>up
<button
onclick="display('+')"
  value="+">+</button>
    </td>
  </tr>


//Second row

  <tr>
    <td>
<button
onclick="display('6')"
  value="6">6</button>
    </td>
    <td>
<button
onclick="display('5')"
  value="5">5</button>
    </td>
    <td>
<button
onclick="display('4')"
  value="4">4</button>
    </td>
    <td>
<button
onclick="display('-')"
  value="-">-</button>
    </td>
  </tr>

//Third row

  <tr>
    <td>
<button
onclick="display('3')"
  value="3">3</button>
    </td>
    <td>
<button
onclick="display('2')"
  value="2">2</button>
    </td>
    <td>
<button
onclick="display('1')"
  value="1">1</button>
    </td>
    <td>
<button
onclick="display('/')"
  value="/">/</button>
    </td>
  </tr>

//Fourth row
 
  <tr>
    <td>
<button
onclick="square()"
  value="">x²</button>
    </td>
    <td>
<button
onclick="sqrt()"
  value="">√x</button>
    </td>
    <td>
<button
onclick="cube()"
  value="">x³</button>
    </td>
    <td>
<button
onclick="equalto()"
  value="">=</button>
    </td>
  </tr>
 
</table>

Note the onclick attributes. We’re going to need them soon

Now see that we’ve defined five functions in our HTML, which we’re going to define in our JavaScript code. But first we’ll create our screen where the values will be printed.

Let’s use a read-only input tag as our screen.

<input type="text"
id="screen" readonly>

This is a special kind of input tag which doesn’t allow users to type values directly from their keyboards, unless it’s from our button.

Now that the structure of our calculator is set, well begin the JavaScript for functioning.

JavaScript calculator function.

<script>

var screen=
document.getElementById
("screen");

//Printing values to the screen

function display(val){

screen.value+=val;


}

//Function for the
Equal to button.

function equalto(){

screen.value=
eval(screen.value);

//Evaluate any operation
on the screen.
}

//the square button.

function square(){

screen.value*=screen.value;

//Multiply the value
of the screen by it's
self and print.
}

//square root button.

function sqrt(){

screen.value=
Math.sqrt(screen.value);

//JavaScript function
For Square roots
}

//the cube function.

function cube(){

screen.value=
screen.value *
screen.value *
screen.value;

//Multiply the value
of the screen by it's
Self thrice.

}
</script>

Just like that, our calculator now works with all the basic functions. Feel free to add your custom css code to add to it’s beauty or even use the bootstrap framework for more professional styling.

If you’ve gone through our Building a computer based exam tutorial, feel free to add this calculator in your work and make it more productive.

We hope this calculator tutorial helped you find what your looking for. If yes, feel free to follow our social media channels.

You can also send us an email if you want at hello@charmingdesk.com.ng or leave your comments and feedback using the form below.

Charming desk, your favorite web developers.


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

4 Comments

John win · May 10, 2021 at 9:53 pm

Nice one . I had fixed de bug

    kid charming · May 10, 2021 at 10:08 pm

    That’s nice. Hope you’re enjoying your coding journey 😎

John win · May 10, 2021 at 12:04 pm

Hy ur script is not writing values to the text field rather it written them to a separate window . when I click on any button e g 6 with printed in a new window instead of appearing on de text field.

    kid charming · May 10, 2021 at 1:18 pm

    Hello, sorry for the inconveniences you faced. We are enlightened to tell you that we have updated the post. Feel free to experiment as you wish 😉.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: