How to make Calculator using HTML, CSS and JavaScript

Want to create your own calculator using HTML, CSS, and JavaScript. Then learn step by step.

How to make Calculator using HTML, CSS and JavaScriptHTML code of calculator

<!DOCTYPE html>
 <link rel="stylesheet" type="text/css" href="style.css">
<div class="main">
 <form name="myForm">
  <input type="text" name="textview" class="textview" disabled>
   <td><input class="button symbol gray" type="button" onclick="SR('r')" id="r" value="√" disabled></td>
   <td><input class="button symbol gray" type="button" onclick="SR('s')" id="s" value="x²" disabled></td>
   <td><input class="button symbol gray" type="button" onclick="back()" value="⌫"></td>
   <td><input class="button symbol blue" type="button" onclick="insertOp('/')" value="÷"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(7)" value="7"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(8)" value="8"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(9)" value="9"></td>
   <td><input class="button symbol blue" type="button" onclick="insertOp('*')" value="X"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(4)" value="4"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(5)" value="5"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(6)" value="6"></td>
   <td><input class="button symbol blue" type="button" onclick="insertOp('-')" value="-"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(1)" value="1"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(2)" value="2"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(3)" value="3"></td>
   <td><input class="button symbol blue" type="button" onclick="insertOp('+')" value="+"></td>
   <td><input class="button symbol gray" type="button" onclick="clean()" value="C"></td>
   <td><input class="button number gray" type="button" onclick="insertNum(0)" value="0"></td>
   <td><input class="button symbol gray" type="button" onclick="insertDec()" value="."></td>
   <td><input class="button symbol blue" type="button" onclick="equalTo()" value="="></td>
<script src="calculation.js"></script>

CSS code of calculator

*{margin: 0px;
padding: 0px;
.button {
width: 75px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
border: none;
.textview {
width: 305px;
margin: 5px;
font-size: 25px;
padding: 5px;
border: none;
background-color: transparent;
.number {
background-color: white;
font-weight: bold;
.main {
width: 327px;
height: 332px;
background-color: #efecec;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
border: 1px solid gray;
.symbol {
background-color: #fbfbfb;
.gray:hover {
background-color: #e0e0e0;
.blue:hover {
background-color: #03a9f4;

You may also want to make a registration form using MySQL and PHP.
For a JavaScript Code, watch the video