How To Make A Calculator Using HTML CSS And JavaScript

byforestcodeEra •February 14, 2023

0

Creating a calculator is a great way to practice your web development skills. In this tutorial, we'll guide you through the process of creating a basic calculator using HTML, CSS, and JavaScript.

Demo : https://arunaap.github.io/JsCalculator/

Step 1: Set up the HTML structure

The first step is to create the basic HTML structure for our calculator. We will use a form to create the calculator layout

Index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>Calculator</title>
</head>
<body>
<div class="container">
    <div class="calculator">
      <div class="title">
        <h4>ForestcodeEra Calculator</h4>
      </div>

      <form>
        <div class="display">
          <input type="text" name="display" />
        </div>

        <div>
          <input type="button" value="AC" class="operator" />
          <input type="button" value="DEL" class="operator" />
          <input type="button" value="." class="operator" />
          <input type="button" value="/" class="operator" />
        </div>
        <div>
          <input type="button" value="7" />
          <input type="button" value="8" />
          <input type="button" value="9" />
          <input type="button" value="*" class="operator" />
        </div>
        <div>
          <input type="button" value="6" />
          <input type="button" value="5" />
          <input type="button" value="4" />
          <input type="button" value="-" class="operator" />
        </div>
        <div>
          <input type="button" value="3" />
          <input type="button" value="2" />
          <input type="button" value="1" />
          <input type="button" value="+" class="operator" />
        </div>
        <div>
          <input type="button" value="00" />
          <input type="button" value="0" />
          <input type="button" value="=" class="equal operator" />
        </div>
      </form>
    </div>
</div>
</body>
</html>

In this code, we have created a form with six rows and four columns. The first row has a single input field that will display the result of our calculations. The other rows have buttons for each number and operator that we want to include in our calculator.

Step 2: Style the calculator with CSS

Next, we will use CSS to style our calculator. We will add some basic styles to make it look good and ensure that it is responsive.

Style.css

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background: #23342a
    url(https://blogger.googleusercontent.com/img/a/AVvXsEhWZZHbaQRsjm8zitGNPYgQFBgVUXtxH0aHJhvrAuOuA5aZl2ZOElr4B7tvjAE5wrpC3mlrXC0n5sizjsCVaDgmeUpM8AiZU8Spwx9SqNHqB7SP6uBIwahGDgyouKge4mUP3wD1NBXFk0fRa1YdjShHmAsmLcR_3_0Wkmq_dGj_dic6x3ka6NhhQ5Qx=s1600)
    repeat scroll top center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator {
  background: #3a4452;
  padding: 20px;
  border-radius: 10px;
  opacity: 100%;
}

.calculator .title h4 {
  color: #fff;
  text-align: center;
  font-size: 20px;
}

.calculator form input {
  border: 0;
  outline: 0;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.2);
  background: transparent;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
}

form .display {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

form .display input {
  text-align: right;
  flex: 1;
  font-size: 45px;
  box-shadow: none;
}

form input.equal {
  width: 145px;
}

form input.operator {
  color: #33ffd8;
}

Now that we have set up the HTML structure and styled our calculator with CSS, we can move on to the code that will perform the calculations.

Step 3: Add onClick() function to each buttons like this

<div>

<input

type="button"

value="*"

onclick="display.value += '*' "

class="operator"

/>

</div>

Some buttons have a different values

AC button –

<input

type="button"

value="AC"

onclick="display.value = display.value.toString().slice(0,-100)"

class="operator"

/>

DEL Button -

<input

type="button"

value="DEL"

onclick="display.value = display.value.toString().slice(0,-1)"

class="operator"

/>

Equal button -

<input

type="button"

value="="

class="equal operator"

onclick="display.value = eval(display.value)"

/>

In this code, we have created four functions:

onclick(): This is a function used in JavaScript to handle the click event of an HTML element. It allows a developer to define a custom function to be executed when an element is clicked.
toString(): This is a function used in JavaScript to convert a value to a string.
slice(0, -1): This is a method used in JavaScript to extract a portion of a string. It takes two parameters: the starting index and the ending index.
eval(): This is a function used in JavaScript to evaluate a string expression and return the result. It takes a string as an argument, which should contain a valid JavaScript expression, and returns the result of that expression.

Step 4: Testing the calculator

We can now test our calculator by opening the HTML file in a web browser. We can enter numbers and operators into the input field by clicking on the number and operator buttons. We can clear the input field by clicking on the "C" button, and we can calculate the result by clicking on the "=" button.

For example, if we want to calculate "2 + 3", we can click on the "2" button, then the "+" button, then the "3" button, and finally the "=" button. The input field should display "5", which is the result of the calculation.

In this tutorial, we have learned how to create a basic calculator using HTML, CSS, and JavaScript functions. We have set up the HTML structure, styled the calculator with CSS, and added JavaScript functions to perform the calculations. By following these steps, you can create your own calculator and practice your web development skills.

Here is the full source code :

https://github.com/ArunaAP/JsCalculator

Demo : https://arunaap.github.io/JsCalculator/

We will meet again.
Thank You!

Follow me :