My Code Xploits : These are my short trips into the programming world: 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().

Saturday, March 7, 2015

Hiccups in the attendance module

Nearly 90% of the software projects fail. This is something given and our project was not an exception.
With hiccups in the attendance module becoming more and more our effort is turning into another also ran. The problem is that as requirements increase the resources employed on the project also needs to increase. The problems we sorted out recently were:

(snapshots would do a world of good here and i will include them to make these problems a little easy to comprehend)

1) In attendance entry there is provision to enter attendance for today, previous days and alternate classes. The attendance entered for a period gets knocked out if someone enters attendance for some other subject at that period. We knew this problem existed as we had exposure to a software called E-Vidya from trizile technologies in the years before we conceived our project.

2) In attendance entry when we click on multi-select modal box if attendance was already entered for that period it should show unchecked for the absentees which it was not doing. Now we made it do that.

3) In alternate/previous classes if the list of students is multiple then every submit returns the control to the same form. The list of students is replaced with that days(present days) students list after one submit. So the process of entering date for alternate/previous classes has to be repeated all over again. The problem has been solved for previous classes. We feel it need not be solved for alternate classes as it does not pose such a big menace.

4) There are some issues with some faculties(advancing age/macular degeneration) unwilling to enter attendance themselves and have given their work/shared their credentials with other faculties.

5) One faculty has left our institution and his id is being used to enter attendance by a faculty who is now handling that subject. There should be a procedure for transferring the subject from one faculty to another in case the first one leaves.

6) There are some problems with selecting date in the attendance entry for previous and alternate classes. The problems were with z-index of the calendar popup which has been solved.

7) Timetable kept on changing in the first few days of the semester and there are problems now that we need to modify attendance of some students on those days when the timetable was different.

8) We need a provision to enter attendance of students during the internals. So that messages can be sent to parents about their absence in the exams. The problem was postponed by agreeing to enter attendance for that subject which had tests just like ordinary days. Absentees would be taken from those days and sms'es sent and later attendance on those days would be deleted.

9) Entering attendance for labs was kept pending. It caused problem because section code allotted to each section did not have sub-fields to store lab batch info.

10) There were some problems for faculties of second semester who could not enter internal marks for certain subjects. Probably the subject code-faculty mapping was faulty. It was set right immediately.

11) Some faculties were allotted extra classes for lab instruction/tutorial/remedial classes which were to be given slots in the timetable and it is not clear yet how the attendance register would be updated for such classes.

12) The sms service provider changed the web interface between march10th and march 15th and the change was not intimated to us in advance. We could not send sms'es on those days. Even the API url was changed. Now there is separate login for api and web interface.

Tuesday, February 10, 2015

Automation at CEC - The Progress

Its a long time since my post in this blog. Lot of things have happened since. Our college is now using the ERP package. We encountered several hurdles most of them being our limited knowledge. It gave us a learning opportunity and we overcame many of them.

We have decided to give out the source code of our project to the open source community but with licenses such as the MIT license. Our project needs to be refurbished and made secure. They are a set of nearly 100-200 php scripts with a total of 20,000 lines of code approx.

Nearly 800 students have created profiles in our site, still 600 to go. All faculty members have been registered. They are entering daily attendance into the database.
Facilities in the package include:
1) We have a provision of entering time-table in a form. Generating individual time tables etc.
2) We have provision for sending transactional SMS daily to parents for which we are collecting mobile numbers of parents through the profile page.
3) We have given login ids to students using which they can view their attendance anytime.

We are also in the process of fine tuning the software and making it free of the glitches.

We will be using this site to allow students to pay exam fees online. This will be optional to start with and after two years we plan to make online payment of exam fees compulsory. Exam fee payment could be made using a payment gateway via internet/mobile/wallet.

Parents are yet to be given login IDs.