Html calculator script

- April 01, 2020

Here we can create calculator using html.
The code for calculator is given below:

<!DOCTYPE html>
<html>
    <head>
        <title>calculator</title>
        <style>
            body{
                background:skyblue;
            }
            *{
                box-sizing:border-box;
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
            }
            .wrap{
                width:350px;
                margin:auto;
                height:auto;
                background:black;
                padding:15x;
            }
            input[type=text]{
                width:90%;
                padding:10px;
                font-size:22px;
                font-weight:bold;
                margin-top:20px;
                border-radius:5px;
            }
            input[type=button]{
                width:75px;
                padding:10px;
                font-size:22px;
                font-weight:bold;
                border-radius:15px;

            }
            #del{
                width:90%;
            }
        </style>
      </head>
    <body>
        <div class="wrap">
            <form name="cal">
                <input type="text"name="display">
                <br><br>
                <input type="button"value="9" onclick="cal.display.value+='9'">

                <input type="button"value="8" onclick="cal.display.value+='8'">
                <input type="button"value="7" onclick="cal.display.value+='7'">
                <input type="button"value="+" onclick="cal.display.value+='+'">
                <br><br>
                <input type="button"value="6" onclick="cal.display.value+='6'">

                <input type="button"value="5" onclick="cal.display.value+='5'">
                <input type="button"value="4" onclick="cal.display.value+='4'">
                <input type="button"value="-" onclick="cal.display.value+='-'">
                <br><br>
                <input type="button"value="3" onclick="cal.display.value+='3'">

                <input type="button"value="2" onclick="cal.display.value+='2'">
                <input type="button"value="1" onclick="cal.display.value+='1'">
                <input type="button"value="*" onclick="cal.display.value+='*'">
                <br><br>
                <input type="button"value="0" onclick="cal.display.value+='0'">

                <input type="button"value="/" onclick="cal.display.value+='/'">
                <input type="button"value="%" onclick="cal.display.value+='%'">
                <input type="button"value="=" onclick="cal.display.value=eval(cal.display.value)">
                <br><br>
                <input type="button"value="delete" onclick="cal.display.value=''"id="del">
                </form>
        </div>
    </body>
</html>

Output:

You can also check out my previous post for the output.

By:~AA

Comments

Akash AgarwalApril 1, 2020 at 3:03 AM
This code is useful to the beginners.
ReplyDelete
Replies
Akash AgarwalApril 7, 2020 at 10:59 PM
Please share your feedback
ReplyDelete
Replies

Add comment

Search This Blog

SIMPLE HTML PROGRAM

Google clone using HTML and CSS