DEV Community

Cover image for How To Make a Calculator Using Only HTML and CSS
Anita Maity
Anita Maity

Posted on

How To Make a Calculator Using Only HTML and CSS

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.

Demo: Click here


Download: Click here

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>

Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Enter fullscreen mode Exit fullscreen mode

Alt Text

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">
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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 💗
Enter fullscreen mode Exit fullscreen mode

Top comments (8)

Collapse
 
madza profile image
Madza

Next up: making it functional using just CSS 😉

Collapse
 
nickmcdev profile image
John Ward

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?

Collapse
 
divya527 profile image
Divya vishwakarma

Awsm 🔥...I saw it first time in my career that calculator can also make by using only html and CSS. Such a good think I learned from you!

Collapse
 
anitamaity profile image
Anita Maity

Thank you Divya Vishwakarma for encouraging me with your feedback.

Collapse
 
lymnee profile image
lymnee

I designed a calculator that uses Css calc() to solve the four basic arithmetic operations:
lymnee.github.io/css-calculator.html

Collapse
 
vetripraveena profile image
Vetripraveena

Good Morning Mam,

I am a beginner of web development, I tried this calc code. But not working.

Please help.

Collapse
 
angwahf profile image
Angwah Furt

u forgot colspan for the display
but overall perfect

Collapse
 
abdurrazzakhera profile image
Abdur Razzak Hera

i can't make calculator.. plese help.. and your vidio already delete .

Some comments may only be visible to logged-in visitors. Sign in to view all comments.