Create your own calculator in HTML, CSS, JAVASCRIPT

This project is divided into 2 parts: the Front End and the Back End. We will create the structure of our calculator using HTML and beautify it using CSS in the Front-end part.

In the Back End part, we will give it a life, that is, make it work to solve the equations. The back-end part will be done using javascript.

So let's dive into Part 1: The structure and design of our calculator.

First, open the desired code editor. In my case, I would use VS Code. You can use anyone you like (Sublime Text, Atom, etc.).

create a new file and save the new file as “projectname.html”. After that, we'll add the basic structure of our HTML file (the boilerplate). In VS Code, you can get it by typing "!" and pressing Enter. Now you will see something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Change the “Document” text to whatever name you want your calculator project to have.

Now we need to define an area where we will show the output to the user. This is our exit screen. For this, I do a division with class display.

<!--add this code in the body.-->
<div class="display">  <p> id="output">0</p> </div>

Our first row of buttons will have 3 buttons, although the next row will have 4 buttons. Indeed, the Clear button in the first row will replace 2 buttons because it is the main button of our calculator (0 also).

For this, I define a new div with the “first line” class. Here, all our buttons belonging to the first line will be placed here. The buttons will be “D”, “%” and “/”.

The identifier should follow the format: “row_no-button_no”. Example: if the button is for row 1 and is the first button in the row, it will have an id “r1–1”.

See example below

<button id="r1-1">D</button>

If you don't equally get things like the above, refer to the given HTML code. Don't just copy and paste. If everything is perfect, congratulations

<div class="first-row">
   <button id="r1-1">Delete</button>
   <button id="r1-3">%</button>
   <button id="r1-4">/</button>
</div>
<div class="second-row">
   <button id="r2-1" >7</button>
   <button id="r2-2" >8</button>
   <button id="r2-3" >9</button>
   <button id="r2-4" >X</button>
</div>
<div class="third-row">
   <button id="r3-1" >4</button>
   <button id="r3-2" >5</button>
   <button id="r3-3" >6</button>
   <button id="r3-4" >-</button>
</div>
<div class="fourth-row">
   <button id="r4-1"  >1</button>
   <button id="r4-2"  >2</button>
   <button id="r4-3"  >3</button>
   <button id="r4-4"  >+</button>
</div>
<div class="fifth-row">
  <button id="r5-1" >0</button>
  <button id="r5-2" >.</button>
  <button id="r5-3" >=</button>
</div>

But the calculator looks ugly. Let's move on to the CSS section.

Also, remember that the calculator will not respond because it would have taken longer to explain. So, once you are able to understand this simple coding process, you can continue to make the calculator responsive.

So you need to create a CSS file named "style.css" and then we shall connect the new CSS file (say “style.css”) to the HTML page.

For this, inside the head tag, the code below must be there:

<link rel="stylesheet" href="style.css" type="text/css">

We equally need to make it look like the snapshot above.

So 5 things will be involved in creating the exit screen like this.

This is the background color Padding Length Text alignment Font size

So let's write our CSS code on our "style.css" file:

.display {
    background-color: rgb(201, 201, 201);
    padding: 15px;
    width: 250px;
    text-align: right;
    font-size: 20px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
```}

Now we are going to write common CSS code for all the buttons because we want them to look the same. (except 0 & C, we will come back to this).

This will equally involve 7ths:

Padding
Length
the size
Margin
Background color
Text Color
Font size

On your CSS file, also copy the following code;

button { padding: 10px; width: 67px; height: 45px; margin-top: 10px; background-color: rgb(194, 194, 194); color: black; font-size: 20px; }


Refer to the code in your HTML file:

Delete


Back to CSS. The code below will permit us to be able to highlight a click button

.button:hover { cursor: pointer; background-color: rgb(182, 178, 178); } button:active { background-color: rgb(136, 136, 136); }

So we are done with our front end but still, our calculator is not alive

So let's dive into the backend section and let the calculator solve our problems.

Let's create a JavaScript file, say “scripts.js”. We also need to link it to our HTML file.

Place the code inside the head tag.

Delete % /

7 8 9 X

4 5 6 -

1 2 3 +

0 . =


Your CSS code should be like this;

.display { background-color: rgb(201, 201, 201); padding: 15px; width: 250px; text-align: right; font-size: 20px; border-top-left-radius:10px; border-top-right-radius:10px; } button { padding: 10px; width: 67px; height: 45px; margin-top: 10px; background-color: rgb(194, 194, 194); color: black; font-size: 20px; } button:hover { cursor: pointer; background-color: rgb(182, 178, 178); } button:active { background-color: rgb(136, 136, 136); }


and your javascript should be like this;