Age Program

Counting Program's

Leap-Year Program

Distance Program

Even Odd Program

Prime Number Program

Weekly Pay Program

Do while loop Table

While loop Table

For loop Table

Counting Randomly

<h1>
Counting Program</h1>
<br />
<table id="table1" border="1">
<tr>
<td>First Series</td></tr>
<tr><td>
<script>
var num;
for(num=1;num<=10;num++)
{
 document.write(num,"<br>");
}</script></td></tr>
</table>

<table id="table2" border="1">
<tr><td>Reverse Series</td></tr>
<tr><td>
<script>
for(num=100;num>=80;num--)
{
 document.write(num,'<br>'); 
}</script></td></tr>
</table>

<table id="table3" border="1">
<tr><td>Even Series</td></tr>
<tr><td>
<script>
for(num=2;num<=50;num++)
{
 if(num%2==0)
 {
 document.write(num,'<br>'); 
 }}
</script>
</td></tr>
</table>

<table id="table4" border="1">
<tr><td>Odd Series</td></tr>
<tr><td>
<script>
for(num=0;num<=60;num++)
{
 if(num%2==1)
 {
  
 document.write(num,'<br>'); 
 }}
</script>
</td></tr>
</table>
  
body,html{background-color:#CCC;}
#table1
{
 text-align:center; background-color:#000; color:#FFFFFF; text-shadow: 2px 4px 6px #FFFFFF; box-sizing:border-box; 
}
#table2
{
 margin-left:1in;
 margin-top:-2.35in;
 text-align:center; background-color:#000; color:#FFFFFF; text-shadow: 2px 4px 6px #FFFFFF;
}
#table3
{
 margin-left:2.3in;
 margin-top:-4.45in;
 text-align:center; background-color:#000; color:#FFFFFF; text-shadow: 2px 4px 6px #FFFFFF; 
}

#table4
{
 margin-left:3.4in;
 margin-top:-5.30in;
 text-align:center; background-color:#000; color:#FFFFFF; text-shadow: 2px 4px 6px #FFFFFF;
}

Vovels & Consunant

Call Service

Color Changer

Simple Marks

Marksheet Without loop

Marksheet With loop

Chess Board

Star Design Loop

Selected Table Row Data Into TextBoxes

<!DOCTYPE html>
<html>
    <head>
        <title>Display Selected HTML Table TR Values In Input Text</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
        </style>
        
    </head>
    <body>
       
        First Name:<input type="text" name="fname" id="fname"><br><br>
        Last Name:<input type="text" name="lname" id="lname"><br><br>
        Age:<input type="text" name="age" id="age"><br><br>
        
        <table id="table" border="1">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            
            <tr>
                <td>FN1</td>
                <td>LN1</td>
                <td>10</td>
            </tr>
            
            <tr>
                <td>FN2</td>
                <td>LN2</td>
                <td>20</td>
            </tr>
            
            <tr>
                <td>FN3</td>
                <td>LN3</td>
                <td>30</td>
            </tr>
            
            <tr>
                <td>FN4</td>
                <td>LN4</td>
                <td>40</td>
            </tr>
            
            <tr>
                <td>FN5</td>
                <td>LN5</td>
                <td>50</td>
            </tr>
        </table>
        
        <script>
    
                var table = document.getElementById('table');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("fname").value = this.cells[0].innerHTML;
                         document.getElementById("lname").value = this.cells[1].innerHTML;
                         document.getElementById("age").value = this.cells[2].innerHTML;
                    };
                }
    
         </script>
        
    </body>
</html>

Live Add Edit Delete Record In Table

<!DOCTYPE html>
<html>
    <head>
        <title>Add Edit Remove HTML Table Row</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{overflow: hidden}
            .tab{float: left;}
            .tab-2{margin-left: 50px}
            .tab-2 input{display: block;margin-bottom: 10px}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color:#EEE;cursor: pointer}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="tab tab-1">
                <table id="table" border="1">
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                    </tr>
                    <tr>
                        <td>A1</td>
                        <td>B1</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>A3</td>
                        <td>B3</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td>A2</td>
                        <td>B2</td>
                        <td>20</td>
                    </tr>
                </table>
            </div>
            <div class="tab tab-2">
                First Name :<input type="text" name="fname" id="fname">
                Last Name :<input type="text" name="lname" id="lname">
                Age :<input type="number" name="age" id="age">
                
                <button onclick="addHtmlTableRow();">Add</button>
                <button onclick="editHtmlTbleSelectedRow();">Edit</button>
                <button onclick="removeSelectedRow();">Remove</button>
            </div>
        </div>
        
        <script>
            
            var rIndex,
                table = document.getElementById("table");
            
            // check the empty input
            function checkEmptyInput()
            {
                var isEmpty = false,
                    fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
            
                if(fname === ""){
                    alert("First Name Connot Be Empty");
                    isEmpty = true;
                }
                else if(lname === ""){
                    alert("Last Name Connot Be Empty");
                    isEmpty = true;
                }
                else if(age === ""){
                    alert("Age Connot Be Empty");
                    isEmpty = true;
                }
                return isEmpty;
            }
            
            // add Row
            function addHtmlTableRow()
            {
                // get the table by id
                // create a new row and cells
                // get value from input text
                // set the values into row cell's
                if(!checkEmptyInput()){
                var newRow = table.insertRow(table.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
                    fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
            
                cell1.innerHTML = fname;
                cell2.innerHTML = lname;
                cell3.innerHTML = age;
                // call the function to set the event to the new row
                selectedRowToInput();
            }
            }
            
            // display selected row data into input text
            function selectedRowToInput()
            {
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                      // get the seected row index
                      rIndex = this.rowIndex;
                      document.getElementById("fname").value = this.cells[0].innerHTML;
                      document.getElementById("lname").value = this.cells[1].innerHTML;
                      document.getElementById("age").value = this.cells[2].innerHTML;
                    };
                }
            }
            selectedRowToInput();
            
            function editHtmlTbleSelectedRow()
            {
                var fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
               if(!checkEmptyInput()){
                table.rows[rIndex].cells[0].innerHTML = fname;
                table.rows[rIndex].cells[1].innerHTML = lname;
                table.rows[rIndex].cells[2].innerHTML = age;
              }
            }
            
            function removeSelectedRow()
            {
                table.deleteRow(rIndex);
                // clear input text
                document.getElementById("fname").value = "";
                document.getElementById("lname").value = "";
                document.getElementById("age").value = "";
            }
        </script>
        
    </body>
</html>

Exam Quiz Test

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

.buttons001 {
            background-color: blue;
            color: white;
            padding: 5px;
            margin: 10px;
            border-radius: 10px;
   box-shadow:#000 2px 4px 6px;
            width: 145px;
        }

.buttons002 {
            background-color: #000;
   box-shadow:#CCC 2px 4px 6px;
            color: white;
            padding: 5px;
            margin: 10px;
            border-radius: 10px;
            width: 140px;
        }

#text001 {
            text-align: center;
        }

#text002 {
            text-align: left;
        }

#green001 {
            color: green;
        }

#red001 {
            color: red;
        }
    </style>

<header align="center" style="font-size:45px">Online Exam 2K18</header>

<h2 style="color:#000;">Student Name     <?php echo $_GET['name']?></h2>

<h2 style="color:#000;">Marks Target     <?php echo $_GET['teg']?></h2>

</div>

<div id="frame001">
        <div id="text001">
            
            <h4>Test : <?php echo $_GET['test']?></h4>
            Question: <text id="number001">0</text><br />
            Total Marks: <text>82</text><br />
            Marks: <text id="score001">0</text>
        <hr />
                <div id="message001">Click Begin to start</div><br />
            </div>
        <div id="text002">
            <div id="question001"></div>
            <div id="option001"></div>
            <div id="option002"></div>
            <div id="option003"></div>
            <div id="option004"></div>
            <div id="answer001"></div>
            <div id="text001">
                <div id="disappear001"><button class="buttons001" onclick="begin001()">Begin</button></div>
            </div>
            <div id="next001"></div>
        </div>
        </div>

<h2 style="color:#000;">Total Marks     82</h2>

<h2 style="color:#000;">Obtained Marks     </h2>

<h2 style="color:#000;"> Grade     </h2> <br />

</div>

</center>

"<button class=buttons002 onclick=q2c()>hyper text markup language</button>",

"<button class=buttons002 onclick=q3c()>personal home page</button>",

"<button class=buttons002 onclick=q4i()>Pakistan cola</button>",
                  "<button class=buttons002 onclick=q5i()>Love's good</button>",
                  "<button class=buttons002 onclick=q6i()>Hyper text character</button>",

"<button class=buttons002 onclick=q7i()>??</button>",

"<button class=buttons002 onclick=q8i()>X markup language</button>",

"<button class=buttons002 onclick=q9i()>8</button>",

"<button class=buttons002 onclick=q10i()>14</button>"];

var a2 = ["<button class=buttons002 onclick=q1i()>Adil</button>",

"<button class=buttons002 onclick=q2i()>High tech mix language</button>",

"<button class=buttons002 onclick=q3i()>Pappu hens power?</button>",

"<button class=buttons002 onclick=q4c()>personal computer</button>",

"<button class=buttons002 onclick=q5c()>life's good</button>",

"<button class=buttons002 onclick=q6c()>High Tech Computer</button>",

"<button class=buttons002 onclick=q7i()>coating styling style</button>",

"<button class=buttons002 onclick=q8i()>??</button>",
                  "<button class=buttons002 onclick=q9i()>17</button>",
                  "<button class=buttons002 onclick=q10i()>12</button>"];

var a3 = ["<button class=buttons002 onclick=q1i()>Saad</button>",

"<button class=buttons002 onclick=q2i()>Hyper tags markup language</button>",
                  
      "<button class=buttons002 onclick=q3i()>I dont know?</button>",
                  "<button class=buttons002 onclick=q4i()>Person computer</button>",
                  "<button class=buttons002 onclick=q5i()>none?</button>",
                  "<button class=buttons002 onclick=q6i()>Hi tech computer</button>",

"<button class=buttons002 onclick=q7c()>cascading style sheet</button>",

"<button class=buttons002 onclick=q8c()>xtensible markup language</button>",
                  
      
      "<button class=buttons002 onclick=q9i()>2</button>",
                  "<button class=buttons002 onclick=q10i()>9</button>"];

var a4 = ["<button class=buttons002 onclick=q1i()>Ashir</button>",

"<button class=buttons002 onclick=q2i()>none?</button>",
                  "<button class=buttons002 onclick=q3i()>none?</button>",
                  "<button class=buttons002 onclick=q4i()>Pappu chola chat</button>",
                  "<button class=buttons002 onclick=q5i()>Latest graphics</button>",
                  "<button class=buttons002 onclick=q6i()>heightech computer</button>",
                  "<button class=buttons002 onclick=q7i()>cast super sheet</button>",

"<button class=buttons002 onclick=q8i()>X istensible markup language</button>",

"<button class=buttons002 onclick=q9c()>16</button>",
"<button class=buttons002 onclick=q10c()>18</button>"];

var c = ["Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct"];
  
  
        var i = ["Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect"];

var n = 0;
        n++;
        var s=0;
        s=0;

function begin001() {
            disappear001.innerHTML = "";
            message001.innerHTML = "";
            question001.innerHTML = q[0];
            option001.innerHTML = a1[0];
            option002.innerHTML = a2[0];
            option003.innerHTML = a3[0];
            option004.innerHTML = a4[0];
            number001.innerHTML = n++;
        }

function q1c() {
            answer001.innerHTML = "<div id=green001>" + c[0] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new002()>Next</button>";
            score001.innerHTML = s+=2;
        }

function q1i() {
            answer001.innerHTML = "<div id=red001>" + i[0] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new002()>Next</button>";
        }

function new002() {
            question001.innerHTML = q[1];
            option001.innerHTML = a1[1];
            option002.innerHTML = a2[1];
            option003.innerHTML = a3[1];
            option004.innerHTML = a4[1];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q2c() {
            answer001.innerHTML = "<div id=green001>" + c[1] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new003()>Next</button>";
            score001.innerHTML = s+=10;
        }

function q2i() {
            answer001.innerHTML = "<div id=red001>" + i[1] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new003()>Next</button>";
        }

function new003() {
            question001.innerHTML = q[2];
            option001.innerHTML = a1[2];
            option002.innerHTML = a2[2];
            option003.innerHTML = a3[2];
            option004.innerHTML = a4[2];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q3c() {
            answer001.innerHTML = "<div id=green001>" + c[2] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new004()>Next</button>";
            score001.innerHTML = s+=10;
        }

function q3i() {
            answer001.innerHTML = "<div id=red001>" + i[2] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new004()>Next</button>";
        }

function new004() {
            question001.innerHTML = q[3];
            option001.innerHTML = a1[3];
            option002.innerHTML = a2[3];
            option003.innerHTML = a3[3];
            option004.innerHTML = a4[3];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q4c() {
            answer001.innerHTML = "<div id=green001>" + c[3] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new005()>Next</button>";
            score001.innerHTML = s+=15;
        }

function q4i() {
            answer001.innerHTML = "<div id=red001>" + i[3] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new005()>Next</button>";
        }

function new005() {
            question001.innerHTML = q[4];
            option001.innerHTML = a1[4];
            option002.innerHTML = a2[4];
            option003.innerHTML = a3[4];
            option004.innerHTML = a4[4];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q5c() {
            answer001.innerHTML = "<div id=green001>" + c[4] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new006()>Next</button>";
            score001.innerHTML = s+=10;
        }

function q5i() {
            answer001.innerHTML = "<div id=red001>" + i[4] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new006()>Next</button>";
        }

function new006() {
            question001.innerHTML = q[5];
            option001.innerHTML = a1[5];
            option002.innerHTML = a2[5];
            option003.innerHTML = a3[5];
            option004.innerHTML = a4[5];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q6c() {
            answer001.innerHTML = "<div id=green001>" + c[5] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new007()>Next</button>";
            score001.innerHTML = s+=5;
        }

function q6i() {
            answer001.innerHTML = "<div id=red001>" + i[5] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new007()>Next</button>";
        }

function new007() {
            question001.innerHTML = q[6];
            option001.innerHTML = a1[6];
            option002.innerHTML = a2[6];
            option003.innerHTML = a3[6];
            option004.innerHTML = a4[6];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q7c() {
            answer001.innerHTML = "<div id=green001>" + c[6] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new008()>Next</button>";
            score001.innerHTML = s+=10;
        }

function q7i() {
            answer001.innerHTML = "<div id=red001>" + i[6] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new008()>Next</button>";
        }

function new008() {
            question001.innerHTML = q[7];
            option001.innerHTML = a1[7];
            option002.innerHTML = a2[7];
            option003.innerHTML = a3[7];
            option004.innerHTML = a4[7];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q8c() {
            answer001.innerHTML = "<div id=green001>" + c[7] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new009()>Next</button>";
            score001.innerHTML = s+=10;
        }

function q8i() {
            answer001.innerHTML = "<div id=red001>" + i[7] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new009()>Next</button>";
        }

function new009() {
            question001.innerHTML = q[8];
            option001.innerHTML = a1[8];
            option002.innerHTML = a2[8];
            option003.innerHTML = a3[8];
            option004.innerHTML = a4[8];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q9c() {
            answer001.innerHTML = "<div id=green001>" + c[8] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new010()>Next</button>";
            score001.innerHTML = s+=5;
        }

function q9i() {
            answer001.innerHTML = "<div id=red001>" + i[8] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=new010()>Next</button>";
        }

function new010() {
            question001.innerHTML = q[9];
            option001.innerHTML = a1[9];
            option002.innerHTML = a2[9];
            option003.innerHTML = a3[9];
            option004.innerHTML = a4[9];
            next001.innerHTML = "";
            answer001.innerHTML = "";
            number001.innerHTML = n++;
        }

function q10c() {
            answer001.innerHTML = "<div id=green001>" + c[9] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=end001()>End of Quiz</button>";
            score001.innerHTML = s+=5;
        }

function q10i() {
            answer001.innerHTML = "<div id=red001>" + i[9] + "</div>";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<button class=buttons001 onclick=end001()>End of Quiz</button>";
        }

function end001() {
            
   message001.innerHTML = "End of Quiz.";
   question001.innerHTML = "";
            option001.innerHTML = "";
            option002.innerHTML = "";
            option003.innerHTML = "";
            option004.innerHTML = "";
            next001.innerHTML = "<div id=text001>" + "<button class=buttons001 onclick=repeat001()>Repeat</button>" + "</div>";
            answer001.innerHTML = "";
   
   
   
        }

function repeat001() {
            location.reload();

}
    </script>

</body>
</html>

Square & Square-root

Object Program

All Convertors

<div align="center">
<table border="2"><th colspan="2">Temperature-Converter</th>
<tr></tr>
<td><label>Celsius</label><input class="lb" id="inputCelsius" placeholder="Celsius" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
Fahrenheit: <span id="outputFahrenheit"></span></td></table>
<br /><br />

<table border="2">
<th colspan="2">Weight-Converter</th>
<tr></tr>
<td>
<label>K.G</label>
<input class="lb" id="inputKilograms" placeholder="Kilograms" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
G.M: <span id="outputGrams"></span></td></table>
<br /><br />

<table border="2">
<th colspan="2">Speed-Converter</th>
<tr></tr>
<td>
<label>Kph</label>
<input class="lb" id="inputKPH" placeholder="K-m" oninput="speedConverter(this.value)" onchange="speedConverter(this.value)">

Mph: <span id="outputMPH"></span></td>
</table>
<br /><br />
<table border="2" id="lovecalc">
<th colspan="2">Love-Converter</th>
<tr></tr>
<td align="center"><input class="lb" type="text" placeholder="person 1 name" name="cnameone" size="25" id="cnameone"></td>
<tr></tr>
<td align="center"><input class="lb" type="text" placeholder="person 2 name" name="cnametwo" size="25" id="cnametwo"></td>
<tr></tr>
<td align="center" colspan="3"><input class="lb" type="button"  value="Convert" onclick="calc()">
<div id="coutput">
</div>
</td>

</table>
<br /><br />

<form name="convert">
<table border="2">
<th colspan="2">Length-Converter</th>
<tr><th>Unit</th><th>Number</th></tr>
<tr>
 <td>
<select name="unit">
<option value="CM">Centimetre
<option value="M">Metre
<option value="KM">Kilometre
<option value="IN">Inch
<option value="FT">Foot
<option value="YD">Yard
<option value="MI">Mile
</select>
 </td>
 <td>
<input class="lb" type="text" name="InUnit" size="20" maxlength="20" value="0">
 </td>
 </tr>
<tr>
 <td>
Centimetre:   </td>
 <td>
<input class="lb" type="text" name="cm" size="20" maxlength="20" value="0" onFocus="nofocus()">
 </td>
 </tr>
<tr>
 <td>
Metre:
</td>
<td>
<input class="lb" type="text" name="m" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Kilometre:   </td>
<td>
<input class="lb" type="text" name="km" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Inch:   </td>
<td>
<input class="lb" type="text" name="inch" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Foot:   </td>
<td>
<input class="lb" type="text" name="ft" size="20" maxlength="20" value="0" onFocus="nofocus()">  </td>
</tr>
<tr>
<td>
Yard:   </td>
<td>
<input class="lb" type="text" name="yd" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Mile:   </td>
<td>
<input class="lb" type="text" name="mi" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td align="center">
<input class="lb" type="Reset" value="Reset">
</td>
<td align="center">
<input class="lb" type="button" value="Convert" onClick="toCM()">
</td>
</tr>
</table>
</form>
<br /><br />
<body>

<table border="2">
<tr></tr>
<th>Color-Picker</th>
<tr></tr>
<form>
<td>
<input class="lb" type="text" name="color" size=18></td>
<tr></tr>
<td><select class="lb" name=pco onChange="document.bgColor=(this.form.pco.value)">

<option value=aliceblue>aliceblue</option>
<option value=antiquewhite>antiquewhite</option>
<option value=aqua>aqua</option>
<option value=aquamarine>aquamarine</option>
<option value=azure>azure</option>
<option value=beige>beige</option>
<option value=bisque>bisque</option>
<option value=black>black</option>
<option value=blanchedalmond>blanchedalmond</option>
<option value=blue>blue</option>
<option value=blueviolet>blueviolet</option>
<option value=brown>brown</option>
<option value=burlywood>burlywood</option>
<option value=cadetblue>cadetblue</option>
<option value=chartreuse>chartreuse</option>
<option value=chocolate>chocolate</option>
<option value=coral>coral</option>
<option value=cornflowerblue>cornflowerblue</option>
<option value=cornsilk>cornsilk</option>
<option value=crimson>crimson</option>
<option value=cyan>cyan</option>
<option value=darkblue>darkblue</option>
<option value=darkcyan>darkcyan</option>
<option value=darkgoldenrod>darkgoldenrod</option>
<option value=darkgray>darkgray</option>
<option value=darkgreen>darkgreen</option>
<option value=darkkhaki>darkkhaki</option>
<option value=darkmagenta>darkmagenta</option>
<option value=darkolivegreen>darkolivegreen</option>
<option value=darkorange>darkorange</option>
<option value=darkorchid>darkorchid</option>
<option value=darkred>darkred</option>
<option value=darksalmon>darksalmon</option>
<option value=darkseagreen>darkseagreen</option>
<option value=darkslateblue>darkslateblue</option>
<option value=darkslategray>darkslategray</option>
<option value=darkturquoise>darkturquoise</option>
<option value=darkviolet>darkviolet</option>
<option value=deeppink>deeppink</option>
<option value=deepskyblue>deepskyblue</option>
<option value=dimgray>dimgray</option>
<option value=dodgerblue>dodgerblue</option>
<option value=firebrick>firebrick</option>
<option value=floralwhite>floralwhite</option>
<option value=forestgreen>forestgreen</option>
<option value=fuchsia>fuchsia</option>
<option value=gainsboro>gainsboro</option>
<option value=ghostwhite>ghostwhite</option>
<option value=gold>gold</option>
<option value=goldenrod>goldenrod</option>
<option value=gray>gray</option>
<option value=green>green</option>
<option value=greenyellow>greenyellow</option>
<option value=honeydew>honeydew</option>
<option value=hotpink>hotpink</option>
<option value=indianred>indianred</option>
<option value=indigo>indigo</option>
<option value=ivory>ivory</option>
<option value=khaki>khaki</option>
<option value=lavender>lavender</option>
<option value=lavenderblush>lavenderblush</option>
<option value=lawngreen>lawngreen</option>
<option value=lemonchiffon>lemonchiffon</option>
<option value=lightblue>lightblue</option>
<option value=lightcoral>lightcoral</option>
<option value=lightcyan>lightcyan</option>
<option value=lightgoldenrodyellow>lightgoldenrodyellow</option>
<option value=lightgreen>lightgreen</option>
<option value=lightgrey>lightgrey</option>
<option value=lightpink>lightpink</option>
<option value=lightsalmon>lightsalmon</option>
<option value=lightseagreen>lightseagreen</option>
<option value=lightskyblue>lightskyblue</option>
<option value=lightslategray>lightslategray</option>
<option value=lightsteelblue>lightsteelblue</option>
<option value=lightyellow>lightyellow</option>
<option value=lime>lime</option>
<option value=limegreen>limegreen</option>
<option value=linen>linen</option>
<option value=magenta>magenta</option>
<option value=maroon>maroon</option>
<option value=mediumaquamarine>mediumaquamarine</option>
<option value=mediumblue>mediumblue</option>
<option value=mediumorchid>mediumorchid</option>
<option value=mediumpurple>mediumpurple</option>
<option value=mediumseagreen>mediumseagreen</option>
<option value=mediumslateblue>mediumslateblue</option>
<option value=mediumspringgreen>mediumspringgreen</option>
<option value=mediumturquoise>mediumturquoise</option>
<option value=mediumvioletred>mediumvioletred</option>
<option value=midnightblue>midnightblue</option>
<option value=mintcream>mintcream</option>
<option value=mistyrose>mistyrose</option>
<option value=moccasin>moccasin</option>
<option value=navajowhite>navajowhite</option>
<option value=navy>navy</option>
<option value=oldlace>oldlace</option>
<option value=olive>olive</option>
<option value=olivedrab>olivedrab</option>
<option value=orange>orange</option>
<option value=orangered>orangered</option>
<option value=orchid>orchid</option>
<option value=palegoldenrod>palegoldenrod</option>
<option value=palegreen>palegreen</option>
<option value=paleturquoise>paleturquoise</option>
<option value=palevioletred>palevioletred</option>
<option value=papayawhip>papayawhip</option>
<option value=peachpuff>peachpuff</option>
<option value=peru>peru</option>
<option value=pink>pink</option>
<option value=plum>plum</option>
<option value=powderblue>powderblue</option>
<option value=purple>purple</option>
<option value=red>red</option>
<option value=rosybrown>rosybrown</option>
<option value=royalblue>royalblue</option>
<option value=saddlebrown>saddlebrown</option>
<option value=salmon>salmon</option>
<option value=sandybrown>sandybrown</option>
<option value=seagreen>seagreen</option>
<option value=seashell>seashell</option>
<option value=sienna>sienna</option>
<option value=silver>silver</option>
<option value=skyblue>skyblue</option>
<option value=slateblue>slateblue</option>
<option value=slategray>slategray</option>
<option value=snow>snow</option>
<option value=springgreen>springgreen</option>
<option value=steelblue>steelblue</option>
<option value=tan>tan</option>
<option value=teal>teal</option>
<option value=thistle>thistle</option>
<option value=tomato>tomato</option>
<option value=turquoise>turquoise</option>
<option value=violet>violet</option>
<option value=wheat>wheat</option>
<option value=white>white</option>
<option value=whitesmoke>whitesmoke</option>
<option value=yellow>yellow</option>
<option value=yellowgreen>yellowgreen</option>
</select>
<tr></tr>
<td>
<input class="lb" type="button" value="Enter" onclick="document.bgColor=(this.form.color.value)"> 
<input class="lb" type="reset" name="cancel" value="Reset">
</form>
</td></td></table>
</div>

.div{border-radius:10px 5px; border:double; background-color:#000; color:#FFFFFF;}
.lb{border-radius:5px; width:auto; box-shadow: 2px 2px 4px #F3E9F3;}
table{ background-color:#CCC; color:#FFFFFF; box-shadow: 2px 4px 6px #000000;}
th{background-color:#FF4A4A; text-shadow:2px 4px 6px #000;}
table:hover{ text-shadow: 2px 4px 6px #FFFFFF; border:ridge; cursor:pointer;}
td:hover{background-color:#000; color:fff; text-shadow: 2px 4px 6px #FFFFFF; border-radius:12px; border:double; transition:ease-in-out 0.3s;}

function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum*1000;}

AS Program's

Saturday 24 March 2018

Basic Programs :