Home TechnologyHTML How to Create Calculator Using HTML, CSS, and JavaScript

How to Create Calculator Using HTML, CSS, and JavaScript

by Snehashis Mukherjee

Hi readers, how are you? The calculator is one of the most useful applications in our daily life. To use the calculator you need to download the application from Playstore or App store. But you can not change or customize however you want. Here in this article, I’m going to explain to you, building a calculator, using HTML, CSS, and JavaScript. The best part of this calculator is that you can customize it however you want. To use your Calculator you don’t need to download any applications. You can run your calculator in your mobile browser.

How to create a calculator

Whether you know to code or not you can create your own Calculator Using HTML, CSS, and JavaScript. If you have knowledge then you can modify the style, look or functionality of your calculator. This code is so simple so that you can understand easily. But if you don’t want to make changes then you just need these basic things.

  1. Any editor(VS Code Recommended).
  2. Web Browser(Google Chrome Recommended)

If you have these two then follow the below steps and to create a calculator using HTML, CSS, and JavaScript.

Also read how to create snake game using html

Step 1: Creating HTML file

HTML geeksteps

Open your code editor or Notepad, then copy the below code and paste the code into your editor.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script,js"></script>
    </head>
    <body>
        <div class="bg">
        <div class="main">
            <form name="form">
                <input class="textview" name="textview">
            </form>
            <table>
                <tr>
                    <td><input class ="button" type="button" value="C" onclick="clean()"></td>
                    <td><input class ="button" type="button" value="<" onclick="back()"></td>
                    <td><input class ="button" type="button" value="/" onclick="insert('/')"></td>
                    <td><input class ="button" type="button" value="X" onclick="insert('*')"></td>
                </tr>
                <tr>
                    <td><input class ="btn" type="button" value="7" onclick="insert(7)"></td>
                    <td><input class ="btn" type="button" value="8" onclick="insert(8)"></td>
                    <td><input class ="btn" type="button" value="9" onclick="insert(9)"></td>
                    <td><input class ="button" type="button" value="-" onclick="insert('-')"></td>
                </tr>
                <tr>
                    <td><input class ="btn" type="button" value="4" onclick="insert(4)"></td>
                    <td><input class ="btn" type="button" value="5" onclick="insert(5)"></td>
                    <td><input class ="btn" type="button" value="6" onclick="insert(6)"></td>
                    <td><input class ="button" type="button" value="+" onclick="insert('+')"></td>
                </tr>
                <tr>
                    <td><input class ="btn" type="button" value="1" onclick="insert(1)"></td>
                    <td><input class ="btn" type="button" value="2" onclick="insert(2)"></td>
                    <td><input class ="btn" type="button" value="3" onclick="insert(3)"></td>
                    <td rowspan=5><input class ="button" style="height:106" type="button" value="=" onclick="equal()"></td>
                </tr>
                <tr>
                    <td colspan=2><input class ="btn" style="width:106" type="button" value="0" onclick="insert(0)"></td>
                    <td><input class ="btn" type="button" value="." onclick="insert('.')"></td>
                </tr>
            </table>
        </div>
    </div>
    </body>
</html>

Save the file as Calculator.html, if you are using Notepad then select all files while saving from the bottom right dropdown menu.

Step 2: Creating a CSS file

css geeksteps

In your code editor create a new file then copy the below code and paste the code into your newly created file.

*{
    margin: 0;
    padding: 0;
}
.button{
    width: 50;
    height: 50;
    font-size: 25;
    margin: 2;
    cursor: pointer;
    background: #f10c0c;
    border: none;
    color: white;
}
 
.btn{
    width: 50;
    height: 50;
    font-size: 25;
    margin: 2;
    cursor: pointer;
    background: #510cf1;
    border: none;
    color: white;
}
.textview{
    width: 217;
    margin: 5;
    font-size: 25;
    padding: 5;
    border: none;
    color: #607d8b;
}
.main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
body{
    background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
 
 
}

Save the file as style.css. This file is used to apply styles on your HTML code which you have written on the Calculator.html file. So if you mistake anywhere then your style will not be applied to your calculator.

Step 3: Creating a JavaScript file

javascript-geeksteps

Same as the above steps create a new file In your editor then copy the below code and paste the code into your file.

function insert(num){
    document.form.textview.value = document.form.textview.value+num
}
function equal(){
    var exp = document.form.textview.value
    if(exp){
        document.form.textview.value = eval(exp)
    }
}
function clean(){
    document.form.textview.value = ""
 
}
function back(){
    var exp = document.form.textview.value
    document.form.textview.value = exp.substring(0,exp.length-1)
}

After pasting the code into your file save the file as script.js. This file is the main file or logic of your calculator. If you don’t paste this file then you can able to run your calculator on your browser but you cannot perform any operations like addition, subtraction, Multiplication or Division on your calculator.

After performing the above three steps, double click on the Calculator.html file, then you can see your calculator is running on your browser.

Related Posts

2 comments

Ankit Kumar December 22, 2019 - 12:39 PM

Great article dear. Additionally, if you would have shown the output, then it would be perfect.

Reply
Mister misery 1901 https://www.google.com/ 8152508 July 15, 2020 - 5:57 PM

Mister misery 1901 https://www.google.com/

Reply

Leave a Comment