Sunday, 25 March 2018

Animations :

Animated Disk

<div class='spiralContainer'><div class='spiral'></div></div>
<h1>Please put a image in css </h1>

.spiralContainer {
  border-radius: 50%;
  width:200px;
  height:200px;
  overflow:hidden;
  margin:20px; box-shadow:2px 4px 6px #000000;
  
  -webkit-animation: spin 3s linear 0s infinite reverse;
  -moz-animation: spin 3s linear 0s infinite reverse;  
  -ms-animation: spin 3s linear 0s infinite reverse;
  -o-animation: spin 3s linear 0s infinite reverse;
  animation: spin 3s linear 0s infinite reverse;
  
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;  
  animation-play-state: paused;
}
.spiral {
  width:200px;
  height:200px;
  border-radius: 50%;
/*image load disk*/
background-image: url(../../Web-Sites/knowlegde/images/round-metal-background_1053-158.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 6s linear 0s infinite normal;
  -moz-animation: spin 6s linear 0s infinite normal;
  -ms-animation: spin 6s linear 0s infinite normal;
  -o-animation: spin 6s linear 0s infinite normal;
  animation: spin 6s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

Dancer Boy

Dog Cartoon

<div class='container'>
  <div class='bk'>
    <div class='mid'>
      <div class='fore'>
        <div class='figure'></div>
      </div>
    </div>
  </div>
</div>

html {
  background: #000;
}

.container {
  margin: 30px auto;
  border: 1px solid #333;
  background: #55c1e7;
}

/*--extend--*/
.area {
  width: 600px;
  height: 288px;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

.fore, .mid, .bk, .container { 
  @extend .area; 
}

.figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/dog-walk.svg") no-repeat;
  width: 220px;
  height: 266px;
  transform: translate3D(200px, 50px, 0);
  animation: walk 0.78s steps(9) infinite;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}
.no-svg .figure {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/dog-walk.png");
}

.fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/foreground.svg");
  transform: translateZ(0);
  animation: bk 7s -5s linear infinite;
}
.no-svg .fore {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/foreground.png");
}

.mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/midground.svg");
  animation: bk 15s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/midground.png");
}

.bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/background.svg");
  animation: bk 20s -5s linear infinite;
  transform: translateZ(0);
}
.no-svg .bk {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57786/background.png");
}

@keyframes walk {
  100% { background-position: 0 -2376px; }
}

@keyframes bk {
  100% { background-position: 200% 0; }
}

@media screen and ( max-width: 600px ) {
  .container { 
    width: 100%; 
    margin-top: 0;
  }
  .figure { transform: translate3D(40%, 50px, 0); }
}

Mouse move Animated

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
   google.load("jquery", "1.3.2");
   google.load("jqueryui", "1.7.2");
</script>

<body class="index">
     <canvas style="border-radius:15px; box-shadow: 2px 4px 6px #000000;" height="700" width="700" id="canvas">Cheetah program</canvas>
     
  <div id="explain">
<span>
      <button class="type" name="fade" onClick="toggleFade()">On</button>
      
      <button class="type" name="fade" onClick="toggleFade()">Off</button>
</span></div>

body {
 background-color: #ffffff;
 color:white;
 padding:0px;
 margin:0px;
 word-spacing:.06em;
}

#canvas {
 position:absolute;
 top:0px;
}

#explain {
 width:180px;
 left:0px;
 top:0px;
 position:absolute;
 font-family:arial, sans-serif;
 font-size:25px;
 color:white; margin-left:10px;
}

.type{border-radius:15px; background-color:#FFF;text-decoration:overline;}

span {
 padding: 2px;
 line-height:16px;
 background-color: #000; border-radius:12px; padding-top:50px; border:dotted;}

var pcMode = false;
var fadeStage = false;
var grayScale = false;
var dx = 2;
var dy = 4;
var lineColor = 'rgba(255,0,100,.2)';
var particleCount = 0;
var particleList = {};

function draw() {
 
 if (system){
  system.update();
 }
  
 
 if (fadeStage){
  fade(); 
 }
}

function initParticleSystem(){
 system = new ParticleSystem();
 system.init(systemSize);
}

function ParticleSystem(){
 
}

ParticleSystem.prototype.init = function(_systemSize){
 this.list = [];
 var i = 0;
 for(i=0; i < _systemSize+1; i++){
  this.createParticle();
 }
}

ParticleSystem.prototype.createParticle = function(){
 var newParticle = new Particle();
 newParticle.init();
 this.list.push(newParticle);
}

ParticleSystem.prototype.update = function(){
 var i = 0;
 for(i = 0; i < systemSize-1; i++){
  this.list[i].draw();
 }
}

function Particle(){
 
}

Particle.prototype.init = function(){
 setColor(this);
 this.x = Math.random() * WIDTH;
 this.y = Math.random() * HEIGHT;
 this.vel = Math.random() * 5 + 1;
 this.ang = Math.random() * (Math.PI);
 this.diameter = Math.random() * 5 + 1;
 this.oldX = this.x;
 this.oldY = this.y;
 this.speedModX = Math.random() * 20 + 8;
 this.speedModY = Math.random() * 20 + 8;
 this.speedModTargX = Math.random() * 3 + 2;
 this.speedModTargY = Math.random() * 3 + 2;
 this.maxSpeed = Math.random() * 20 + 5;
 this.speedX = 0;
 this.speedY = 0;
}

Particle.prototype.draw = function(){
 ctx.fillStyle = this.color;
 
 var _x = this.x;
 var _y = this.y;
 var _d = this.diameter;
 var _vel = this.vel;
 var _ang = this.ang;
 var _smx = this.speedModX;
 var _smy = this.speedModY;
 
 var _sX = this.speedX;
 var _sY = this.speedY;
 
 this.oldX = _x;
 this.oldY = _y;
 
 var targSpeedX = (cursorX - _x)/this.speedModTargX;
 var targSpeedY = (cursorY - _y)/this.speedModTargY;
 
 var maxSpeed = this.maxSpeed;
 if (Math.abs(_sX) > maxSpeed){
  if (_sX > 0){
   _sX = maxSpeed;
  } else {
   _sX = 0 - maxSpeed;
  }
 }
 if (Math.abs(_sY) > maxSpeed){
  if (_sY > 0){
   _sY = maxSpeed;
  } else {
   _sY = 0 - maxSpeed;
  }
 }
 
 _sX += (targSpeedX - _sX)/_smx;
 _sY += (targSpeedY - _sY)/_smy;
 
 _x += _sX;
 _y += _sY;
 
 this.speedX = _sX;
 this.speedY = _sY;
 
 this.x = _x;
 this.y = _y;
 this.vel = _vel;
 this.ang = _ang;
 
 particleLine(this)
 
}

function particleLine(p) {
 
 
 var _x = p.x;
 var _y = p.y;
 var _oldX = p.oldX;
 var _oldY = p.oldY;
 ctx.lineWidth = .5;
 if (p.colorTint > 5){
  ctx.lineWidth = 1.2; 
 }
 ctx.strokeStyle = p.color;
    ctx.beginPath();
    ctx.moveTo(_oldX,_oldY);
    ctx.lineTo(_x,_y);
    ctx.stroke();
 
}

function toggleFade(){
 log("toggle fade");
 if (fadeStage == false){
  fadeStage = true;
 } else {
  fadeStage = false;
 }
}

function toggleAmount(){
 if (lots == false){
  lots = true;
  systemSize = 150;
 } else {
  lots = false;
  systemSize = 10;
 }
 
 initParticleSystem();
}
</script>

var ctx;
var ctCanvas;
var WIDTH = 2000;
var HEIGHT = 1000;

var intervalID = 0;
var cursorX = 150;
var cursorY = 150;
var fadeRate = .05;
var showLog = true;

function init() {
   
   ctx = $('#canvas')[0].getContext('2d');
 HEIGHT =  window.innerHeight;
  WIDTH =  window.innerWidth;
 ctCanvas = document.getElementById("canvas");
    
   if ($.browser.msie && document.all){
    
    pcMode = true;
    showLog = false;
    initCanvasSize();
   } else {
    initCanvasSize();
   }

intervalId = setInterval(draw, 1);
 return intervalId;

}

function onMouseMove(evt) {
  cursorX = evt.pageX;
  cursorY = evt.pageY;
}

function line(x,y,r) {
 ctx.lineWidth = 1;
 ctx.strokeStyle = lineColor;
    ctx.beginPath();
    ctx.moveTo(oldX,oldY);
    ctx.lineTo(x,y);
    ctx.stroke();
 
 oldX = x;
 oldY = y;
}

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function fade() {
  ctx.fillStyle = "rgba(255, 255, 255, "+fadeRate+")"
  ctx.beginPath();
  ctx.rect(0,0,WIDTH,HEIGHT);
  ctx.closePath();
  ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

$(document).mousemove(onMouseMove);

function log(m){
 if (showLog){
  console.log(m);}}</script>

Lighting Balls

<canvas style="border-radius:15px; box-shadow:2px 4px 6px #000000;" id="canvas" width="1330" height="650"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = 1330; var H = 650;
var particles = [];
for(var i = 0; i < 20; i++)
{particles.push(new create_particle());}function create_particle()
{this.x = Math.random()*W;this.y = Math.random()*H;this.vx = Math.random()*20-10;this.vy = Math.random()*20-10;
var r = Math.random()*255>>0;var g = Math.random()*255>>0;var b = Math.random()*255>>0;
this.color = "rgba("+r+", "+g+", "+b+", 0.5)";
this.radius = Math.random()*20+20;}
var x = 100; var y = 100;
function draw(){ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";ctx.fillRect(0, 0, W, H);ctx.globalCompositeOperation = "lighter";
for(var t = 0; t < particles.length; t++)
{var p = particles[t];ctx.beginPath();var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);gradient.addColorStop(0, "white");gradient.addColorStop(0.4, "white");gradient.addColorStop(0.4, p.color);gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);ctx.fill();p.x += p.vx;p.y += p.vy;if(p.x < -50) p.x = W+50;if(p.y < -50) p.y = H+50;if(p.x > W+50) p.x = -50;if(p.y > H+50) p.y = -50;}}setInterval(draw, 20);
</script>

Blood Rain

<canvas id="canvas" style="box-shadow: 2px 4px 6px #000000; border-radius:10px;"></canvas>

* {margin: 0; padding: 0;}

body {background: #fff;}
canvas {display: block;}

window.onload = function(){
 
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 
 var mp = 500; 
 var particles = [];
 for(var i = 0; i < mp; i++)
 {
  particles.push({
   x: Math.random()*W, 
   y: Math.random()*H, 
   r: Math.random()*4+1, 
   d: Math.random()*mp 
  })
 }
 
 
 function draw()
 {
  ctx.clearRect(2, 0, W, H);
  
  ctx.fillStyle = "rgba(900,1,1,1)";
  ctx.beginPath();
  for(var i = 0; i < mp; i++)
  {
   var p = particles[i];
   ctx.moveTo(p.x, p.y);
   ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
  }
  ctx.fill();
  update();
 }
 
 
 var angle = 0;
 function update()
 {
  angle += 0.01;
  for(var i = 0; i < mp; i++)
  {
   var p = particles[i];
   
   
   p.y += Math.cos(angle+p.d) + 1 + p.r/2;
   p.x += Math.sin(angle) * 2;
   
   
   if(p.x > W+5 || p.x < -5 || p.y > H)
   {
    if(i%3 > 0) 
    {
     particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
    }
    else
    {
     
     if(Math.sin(angle) > 0)
     {
      
      particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
     }
     else
     {
      
      particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
     }
    }
   }
  }
 }
 
//speed control 
 setInterval(draw, 0);
}

Convertor Samples :

Temperature-Converter
Celsius Fahrenheit:

Weight-Converter
K.G G.M:

Speed-Converter
Kph Mph:

Love-Converter

Length-Converter
Unit	Number

Centimetre:
Metre:
Kilometre:
Inch:
Foot:
Yard:
Mile:

Color-Picker

Saturday, 24 March 2018

Basic Programs :

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;}

SAMPLES :

What Is Javascript ?

JavaScript was initially created to “make webpages alive”. The programs in this language are called scripts. They can be written right in the HTML and execute automatically as the page loads. Scripts are provided and executed as a plain text. They don’t need a special preparation or a compilation to run. In this aspect, JavaScript is very different from another language called Java. When JavaScript was created, it initially had another name: “Live Script”. But Java language was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.But as it evolved, JavaScript became a fully independent language, with its own specification called ECMAScript, and now it has no relation to Java at all.