How To Create A Calculator Using HTML, CSS, and JavaScript

How To Create A Calculator Using HTML, CSS, and JavaScript

In this article, I am going to show you how to make a JavaScript calculator very easily. Earlier I designed many more types of calculators using HTML CSS and JavaScript programming code. This design is basically made in the form of Neumorphism design

Neumorphism is basically a very popular design currently used to create a variety of UI elements. If you want to learn how to make this design, you must have a basic idea about HTML, CSS, and JavaScript. Here, the structure and buttons of this calculator are basically made using HTML programming code. The CSS code helped to transform it into a Neumorphism design. This calculator is enabled using JavaScript code.

Create A Calculator Using HTML, CSS, and JavaScript

I have shown step by step how I made this calculator. If you want to see the demo of it, I have added the demo of Codepen below. From where you can see the demo and download the required source code.

See the Pen calculator 1 by shantanu jana (@fghty) on CodePen.


However, if you are a beginner, I request you to watch the tutorial and learn how to make it step by step. 
 To create it, first, you need to create an HTML and CSS file. Of course, you can attach the CSS file to the HTML file. Then copy the structure below and add it to the HTML file. In the structure below I have given complete information on how you can add other codes to the file.

Step 1: Create the basic structure of the calculator

HTML Code:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

</head>

<body>
 
  <div class="container">
   <!--result box-->

   <!--All Button-->
 

  </div>

  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>


</body>

</html>


CSS Code:

These are the CSS programming code with which the basic structure for making this calculator has been designed. It has been converted to a Neumorphism design using its CSS code.


@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
  background: #dde1e7;
  font-family: 'Montserrat', sans-serif;
}
.container {
  background: #dde1e7;
  width: 320px;
  height: 550px;
  border-radius: .5em;
  box-shadow: -3px -3px 7px #ffffff73,
              2px 2px 5px rgba(94, 104, 121, 0.288);
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}

Create the basic structure of the calculator

Step 2: Create a result box for viewing calculations

Any calculator has a box for viewing calculations. In the same way, a box is made in this calculator. Here all kinds of calculations can be seen beautifully in that box. The following programming codes have been used to create and design this box.


HTML Code:
 <div class="result">
      <p id="result-box">0</p>
    </div>


CSS Code:
.container .result {
  width: 100%;
  height: 150px;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
  
}
.container .result p {
  font-size: 40pt;
  overflow-y: auto;
  text-align: right;

}

reate a result box for viewing calculations

Step 3: Create the buttons in the calculator

Many buttons have been used for calculations. The following codes have been used to construct those buttons.


HTML Code:
<div class="buttons">
      <div class="button action-btn" id="clear"> AC </div>
      <div class="button action-btn"> MC</div>
      <div class="button num-button  action-btn"> %</div>
      <div class="button num-button  calc-action-btn"> /</div>
      <div class="button num-button seven">7</div>
      <div class="button num-button eight">8</div>
      <div class="button num-button  nine">9</div>
      <div class="button num-button  calc-action-btn">*</div>
      <div class="button num-button  four">4</div>
      <div class="button num-button  five">5</div>
      <div class="button num-button  six">6</div>
      <div class="button num-button  calc-action-btn">-</div>
      <div class="button num-button  one">1</div>
      <div class="button num-button  two">2</div>
      <div class="button num-button  three">3</div>
      <div class="button num-button  calc-action-btn">+</div>
      <div class="button num-button  zero">0</div>
      <div class="button num-button  point">.</div>
      <div class="button calc-action-btn" id="total">=</div>
    </div>


CSS Code:

The following programming codes are the CSS programming codes used to design the buttons above. Each of the buttons here has been converted to a neomorphic design, meaning the buttons are slightly raised.


.container .buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}
.container .buttons .button, .container .buttons .num-button  {
  cursor: grab;
  text-align: center;
  width: 60px;
  font-size:18px;
  height: 60px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  box-shadow: 2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}
.button:hover{
  color: #3498db;

 
}

Create the buttons in the calculator

CSS Code:

The following codes have helped to design the zero button in this calculator. Normally there are 0 rounds but as a result of using the programming code below, it has 0 square shapes. With this, the color of the special keywords i.e. the buttons used for calculation has been changed.


.container .buttons .zero {
  grid-column: 1/ 3;
  width: 100%;
  font-size:18px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}

 
.action-btn {
  color: grey;
  font-weight: bold;
}
.calc-action-btn{
  color: #ed11d7;
  font-size: 20px;
  font-weight: bold;
}


Step 4: Activate the buttons on the calculator 

So far we have designed this calculator but it has not been made effective. You must use JavaScript programming code to make it work. Using the following programming codes, I have activated these calculator push buttons, which means that when you press the buttons, the numbers at the top of the screen will appear.


JS Code:
let btns = document.querySelectorAll(".num-button");
let allBtns = document.querySelectorAll(".button");
let resultBox = document.querySelector("#result-box");
let clearBtn = document.querySelector('#clear');

let total = document.querySelector("#total");

let btnSpread = [...btns];
let allBtnSpread = [...allBtns];

// For Number Inputs
btnSpread.forEach((button, i) => {
  button.addEventListener("click", () => {
    // Inner Values for calculator

    if (resultBox.innerHTML == "0") {
      resultBox.innerHTML = "";
    }

    let value = btns[i].innerHTML;
    resultBox.innerHTML += value;
  });
});

Activate the buttons on the calculator

Step 5: Add the following JavaScript code to calculate the inputs

I have shown above how to activate the numbers. Now I have shown how to calculate those inputs and show the results.


JS Code:
// Function to evalute Strings
function evaluate(fn) {
    return new Function('return ' + fn)();
}

// To calculate All Input
total.addEventListener('click', ()=> {
let allInputs = resultBox.innerHTML;

resultBox.innerHTML = evaluate(allInputs);

console.log(evaluate(allInputs));
})

// Clear all Inputs
clearBtn.addEventListener('click', ()=> {
    resultBox.innerHTML = "0";
})
 


 
Add the following JavaScript code to calculate the inputs

Hopefully, you have learned How To Create A Calculator Using HTML, CSS, and JavaScript from the tutorial above. In the meantime, I have created many more types of designs that you can see if you want. If you want to download the source code, you can download the source code for free using the download button below.




Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.