[Solved] Making a simple calculator in html

by


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="https://stackoverflow.com/" onclick='v("https://stackoverflow.com/")'></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.

1

solved Making a simple calculator in html