How To Make a Calculator Using Only HTML and CSS

#calculator #html #css #javascript

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 using a very small amount of HTML programming code. The calculator 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, neumorphism, Responsive, 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.

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.

body{
    background-color: #a9bd7e;
}
table{
    margin: auto;
    background-color: #9dd2ea;
    width: 295px;
    height: 325px;
    text-align: center;
    border-radius: 4px;
}

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.

<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>

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.

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;
}

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.

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

#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;
}

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.

/* 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;
}

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 💗

Top comments (8)

Madza • Jan 4 '21

Next up: making it functional using just CSS 😉

John Ward • Nov 17 '21

The calculator doesn't actually work and not only that, shows up a cascade of buttons going left to right, not standard groups of 4 as shown above. And that makes sense because there is CSS to style a table element (the first bit of code to copy and paste), but no HTML code that exists to define that table. Also, most of your articles just seem to be the work of a guy called Shantanu Jana on Foolish Developer. Do you actually test and write all this code?