Simple Html Calculator – code program

Html Calculator – code program. This post is made to make a html calculator, which works on browser. A form is made whose name is assigned as calculator. The name attribute specifies the name of a form. Input type are included in the code for a form, which makes, ‘textfield’ and ‘button’. Every input field is specified with attribute value. The value attribute specifies the value of an <input> element. Eval() function, takes the expression and evaluates accordingly. On click’ is the event. It occurs when  the user clicks on an element. This is how the following below code is write to make html calculator.

Html Calculator
Html Calculator

Html Calculator – code program

<html>
<head>
    <title>Html calculator</title>
</head>
<body>
    <form name="calculator" >
    Solution<input type="textfield" name="ans" value="">
    <br>
    <input type="button" value="1" onClick="document.calculator.ans.value+='1'">
    <input type="button" value="2" onClick="document.calculator.ans.value+='2'">
    <input type="button" value="3" onClick="document.calculator.ans.value+='3'">
    <input type="button" value="+" onClick="document.calculator.ans.value+='+'">
    <br>
    <input type="button" value="4" onClick="document.calculator.ans.value+='4'">
    <input type="button" value="5" onClick="document.calculator.ans.value+='5'">
    <input type="button" value="6" onClick="document.calculator.ans.value+='6'">
    <input type="button" value="-" onClick="document.calculator.ans.value+='-'">
    <br>
    <input type="button" value="7" onClick="document.calculator.ans.value+='7'">
    <input type="button" value="8" onClick="document.calculator.ans.value+='8'">
    <input type="button" value="9" onClick="document.calculator.ans.value+='9'">
    <input type="button" value="*" onClick="document.calculator.ans.value+='*'">
    <br>
    <input type="button" value="0" onClick="document.calculator.ans.value+='0'">
    <input type="reset" value="Reset">
    <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
    </form>
    </body>
</html>

Output of Html Calculator – code program

Solution








15 thoughts on “Simple Html Calculator – code program”

  1. Hey Guys,
    This is my Project Calculator. More Stylish than others. You guys can check it out.

    Chamath’sCAL

    #cal-contain
    { border: 10px solid #008B8B;
    background-color:#D2B48C;
    width: 300px;
    padding: 30px;
    margin:100px;
    border-radius:50px;}

    input[type=button]
    { width:20%;
    font-size:140%;}

    input[type=digits]
    {display:block;
    font-family: sans-serif;
    width:230px;
    height:20px;
    margin:15px auto;
    text-align: center;
    border:0;
    background:#3b3535;
    color:#fff;
    padding-top:20px;
    font-size:20px;
    margin-left: 25px;
    outline: none;
    overflow: hidden;
    letter-spacing: 1px;
    position: left;
    top:10px;}

    #simplify {background-color:#F08080;}

    #equalbtn {background-color:#FF6347;}

    #numbers {background-color:#00FF7F;}

    #delete {background-color:#40E0D0;}

    #dot {background-color:#F5DEB3 ;}

    #doublezero {background-color:#87CEEB;}

    Chamath’s Cal




    <input id="simplify" type="button" value="

Leave a Reply

Your email address will not be published. Required fields are marked *