MASIGNASUKA101
3757417361466409779

# How To a Make Calculator Using Only HTML and CSS Add Comments
Monday, January 4, 2021

A calculator is a device that can easily solve large mathematical calculations. You can easily create a calculator using only HTML and CSS programming codes. JavaScript programming code plays an important role in calculators, but you can also create calculators without JavaScript. In this article, I will try to explain to you in full how to make a calculator without JavaScript programming code. I have used only HTML code and CSS code in this calculator. HTML code has been used to create and execute calculators. CSS code has been used to design and color it.

It is made in a very simple and simple way. Small mathematics calculations (+,-,*,/) can be solved here like a normal calculator. Here are the necessary buttons for making calculations. Each button is beautifully designed and made in different colors. In this case, there is a skin above where the calculations can be seen. A small amount of HTML programming code was used to create it. Hopefully, this will make the process of making your calculator easier and more beautiful.

### Video tutorial for learning how to make a calculator

You can watch the video below to know more. If you want to learn step by step, you must watch the video below.

Hopefully, the video tutorial above has completely helped you to make this calculator. If you want to download the source code needed to create it, you can use the download button above. You can also use the demo button above to watch the live demo.

### How to make this calculator using only HTML and CSS code

Below I have tried to explain step by step how I made it. If you want to know exactly, follow the tutorial below.

Design the background

Your own programming codes have been used to design the background of this calculator.

<!-- HTML Code -->
<form name="calc">
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>

/* css Code */

body{
background-color#a9bd7e;
}
table{
marginauto;
background-color#9dd2ea;
width295px;
height325px;
text-aligncenter;
border-radius4px;
}

Create the necessary buttons

The following codes have helped to create the necessary buttons for the calculator. Here are some common buttons that indicate the number. There are some operator buttons such as addition, subtraction, multiplication, division to do these things.

<td>
<input type="button" name="one" value="1" onclick="calc.input.value += '1'">
<input type="button" name="two" value="2" onclick="calc.input.value += '2'">
<input type="button" name="three" value="3" onclick="calc.input.value += '3'">
<input type="button" class="operator" name="plus" value="+" onclick="calc.input.value += '+'">
<br>
<input type="button" name="four" value="4" onclick="calc.input.value += '4'">
<input type="button" name="five" value="5" onclick="calc.input.value += '5'">
<input type="button" name="six" value="6" onclick="calc.input.value += '6'">
<input type="button" class="operator" name="minus" value="-" onclick="calc.input.value += '-'">
<br>
<input type="button" name="seven" value="7" onclick="calc.input.value += '7'">
<input type="button" name="eight" value="8" onclick="calc.input.value += '8'">
<input type="button" name="nine" value="9" onclick="calc.input.value += '9'"
<input type="button" class="operator" name="times" value="*" onclick="calc.input.value += '*'">
<br>
<input type="button" id="clear" name="clear" value=" C " onclick="calc.input.value=''">
<input type="button" name="zero" value="0" onclick="clac.input.value +='0'">
<input type="button" name="doit" value=" = " onclick="calc.input.value=eval(calc.input.value)">
<input type="button" class="operator" name="div" value="/" onclick="calc.input.value += '/'">
<br>
</td>

Design these buttons

Your own CSS programming code has helped you design these buttons and organize them into a calculator.

#calculator{
positionabsolute;
max-width80%;
left58%;
top10%;
}
input{
outline0;
positionrelative;
left5px;
top5px;
border0;
color#495069;
background-color4px;
width60px;
height50px;
floatleft;
margin5px;
font-size20px;
box-shadow0 4px rgba(0,0,0,0.2);
}
/* add input hover effectg */
input:hover{
border0 solid #000;
color#495069;
background-color#8f5fda;
border-radius4px;
width60px;
height50px;
floatleft;
margin5px;
font-size20px;
box-shadow0 4px #644294;
}

Create the screen

Your own programming code has been used to create the screen inside the calculator.

<input type="text" name="input" size="16" id="answer">

#answer{
width270px;
font-size26px;
text-aligncenter;
background-color#f1faeb;
floatleft;
}
/* answer hover effect */
#answer:hover{
width270px;
font-size26px;
text-aligncenter;
box-shadow0 4px rgba(0,0,0,0.2);
background-color#f1faeb;
}

Make buttons colorful

The following codes have helped make your buttons better, more professional, and more colorful. The hover effect has been added here which has helped the following programming to create.

.operator{
background-color#f1ff92;
positionrelative;
}

/* hover */
.operator:hover{
background-color#e7f56b;
box-shadow0 4px #b7c259;
}
#clear{
floatleft;
positionrelative;
displayblock;
background-color#ff9fa8;
margin-bottom15px;
}
/* hover */
#clear:hover{
floatleft;
displayblock;
background-color#f297a0;
margin-bottom15px;
box-shadow0 4px #cc7f86;
}

I hope the above tutorial has helped you to make a calculator without JavaScript. If you have any questions about this tutorial, be sure to ask in the comments.

1. Nice one but 0 button isn't working

1. Sorry for the mistake, now you can try. I fixed the mistake. Now the zero button is working nicely.