Maaz88 Maaz88 - 4 months ago 36
HTML Question

Making a simple calculator in html

The problem is that I want the operation to be performed in a single input box as it usually is in calculators. The first value is stored in a variable then the operator button is pressed for the second value to be entered , the equal button has to perform the operation with the second value but I am unable to get the calculated answer it simply does not add it to the second value.

<tr>
<td><input type=button value="+" OnClick="num1=calc.display.value;calc.display.value=' ';"></td>
<td><input type=button value="C" OnClick="calc.display.value='0'"></td>
</tr>
<tr>
<td><input type=button value="=" OnClick="calc.display.value=calc.display.value+num1"></td>
</tr>

Answer

Here is the complete calculator. Hope it will help.

function c(val)
    {
    document.getElementById("d").value=val;
    }
    function v(val)
    {
    document.getElementById("d").value+=val;
    }
    function e() 
    { 
    try 
    { 
      c(eval(document.getElementById("d").value)) 
    } 
    catch(e) 
    {
      c('Error') 
    } 
    }  
    body
    {
    background-color:tan;
    } 
    .box
    {
    background-color:#3d4543;
    height:300px;
    width:250px;
    border-radius:10px;
    position:relative;
    top:80px;
    left:40%;
    } 
    .keys
    {
    position:relative;
    top:15px;
    }
    .button
    {
    width:40px;
    height:30px;
    border:none;
    border-radius:8px;
    margin-left:17px;
    cursor:pointer;
    border-top:2px solid transparent;
    }
    .button.gray
    {
    color:white;
    background-color:#6f6f6f;
    border-bottom:black 2px solid;
    border-top:2px #6f6f6f solid;
    }
    .button.pink
    {
    color:black;
    background-color:#ff4561;
    border-bottom:black 2px solid;
    }
    .button.black
    {
    color:white;
    background-color:303030;
    border-bottom:black 2px solid;
    border-top:2px 303030 solid;
    }
    .button.orange
    {
    color:black;
    background-color:FF9933;
    border-bottom:black 2px solid;
    border-top:2px FF9933 solid;
    }
    .gray:active
    {
    border-top:black 2px solid;
    border-bottom:2px #6f6f6f solid;
    }
    .pink:active
    {
    border-top:black 2px solid;
    border-bottom:#ff4561 2px solid;
    }
    .black:active
    {
    border-top:black 2px solid;
    border-bottom:#303030 2px solid;
    }
    .orange:active
    {
    border-top:black 2px solid;
    border-bottom:FF9933 2px solid;
    }
    p
    {
    line-height:10px;
    }
<html>
  <body>
    <div class="box">
    <div class="display"><input type="text" readonly size="18" id="d"></div>
    <div class="keys">
        <p><input type="button" class="button gray" 
        value="mrc" onclick='c("Created....................")'>
        <input type="button" class="button gray" 
        value="m-" onclick='c("...............by............")'>
        <input type="button" class="button gray" value="
        m+" onclick='c("....Pirate")'>
        <input type="button" class="button pink" 
        value="/" onclick='v("/")'></p>
        <p><input type="button" class="button black" 
        value="7" onclick='v("7")'><input type="button" 
        class="button black" value="8" onclick='v("8")'>
        <input type="button" class="button black" value="9" 
        onclick='v("9")'><input type="button" 
        class="button pink" value="*" onclick='v("*")'></p>
        <p><input type="button" class="button black" 
        value="4" onclick='v("4")'><input type="button" 
        class="button black" value="5" onclick='v("5")'>
        <input type="button" class="button black" value="6" 
        onclick='v("6")'><input type="button" 
        class="button pink" value="-" onclick='v("-")'></p>
        <p><input type="button" class="button black" 
        value="1" onclick='v("1")'><input type="button" 
        class="button black" value="2" onclick='v("2")'>
        <input type="button" class="button black" value="3" 
        onclick='v("3")'><input type="button" 
        class="button pink" value="+" onclick='v("+")'></p>
        <p><input type="button" class="button black" 
        value="0" onclick='v("0")'><input type="button" 
        class="button black" value="." onclick='v(".")'>
        <input type="button" class="button black" value="C" 
        onclick='c("")'><input type="button" 
        class="button orange" value="=" onclick='e()'></p>
    </div>
    </div>

</body>
  </html>

Source : http://www.codeproject.com/Tips/631525/Creating-Calculator-using-HTML-CSS-and-JavaScript

Thanks Hope it will help.