My Code Xploits : These are my short trips into the programming world: Calculator using Javascript

Here is a program implementation of a simple calculator implemented by my students.
SanpShot:

Here is the Javascript Program:
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono">
    </head>
    <div id="calculator_container">
    <p id="Num_Disp"> </p>
    <p id="Ques_Disp"> </p>
    <table id="calculator_numpad">
        <tr>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("1")' >1</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("2")' >2</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("3")' >3</b></td>
          <td id="button_num" ><button id="Button_id" type="button" onclick='number("+")' >+</b></td>
<td><button id="Button_id" type="button" onclick='c("")' >c</b></td>
        </tr>
        <tr>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("4")' >4</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("5")' >5</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("6")' >6</b></td>
            <td id="button_num" ><button id="Button_id" type="button" onclick='number("-")' >-</b></td>
        </tr>
         <tr>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("7")' >7</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("8")' >8</b></td>
        <td id="button_num" ><button id="Button_id" type="button" onclick='number("9")' >9</b></td>
             <td id="button_num" ><button id="Button_id" type="button" onclick='number("*")' >*</b></td>
        </tr>
            <tr>
        <td id="button_num" ><button id="Button_id" type="button" onclick="number(0)" >0</b></td>
                <td id="button_num" ><button id="Button_id" type="button" onclick='number(".")' > . </b></td>
                <td id="button_num" ><button id="Button_id" type="button" onclick='e()' >=</b></td>
                <td id="button_num" ><button id="Button_id" type="button" onclick='number("/")' >/ </b></td>

        </tr>
    </table>

    </div>

    <script>
        function c(val)
        {
document.getElementById("Num_Disp").textContent=val;
        }
        function number(a)
        {
            document.getElementById("Num_Disp").textContent+=a;
        }

        function e()
        {

            try
            {

                c(eval(document.getElementById("Num_Disp").textContent));

            }
catch(e)
{
c('Error')
}
}
    </script>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style.css

#calculator_container{
    width: 350;
    height: 400;
    box-shadow: 2px 2px 2px 2px #eee
}
#Num_Disp{
    width: 300;
    height: 65;
}
#calculator_numpad
{
     border-spacing: 0;
    border-collapse: collapse;
}
th, td {
    padding: 0;
}
#Num_Disp
{
    font-family: "Droid Sans Mono";
    font-size: 30;

    text-align:right;
}

#Button_id {
    -moz-box-shadow:inset 0px -1px 0px 0px #857c79;
    -webkit-box-shadow:inset 0px -1px 0px 0px #857c79;

    background-color: #857c79;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:3px;
    cursor:pointer;
    color:#ffffff;
    font-family: "Droid Sans Mono";
    font-size:15px;
    padding:25px 25px;
    text-decoration:inherit;
    text-shadow:0px 1px 0px #857c79;

   }
#Button_id:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #304645), color-stop(1, #304645));
    background:-moz-linear-gradient(top, #304645 5%, #304645 100%);
    background:-webkit-linear-gradient(top, #304645 5%, #304645 100%);
    background:-o-linear-gradient(top, #304645 5%, #304645 100%);
    background:linear-gradient(to bottom, #304645 5%, #304645 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#304645', endColorstr='#304645',GradientType=0);
    background-color:#304645;
}
#Button_id:active {
    position:relative;
    top:1px;
}

Hope to update the post to include comments or explanation.

My Code Xploits : These are my short trips into the programming world

Pages

Friday, July 24, 2015

Calculator using Javascript

No comments:

Post a Comment