How To Make a Calculator Using Only HTML and CSS
Tags: calculator, html, css, javascript
Published: 2021-01-04 10:32:57

Have you ever built a calculator using only HTML programming code?

If your answer is no then congratulations you are going to learn something new in this article.
Many say that JavaScript programming code plays the most significant role in making calculators. So I made a calculator that was made using only HTML programming code. Here a small amount of CSS programming code has been used to design. From this article, you will learn [how to make a calculator](https://www.foolishdeveloper.com/2021/01/make-calculator-in-html.html) using a very small amount of HTML programming code. The [calculator](https://www.foolishdeveloper.com/2020/12/neumorphism-calculator-ui-design-using.html) shown here works exactly like a normal calculator.

 Basically here you can easily solve any kind of addition, subtraction, multiplication, division, etc. mathematics calculations. Different types of buttons have been used here and they have been designed using CSS code. I have designed many more types of calculators before, such as [Casio Company](https://www.backlinkn.com/2020/11/how-to-make-calculator-using-javascript.html), [neumorphism](https://www.foolishdeveloper.com/2020/12/neumorphism-calculator-ui-design-using.html), [Responsive](https://www.backlinkn.com/2020/11/make-calculator-using-.html), etc. But this design is completely new and common. In this article, you will find all kinds of necessary source codes and tutorials that will help you create this new design. 
## Watch the video tutorial to know the complete step by step
You can watch the video tutorial below. This will help you to fully learn and understand how to make this calculator.
{% youtube SgYdp5muZhc %}

<a href="https://www.foolishdeveloper.com/2021/01/make-calculator-in-html.html"><button>Demo: Click here</button></a>
<br>
<a href="https://www.foolishdeveloper.com/2021/01/make-calculator-in-html.html"><button>Download: Click here</button></a>

  Hopefully from the video above you have learned how to make this calculator. 
## How this calculator is made using HTML and CSS
Below I am going to show how I made it and what programming code was used to make the elements used here.

**Made the background**

First of all, I made the background of this calculator using CSS code. I have used a light green color in the background, you can change the color to your liking.

```css
body{
    background-color: #a9bd7e;
}
table{
    margin: auto;
    background-color: #9dd2ea;
    width: 295px;
    height: 325px;
    text-align: center;
    border-radius: 4px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i2hcqjk94nauw930c3y3.png)

**Add Buttons**

Here I have used different types of buttons which are made up of complete HTML programming code.
 There are some keyword buttons and some operator buttons. Operator buttons help to do calculations like addition, subtraction, multiplication, division, etc.

```html
<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>
         
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8jnvbm3ix4t8ro3h89fc.png)


**Design the buttons**

 The following codes have been used to design the buttons created by the HTML code and turn it into a calculator. Different types of colors have been added using these codes.

```css
input{
    outline: 0;
    position: relative;
    left: 5px;
    top: 5px;
    border: 0;
    color: #495069;
    background-color: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px rgba(0,0,0,0.2);
}

.operator{
    background-color: #f1ff92;
    position: relative;
}


#clear{
    float: left;
    position: relative;
    display: block;
    background-color: #ff9fa8;
    margin-bottom: 15px;
}

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ng5j6lz0m9u3iabi71a.png)

**Make the Display**

 The following programming codes have been used to make the display in this calculator. When you do some calculations, the display that is made to see those calculations is made with the help of the following programming codes.

```html
<input type="text" name="input" size="16" id="answer">
```
```css
#answer{
    width: 270px;
    font-size: 26px;
    text-align: center;
    background-color: #f1faeb;
    float: left;
}
/* answer hover effect */
#answer:hover{
    width: 270px;
    font-size: 26px;
    text-align: center;
    box-shadow: 0 4px rgba(0,0,0,0.2);
    background-color: #f1faeb;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t57wjujle5zdu8b3x47h.png)

**Add Hover Effect**

 This calculator uses its own programming code to create the hover effect. When you hover the mouse over a button, the buttons will change the current color. The following code has been used to perform this task.

```css
/* add input hover effectg */
input:hover{
    border: 0 solid #000;
    color: #495069;
    background-color: #8f5fda;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px #644294;
}
/* hover */
.operator:hover{
    background-color: #e7f56b;
    box-shadow: 0 4px #b7c259;
}
/* hover */
#clear:hover{
    float: left;
    display: block;
    background-color: #f297a0;
    margin-bottom: 15px;
    box-shadow: 0 4px #cc7f86;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vthnb6483f63nhgjg1m5.png)

 Hopefully, the tutorial above has helped you a lot to learn how to make a calculator. If you have any problems, you can definitely comment and ask me. I will definitely help you. You can follow our official website to read more such articles.

```
 💗  If you like this HTML calculator, please like the article 💗
```