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.
For a JavaScript Code, watch the video

0 0 votes

Article Rating

10 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

altsols

4 years ago

Great article. Thanks for sharing content and such nice information for me. I hope you will share some more content about. Calculator using html Please keeps sharing!