Calculator full coding in HTML,JavaScript

How to make calculator using HTML javaScript ?

Create a simple calculator with HTML JavaScript.

Here, full coding of Calculator in JavaScript and HTML.

copy all code and paste it between body tag and save in to .html format.

Calculator coding.

CSS is required for proper alignment of the button of the calculator.


<style>
   

  
  
button{
    

    
   width:100%; 
    
   

 }
    

 </style>


  <table>

  <tr>

   <td colspan="4" >
<input type="text" id="txtVal" >
</td>

  </tr>



    
    
    
  <tr>

   <td colspan="2"><button onclick="backRemove();"><- </button></td>
   <td><button onclick="clearVal();">C</button></td>
   <td><button onclick="operation('+');">+</button></td>
  </tr>


  <tr>

   <td><button onclick="numberVal(7);">7</button></td>
   <td><button onclick="numberVal(8);">8</button></td>
   <td><button onclick="numberVal(9);">9</button></td>
   <td><button onclick="operation('-');">-</button></td>
  </tr>


  <tr>

   <td><button onclick="numberVal(4);">4</button></td>
   <td><button onclick="numberVal(5);">5</button></td>
   <td><button onclick="numberVal(6);">6</button></td>
   <td><button onclick="operation('*');">*</button></td>
  </tr>


  <tr>

   <td><button onclick="numberVal(1);">1</button></td>
   <td><button onclick="numberVal(2);">2</button></td>
   <td><button onclick="numberVal(3);">3</button></td>
   <td><button onclick="operation('/');">/</button></td>
  </tr>


  <tr>

   <td colspan="2"><button onclick="numberVal(0);">0</button></td >
   <td colspan="2"><button onclick="calResult();">=</button ></td>
  </tr>

 </table >




 <script>

  var firstValue;

  var _operator;


  function  numberVal(value)

  {
   txtVal.value += value;
  }



  function  operation(operator)

  {
   _operator = operator;

   firstValue = txtVal.value;

   txtVal.value = "";
  }



 
  function  calResult()

  {
   var answer = firstValue + _operator + txtVal.value

   txtVal.value = eval(answer);
  }



  function  clearVal()

  { 
   txtVal.value = "";
  }



  function  backRemove()

  {

   var pm = txtVal.value;

   txtVal.value = pm.slice(0, -1);;

  }

 </script>

What is the code of the calculator backspace icon?


Calculator Backspace icon code.
Calculator back value Remove Icon.  

Backspace icon in 
text fromat = ⌫ you can copy and paste.

Otherwise use this code 
<i class="fas fa-backspace"></i> 

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

How to remove values one by one in a text box?

how to back remove 1 value in calculator?

DEMO in video: Delete the characters in the textbox one by one

You can erase the text values one by one in the textbox using the following JavaScript, HTML below.


  
<input type="text" id="txt" value="12345" />

   
<button onclick="backRemovel()">BackRemove 1 value </button>


   
   
   
<script>


function backRemovel(){


var txt = document.getElementById("txt").value;
pm = txt.slice(0,-1);
document.getElementById("txt").value=pm ;

}




</script>

It will be very helpful for us if you share our website with your friends.