How to make Calculator using HTML, CSS and JavaScript

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.

HTML code of calculator

<!DOCTYPE html>
<html>
<head>
 <title>Calculator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
 <form name="myForm">
  <input type="text" name="textview" class="textview" disabled>
 </form>
 <table>
  <tr>
   <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>
  </tr>
  <tr>
   <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>
  </tr>
  <tr>
   <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>
  </tr>
  <tr>
   <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>
  </tr>  
  <tr>
   <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>
  </tr>  
 </table>
</div>
<script src="calculation.js"></script>
</body>
</html>

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.

Live Demo Here

For a JavaScript Code, watch the video

Share this post