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

Friday, July 24, 2015

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.

Sunday, July 5, 2015

Image comes on top- using css pseudo class hover

In this code the css pseudo class hover is applied to image using its id.

Here is the code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<style>
img {z-index:0;}
#img1{position: absolute;top:0px;left:0px;}
#img2{position: absolute;top:20px;left:20px;}
#img3{position: absolute;top:40px;left:40px;}
#img1:hover {
    z-index:3;
}
#img2:hover {
    z-index:3;
}
#img3:hover {
    z-index:3;
}
</style>
</head>
<body>
<img id="img1" src="w3css.gif" width="100" height="140" />
<img id="img2" class="imgc2" src="300x300_72.gif" width="100" height="140"/>
<img id="img3" class="imgc3" src="index.jpg" width="100" height="140"/>

<a href="http://www.w3schools.com" class="links">w3schools.com</a>
<a href="http://www.wikipedia.org" clas="links">wikipedia.org</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If you copy this code into a html file and open in browser you will observe that the images come on top when mouse hovers over them. I just didn't have the motivation to study this subject and thought that posting whatever i am working on will be a motivation for me to carry forward the work. I don't like to work alone.

Image comes on top setting z-index - using javascript only

These are three images whose z-index is set using javascript. Z-index determines the depth of the image. All text and images by default have z-index of 0. If you set z-index of -1 for an image and its position property to absolute you can make it a background image.

Here is the code:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<style>

div.img:hover img
{display:block;
z-index:3}
div imgc2 :hover img
{display:block;
z-index:3}
div imgc3 :hover img
{display:block;
z-index:3}
#img1 {
    position: absolute;
    left: 0px;
    top: 0px;

}
#img2 {
    position: absolute;
    left: 20px;
    top: 20px;

}
#img3 {
    position: absolute;
    left: 40px;
    top: 40px;

}
</style>
<script type="text/javascript">
function button1()
{
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var img3=document.getElementById("img3");
var para1=document.getElementById("para");
para1.style.fontSize="20px";
img1.style.zIndex=3;
img2.style.zIndex=2;
img3.style.zIndex=1;
}
function button2()
{
var img11=document.getElementById("img1");
var img22=document.getElementById("img2");
var img33=document.getElementById("img3");

img11.style.zIndex=2;
img22.style.zIndex=3;
img33.style.zIndex=1;

}
function button3()
{
var img11=document.getElementById("img1");
var img22=document.getElementById("img2");
var img33=document.getElementById("img3");

img11.style.zIndex=1;
img22.style.zIndex=2;
img33.style.zIndex=3;

}
</script>
</head>
<body>
<h1>This is a heading</h1>
<div class="img"><img id="img1" class="imgc1" src="w3css.gif" width="100" height="140">
<img id="img2" class="imgc2" src="300x300_72.gif" width="100" height="140">
<img id="img3" class="imgc3" src="index.jpg" width="100" height="140"></div>
<p id="para">Because the image has a z-index of -1, it will be placed behind the text.</p>
<br /><br /><br /><br /><br /><br />
<input type="button" id="button1" value="3,2,1" onclick="button1()"/>
<input type="button" id="button2" value="2,3,1" onclick="button2()"/>
<input type="button" id="button3" value="1,2,3" onclick="button3()"/>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here button1, button2 and button2 are three javascript functions which set the z-index using the DOM function getElementById().