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>
<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
Subscribe
Notify of
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
altsols
2 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!

altsols

Nawaraj Shah
2 years ago

For Js code of calculator, you have to watch the video

bananaunana
2 years ago

I mean the code for js. I would like to try it on my own rather than watching it. Thank you

bananaunana
2 years ago

hello, i would like to know where is the js code for this calculator?

Gayathri S
2 years ago

Thanks for sharing the useful blog post to create a Simple Calculator using HTML, CSS and JavaScript.

Web Design Company in Coimbatore

priya
priya
2 years ago

calculator is not working

bananaunana
2 years ago

I mean the code for js. I would like to try it on my own rather than watching it. Thank you

Nawaraj Shah
2 years ago

For Js code of calculator, you have to watch the video

priya
priya
2 years ago

calculator is not working

bananaunana
2 years ago

hello, i would like to know where is the js code for this calculator?