Tuesday, April 30, 2013

Play With Love Calculator in javaScript


Inroduction

This article describes how to play a love calculator in JavaScript. A love calculator is an application that allows you to know how compatible you and your partner are and how strong shall be the depth of love between you and your dear one.

Coding

Love_Calculator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">   
    </script>
    <style type="text/css">
        #Text1
        {
            z-index: 1;
            left: 451px;
            top: 169px;
            position: absolute;
            width: 28px;
            height: 21px;
        }
        #Text2
        {
            z-index: 1;
            left: 437px;
            top: 88px;
            position: absolute;
        }
        .style12
        {
            width: 138px;
        }
        .style13
        {
            width: 178px;
        }
        #Button1
        {
            width: 163px;
        }
        .style14
        {
            width: 184px;
        }
        #result
        {
            width: 27px;
            z-index: 1;
            left: 511px;
            top: 155px;
            position: absolute;
            height: 22px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function calculateLove()
    {
        Fname = document.getElementById('firstname').value.toUpperCase();
        FnameLength = Fname.length;
       
        Sname = document.getElementById('secondname').value.toUpperCase();
        SnameLength = Sname.length;
       
        var lovecount=0;
        for(var i=0;i<FnameLength;i++)
        {
            var L1=Fname.substring(i,i+1);
            if(L1=='A') lovecount +=3;
            if(L1=='E') lovecount +=3;
            if(L1=='I') lovecount +=3;
            if(L1=='O') lovecount +=3;
            if(L1=='U') lovecount +=4;
            if(L1=='L') lovecount +=1;        
            if(L1=='V') lovecount +=4;          
        }

            for (var count = 0; count < SnameLength; count++)
            {
               var L2 = Sname.substring(count, count + 1);
                if(L2=='A') lovecount +=3;
                if(L2=='E') lovecount +=3;
                if(L2=='I') lovecount +=3;
                if(L2=='L') lovecount +=3;
                if(L2=='O') lovecount +=4;
                if(L2=='V') lovecount +=1;        
                if(L2=='E') lovecount +=4;
            }
            var Total = 0;
            if (lovecount > 0) Total = 5 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 2) Total = 10 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 4) Total = 20 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 6) Total = 30 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 8) Total = 40 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 10) Total = 50 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 12) Total = 60 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 14) Total = 70 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 16) Total = 80 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 18) Total = 90 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 20) Total = 100 - ((FnameLength + SnameLength) / 2)
            if (lovecount > 22) Total = 110 - ((FnameLength + SnameLength) / 2)
            if (FnameLength == 0 || SnameLength == 0)
                Total = "Error";
            if (Total < 0) Total = 0;
            if (Total > 99) Total = 99;

            var txtresult = document.getElementById("result");
            txtresult.value = Math.floor(Total).toString();
            //alert("Toatal" + Math.floor(Total));
        }
        </script>
    <div style="height: 220px">
        <table style="border-style: ridge; border-color: #FF99FF; width: 33%; height: 187px;">
            <tr>
                <td class="style13">
                    &nbsp;</td>
                <td class="style12" style="color: #FF66FF; font-weight: bold">
                    Love Calculator</td>
                <td class="style14">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style13">
                <input id="firstname" type="text" /></td>
                <td class="style12">
                    <img alt="" src="l1.gif" style="height: 98px" /></td>
                <td class="style14">
                <input id="secondname" type="text" /></td>
            </tr>
            <tr>
                <td class="style13">
                    &nbsp;</td>
                <td class="style12">
                    <input id="Button1" style="color: #FF66FF; font-weight: bold;" type="button"
                        value="Calculate" onclick="calculateLove()" /></td>
                <td class="style14">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img id="img" alt="" src="love2.jpg" style="height: 60px; width: 112px" /><input id="result"
                        readonly="readonly" type="text" style="border-style: hidden" />&nbsp;</td>
            </tr>
        </table>
    </div>
</body>
</html>
  
Output 1
Enter a name in the first TextBox, as in:
 First-image.jpg

Output 2
Enter a name in the second TextBox, as in:
 second-image.jpg

Output 3
Click on the calculate button, then see the results as in the following:
 result.jpg

Thursday, April 25, 2013

How Update Record in Database Using Textbox in JavaScript



Note: This program will work only with Internet Explorer.

In this article I will explain how to update a record from database using textbox in JavaScript.

Firstly I am created a database EmpDetail. and Now I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[EmpSalary_Info](
      [id] [int] NULL,
      [name] [varchar](50) NULL,
      [salary] [int] NULL
) ON [PRIMARY]
Now Insert some Data in EmpSalary_Info table. Then use the following procedure.
Complete Program
Update_Record.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function ShowAll()
        {
            var connection = new ActiveXObject("ADODB.Connection");
            var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
            connection.Open(connectionstring);
            var rs = new ActiveXObject("ADODB.Recordset");
            rs.Open("select * from EmpSalary_Info ", connection);
            rs.MoveFirst();
            var span = document.createElement("span");
            span.style.color = "Blue";
            span.innerText = "  ID " + "  Name " + "   Salary";
            document.body.appendChild(span);
            while (!rs.eof) {
                var span = document.createElement("span");
                span.style.color = "green";
                span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);
                document.body.appendChild(span);
                rs.MoveNext();
            }
            rs.close();
            connection.close();
        }
 
        function UpdateRecord()
        {  
            var txtid = document.getElementById('txtid').value;
            var txtname = document.getElementById('txtname').value;
            if (txtid.length != 0 && txtname.length!=0) {
                var connection = new ActiveXObject("ADODB.Connection");
                var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
                connection.Open(connectionstring);
                var rs = new ActiveXObject("ADODB.Recordset");
                rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid,connection);
                alert("Update Record Successfuly");
                txtid.value = " ";
                connection.close();
            }
            else
            {
                alert("Please textbox's value");
            }
 
        }
    </script>
    <style type="text/css">
        #txtname
        {
            z-index: 1;
            left: 230px;
            top: 94px;
            position: absolute;
        }
        #txtid
        {
            z-index: 1;
            left: 230px;
            top: 54px;
            position: absolute;
        }
    </style>
</head>
<body style="height: 89px">
    <div id="show"
        style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">
       Update Employee Record<p style="font-size: medium; color: #000000;">
    Enter Employee ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="txtid" type="text" /></p>
        <p style="font-size: medium; color: #000000;">
            Update Employee Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
        <input id="txtname" type="text" /><p>
    &nbsp;<input id="ShowRecord" type="button" value="Update" onclick="UpdateRecord()"
        style="font-weight: bold" />&nbsp;
    <input id="showall" type="button" value="Show All Record" onclick="ShowAll()"
        style="font-weight: bold" /></p>
    </div>
    </body>
</html>
   
Output 1
 First-image.jpg

Click on Show All Record button
 click-on-show-button.jpg

Output 2
Enter employee id in textbox which you want to Update from database and then enter update employee name in textbox. than click on Update button
 click-on-update-button.jpg

Output 3
After Update record, you click on Show All Record button. you will see record updated successfully.
 again-click-on-show-button.jpg

Output 4
If you will click on Update button without enter any value in textbox then it will show the error.
 error-msg.jpg