HTML/HTML5 Tutorial: December 2017

Sunday, December 31, 2017

How To Create Web Worker In Html

Here In This Html Tutorial We Will Create Web Worker In Html/Javascript Code.

All The Action Will Be Done On Button Control,

Functionality Code Is On Button Control Using Javascript.

Here Is An Example Related To Topic In This Blog.................

Step 1:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Output :

How To Create Password Visibility Option In Html

Hello Friends My Name Is Viraj,Today I Will Create Password Visibility Option On Your Web Page.

Here In This Html Tutorial We Will Create Password Visibility Option In Html/JavaScript Code.

In This Blog We Will Create Password Visibility Option In Html.

Here Is An Example Related To Topic....

Step 1:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery Qwerty Keyboard</title>
<link type="text/css" rel="Stylesheet"
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/
smoothness/jquery-ui.css" />
<style type="text/css">
.ui-keyboard{padding: .3em; position: absolute; z-index: 16000;}
.ui-keyboard-button{height: 2em; width: 2em; margin: .1em;}
.ui-keyboard-actionkey{width: 4em;}
.ui-keyboard-space{width: 15em;}
.ui-keyboard-preview{width: 100%; text-align: left;}
</style>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js">
</script>
<script src="jquery.keyboard.js" type="text/javascript">
</script>

<script type="text/javascript">
$(function () {
$('input[type=password]').keyboard({
layout: "num"
});
});
</script>
</head>
<body>
<input id="txtPass" type="password" />
</body>
</html>

Output :

How To Embed Google Map Using Html Code

Hello Friends My Name Is Viraj,Today I Will Embed Google Map On Your Web Page.

Here In This Html Tutorial We Will Embed Google Map Using Html Code.

In This Blog I Will Show You How To Embed Google Map Using Html Code.

Your Will Required Google Map To Embed In Html Code.

Video Related To Topic Will Be Show.....In This Example.....

Step 1: googlemap.html

<!DOCTYPE html>
<html>
<head>
<title>Google Map Embed</title>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d15077.619829216323!2d72.84562835!3d19.13374315!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1514712547318" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</head>
</html>

Output :

Friday, December 29, 2017

Create Output Functionality In Html.

Hello Friends My Name Is Viraj,Today I Will Create Output Functionality On Your Web Page.

Here In This Html Tutorial We Will Create Output Functionality In Html.

Here Is An Example Related To Topic In This Blog.

Step 1 :

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

</body>
</html>

Output :

How To Create DropDown Control In Html Control

Hello Friends My Name Is Viraj,Today I Will Create DropDown Control On Your Web Page.

Here In This Html Tutorial We Will Create DropDown Control In Html Control.

Here Is An Example Related To Topic ...........

Step 1 :

<!DOCTYPE html>
<html>
<body>

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

</body>
</html>

Output :

How To Print Number From 0 To 50 Different By 2

Hello Friends My Name Is Viraj,Today I Will Print Number From 0 To 50 Different By 2 On Your Web Page.

Here In This Html Tutorial We Will Print Number From 0 To 50 Different By 2.

So In This Blog We Will Print Number From 0 To 50 Different By 2.

Action Will Be Done On Button Control Using Html/Javascript Code.

Here Is An Example Related To Topic...

Step 1 :

<html>
<head>
<body>
<button onclick="data()">click</button>
<script>
function data()
{
var num;
for(num=0;num<50;num=num+2)
{
document.write("<br>"+num);
}
}
</script>
</body>
</head>
</html>

Output :

Thursday, December 28, 2017

Create X and Zero Games Using Html/Css/Javascript Code.

Hello Friends My Name Is Viraj,Today I Will Create X and Zero Games On Your Web Page.

Here In This Html Tutorial We Will Create X and Zero Games Using Html/Css/Javascript Code.
By Combination Of This Three We Will Create X and Zero Game.

Here Is An Example Related To Topic Are....

Step 1 :

<SCRIPT>

if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:50px;')
document.write('}</style>')
}

var sqr1
var sqr2
var sqr3
var sqr4
var sqr5
var sqr6
var sqr7
var sqr8
var sqr9
var sqr1T = 0
var sqr2T = 0
var sqr3T = 0
var sqr4T = 0
var sqr5T = 0
var sqr6T = 0
var sqr7T = 0
var sqr8T = 0
var sqr9T = 0
var moveCount = 0
var turn = 0
var mode = 1

function vari()
{
sqr1 = document.tic.sqr1.value
sqr2 = document.tic.sqr2.value
sqr3 = document.tic.sqr3.value
sqr4 = document.tic.sqr4.value
sqr5 = document.tic.sqr5.value
sqr6 = document.tic.sqr6.value
sqr7 = document.tic.sqr7.value
sqr8 = document.tic.sqr8.value
sqr9 = document.tic.sqr9.value
}
function check()
{
if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
alert("You Win!")
reset()
}
else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
{
alert("You Win!")
reset()
}
else
{
winCheck()
check2()
drawCheck()
}
}

function check2()
{
vari()
drawCheck()
if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
alert("You Lose!")
reset()
}
else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
{
alert("You Lose!")
reset()
}
}

function player1Check()
{
if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
{
alert("Player 1 wins!")
reset()
}
else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
{
alert("Player 1 wins!")
reset()
}
else
{
player2Check()
drawCheck()
}
}

function player2Check()
{
vari()
drawCheck()
if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
{
alert("Player 2 wins!")
reset()
}
else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
{
alert("Player 2 wins!")
reset()
}
}

function drawCheck()
{
vari()
moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T
if(moveCount == 9)
{
reset()
alert("Draw")
}
}

function winCheck()
{
check2()
if(sqr1 == " O " && sqr2 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr2 == " O " && sqr3 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr5 == " O " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr6 == " O " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr8 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr8 == " O " && sqr9 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr9 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr5 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr5 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr3 == " O " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr6 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr7 == " O " && sqr9 == " O " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr7 == " O " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr2 == " O " && sqr8 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr9 == " O " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr4 == " O " && sqr7 == " O " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr5 == " O " && sqr8 == " O " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr6 == " O " && sqr9 == " O " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr4 == " O " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr2 == " O " && sqr5 == " O " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr6 == " O " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr1 == " O " && sqr9 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " O " && sqr7 == " O " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else
{
computer()
}
check2()
}
function computer()
{
check2()
if(sqr1 == " X " && sqr2 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr3 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr5 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr6 == " X " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr8 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr8 == " X " && sqr9 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr9 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr5 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr5 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr3 == " X " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr7 == " X " && sqr9 == " X " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr7 == " X " && sqr4T == 0 && turn == 1)
{
document.tic.sqr4.value = " O "
sqr4T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1)
{
document.tic.sqr6.value = " O "
sqr6T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr4 == " X " && sqr7 == " X " && sqr1T == 0 && turn == 1)
{
document.tic.sqr1.value = " O "
sqr1T = 1;
turn = 0;
}
else if(sqr5 == " X " && sqr8 == " X " && sqr2T == 0 && turn == 1)
{
document.tic.sqr2.value = " O "
sqr2T = 1;
turn = 0;
}
else if(sqr6 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1)
{
document.tic.sqr3.value = " O "
sqr3T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr4 == " X " && sqr7T == 0 && turn == 1)
{
document.tic.sqr7.value = " O "
sqr7T = 1;
turn = 0;
}
else if(sqr2 == " X " && sqr5 == " X " && sqr8T == 0 && turn == 1)
{
document.tic.sqr8.value = " O "
sqr8T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr6 == " X " && sqr9T == 0 && turn == 1)
{
document.tic.sqr9.value = " O "
sqr9T = 1;
turn = 0;
}
else if(sqr1 == " X " && sqr9 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else if(sqr3 == " X " && sqr7 == " X " && sqr5T == 0 && turn == 1)
{
document.tic.sqr5.value = " O "
sqr5T = 1;
turn = 0;
}
else
{
AI()
}
check2()
}

function AI()
{
vari()
if(document.tic.sqr5.value == " " && turn == 1)
{
document.tic.sqr5.value = " O "
turn = 0
sqr5T = 1
}
else if(document.tic.sqr1.value == " " && turn == 1)
{
document.tic.sqr1.value = " O "
turn = 0
sqr1T = 1
}
else if(document.tic.sqr9.value == " " && turn == 1)
{
document.tic.sqr9.value = " O "
turn = 0
sqr9T = 1
}
else if(document.tic.sqr6.value == " " && turn == 1)
{
document.tic.sqr6.value = " O "
turn = 0
sqr6T = 1
}
else if(document.tic.sqr2.value == " " && turn == 1)
{
document.tic.sqr2.value = " O "
turn = 0
sqr2T = 1
}
else if(document.tic.sqr8.value == " " && turn == 1)
{
document.tic.sqr8.value = " O "
turn = 0
sqr8T = 1
}
else if(document.tic.sqr3.value == " " && turn == 1)
{
document.tic.sqr3.value = " O "
turn = 0
sqr3T = 1
}
else if(document.tic.sqr7.value == " " && turn == 1)
{
document.tic.sqr7.value = " O "
turn = 0
sqr7T = 1
}
else if(document.tic.sqr4.value == " " && turn == 1)
{
document.tic.sqr4.value = " O "
turn = 0
sqr4T = 1
}
check2()
}

function reset()
{
document.tic.sqr1.value = " "
document.tic.sqr2.value = " "
document.tic.sqr3.value = " "
document.tic.sqr4.value = " "
document.tic.sqr5.value = " "
document.tic.sqr6.value = " "
document.tic.sqr7.value = " "
document.tic.sqr8.value = " "
document.tic.sqr9.value = " "
sqr1T = 0
sqr2T = 0
sqr3T = 0
sqr4T = 0
sqr5T = 0
sqr6T = 0
sqr7T = 0
sqr8T = 0
sqr9T = 0
vari()
turn = 0
moveCount = 0
}

function resetter()
{
reset()
}
</SCRIPT>

<FORM NAME="tic" method="post">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr1" class="tictac" value=" " onClick="if(document.tic.sqr1.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 1; vari(); check();} else if(document.tic.sqr1.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr1.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr1.value = ' O '; sqr1T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr2" class="tictac" value=" " onClick="if(document.tic.sqr2.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 1; vari(); check();} else if(document.tic.sqr2.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr2.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr2.value = ' O '; sqr2T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr3" class="tictac" value=" " onClick="if(document.tic.sqr3.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 1; vari(); check();} else if(document.tic.sqr3.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr3.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr3.value = ' O '; sqr3T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br />
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr4" class="tictac" value=" " onClick="if(document.tic.sqr4.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 1; vari(); check();} else if(document.tic.sqr4.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr4.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr4.value = ' O '; sqr4T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr5" class="tictac" value=" " onClick="if(document.tic.sqr5.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 1; vari(); check();} else if(document.tic.sqr5.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr5.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr5.value = ' O '; sqr5T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr6" class="tictac" value=" " onClick="if(document.tic.sqr6.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 1; vari(); check();} else if(document.tic.sqr6.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr6.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr6.value = ' O '; sqr6T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br />
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr7" class="tictac" value=" " onClick="if(document.tic.sqr7.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 1; vari(); check();} else if(document.tic.sqr7.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr7.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr7.value = ' O '; sqr7T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr8" class="tictac" value=" " onClick="if(document.tic.sqr8.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 1; vari(); check();} else if(document.tic.sqr8.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr8.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr8.value = ' O '; sqr8T = 1; turn = 1; vari(); player1Check()} drawCheck()">
<INPUT style="background-color:Yellow;" TYPE="button" NAME="sqr9" class="tictac" value=" " onClick="if(document.tic.sqr9.value == ' ' && turn == 0 && mode == 1) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 1; vari(); check();} else if(document.tic.sqr9.value == ' ' && turn == 1 && mode == 2) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr9.value == ' ' && turn == 0 && mode == 2) {document.tic.sqr9.value = ' O '; sqr9T = 1; turn = 1; vari(); player1Check()} drawCheck()">
</form>

Output :

Check Whether Enter Number Is Palindrome Or Not

Hello Friends My Name Is Viraj,Today I Will Check Whether Enter Number Is Palindrome Or Not On Your Web Page. Check Whether a Number is Palindrome or Not. This program reverses an integer (entered by the user) using while loop. Then, if statement is used to check whether the reversed number is equal to the originalnumber or not.This program reverses an integer (entered by the user) using while loop. Then, if statement is used to check whether the reversed number is equal to the original number or not.Write a C program to input number from user and check number is palindrome or not using loop. How to check whether a number is palindrome or not using loop in C programming. Logic to check palindrome number in C programming.Let the given number be num. A simple method for this problem is to first reverse digits of num, then compare the reverse of num with num. If both are same, then return true, else false.Following is an interesting method inspired from method#2 of this post. The idea is to create a copy of num and recursively pass the copy by reference, and pass num by value. In the recursive calls, divide num by 10 while moving down the recursion tree. While moving up the recursion tree, divide the copy by 10. When they meet in a function for which all child calls are over, the last digit of num will be ith digit from the beginning and the last digit of copy will be ith digit from the end.Here In This Html Tutorial We Will Check Whether Enter Number Is Palindrome Or Not.

Here Is An Example Related To Topic Are....

Step 1 :

<html>
<head>
<body>
enter number<input type="text" id="num11">
<button onclick="data()">click</button>
<script>
function data()
{
var rev=0,rem=0,num2=0,num1;
num1=parseInt(num11.value);
num2=num1;
while(num1>0)
{
rem=num1%10;
rev=rev*10+rem;
num1=parseInt(num1/10);
}
if(rev==num2)
{
document.write("It is a palindrome");
}
else
{
document.write("It is not a palindrome");
}
}
</script>
</body>
</head>
</html>

Output :

How To Print 1 To 10 Number In Descending Order In Html

Hello Friends My Name Is Viraj,Today I Will Print 1 To 10 Number In Descending Order On Your Web Page.

Here In This Html Tutorial We Will Print 1 To 10 Number In Descending Order In Html Using Javascript.

On Clicking On Button Control The Number From 1 To 10 Will Be Printed In Descending Order.

Functionality Will Be Done On Button Control.

Here Is An Example Related To Topic.

Let Begin With An Eaxmples....

Step 1:

<html>
<head>
<body>
<button onclick="data()">click</button>
<script>
function data()
{
var i;
for(i=10;i>0;i--)
{
document.write(i+"<br>");
}
}
</script>
</body>
</head>
</html>

Output :

Wednesday, December 27, 2017

How To Create Facebook Like Login/Registration From Replica

Hello Friends My Name Is Viraj,Today I Will Create Facebook Like Login/Registration From Replica On Your Web Page.Every web designer knows that Facebook is the great place to learn UI design. Because their design is more attractive & user friendly.In my experience, most of the clients are asking to design their networking sites like facebook only.So In this post I am going to explain how to create a facebook style homepage with registration form & login form using css3 & HTML5.In this tutorial we will implement Facebook, Twitter and GitHub authentication using the social-auth-app-djangolibrary. They support several other services and the process should be somewhat similar. The social-auth-app-django library have several customization options, which sometimes makes it challenging to get started.Removing the unnecessary fields makes FIT forms simply better than anything you have ever used. Both you and your customers will save so much time, you'll just lay down and pose for stock photography.By using our Facebook Integration Technology, you can now validate that your customers are actual people and not some automated bots. Well, unless it's a fake Facebook account.Phishing is a type of deception designed to steal your valuable personal data such as login details, credit card numbers, account data, or other information. below we have put-up basic phisher mechanism that a hacker uses to make fake facebook login pages. So for this tutorial I will guide you through the mandatory steps where in the end you will have a fully functional social authentication.How To Create Facebook Like Login/Registration From Replica In Html/Css/Javascipt.Here In This Blog I Will Show You A Small Example Related To Topic.

Let Begin With An Example Below...

Step 1: facebook.html

<html>
<head>
<link rel="StyleSheet" type="text/css" href="new1.css">
<title>
FACEBOOK
</title>
<style>
body
{
background-color:#dfe3ee;
}
h1
{
text-align:left;
font-size:30px;
color:white;
text-indent:230px;
}
#t1
{
margin-left:800px;
color:white;
margin-top:-70px;
}
#t2
{
margin-left:800px;
color:black;
margin-top:14px;
}
#t3
{
font-size:30px;
margin-left:800px;
color:#3b5998;
margin-top:-370px;
}
#t4
{
font-size:10px;
margin-left:800px;
color:black;

}
</style>
</head>
<body>
<div id="d1"><table style="color:white;">
<tr><td><h1>facebook</h1></td></tr></table>
</div>
<table id="t1">
<tr><th>Email or Phone</th><th>Password</th></tr>
<tr><td><input type="text" name="name" size="20" placeholder="enter name"></td><td><input type="password" name="name1" placeholder="password"></td><td><button>log in</td></tr>
<tr><td><input type="checkbox">keep me logged</td><td><a href="">forget password</a></td></tr></table>
<img src="f.jpg" width="700" alt="image"/>
<table id="t3">
<tr><td><b>Create an Account</b></td></tr>
<tr><td>It is free and always will be</td></tr>
</table>
<table id="t2">
<tr><td><input type="text" name="name" size="20" placeholder="First Name" style="border-radius:5px;"></td><td><input type="text" name="name" size="20" placeholder="Last Name" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="Email"style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="Re-enter email" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="password" size="20" placeholder="Password" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="DD/MM/YYYY" style="border-radius:5px;"></td></tr>
<tr><td>Male<input type="radio" name="male">Female<input type="radio" name="male"></td></tr>
<tr><td><button>Create Account</button></td></tr>
</table>
<br>
<table id="t4">
<tr><td>By clicking Create an account,you agree to our terms and that you have</td></tr>
<tr><td>read our data policy including our cookie use</td></tr>
</table>
<br><br><br><br>
<hr/>
</body>
</head>
</html>

Step 2: new1.css

#d1

{

width:1500px;

height:70px;

background-color:#3b5998;

}

Step 3: Download Images

Output :

Monday, December 25, 2017

How To Create Login Page In Html

Hello Friends My Name Is Viraj,Today I Will Create Login Page On Your Web Page.Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank.We have used JavaScript validation in Login page. We have set username and password value.Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in Login page. We have set username and password value. If a person enter a wrong username or password or both, an error message with "Error: Incorrect Username or Password" will be displayed. Till the person enters the correct username and password, it will not Login.

Once you enter the correct Username and Password, you will be redirected to another page.Login page is used in most of the dynamic website to validate user based on their credentials. For making login page for websites HTML form and HTML elements are used. Text field is used to accept username and password text field is used to accept password from user.The submit button is used for submitting data to server for validation. Its good to validate user input in the browser using JavaScript. In this tutorial we are creating a HTML Login page code and validating user input with JavaScript. In modern web application server-side validation is also very important it is done on server side with the program running on the server.Here In This Html Tutorial We Will Create Login Page In Html Using Html/Css/Javascript.In This Blog I Will Cover All The Topic Related To Html/Css/Javascript Combination In Creating Login Page.

So Let Begin With Our Coding............

Step 1: MainPage.html
<html>
<head>
<h1 align="center">FIOWER GARDEN</h1>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
</head>
<title>FIRST WEB PAGE</title>

<body bgcolor="yellow">

<div class=b2>

<img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="1300" height="300">

<script language="JavaScript">
function checkLogin(x)
{
if((x.id.value!="sam")||(x.pass.value!="sam123"))
{
alert("invalid login");
return false;
}
else
location="welcome.html"
}

</script>
</head>

<form>
<p align="center">userid:<input type="text" name="id"></p>

<p align="center">password:<input type="password" name="pass"></p>

<p align ="center"><input type="button" value="login"
onclick="checkLogin(this.form)"></p>

</html>

Step 2: welcome.html

<html>
<div class=b1>
<head><h1 align="center">Welcome To Flower Garden</h1></head>
<body>
<link rel="stylesheet" type="text/css" href="cssflowergarden.css"/>
<div class=b2>
<div class=b1>
</body>
</html>

Step 3: cssflowergarden.css

.b1
{
background-color:yellow;
}
.b2
{

background-color:#cccccc;
}

Output :

MainPage.html

welcome.html

Sunday, December 24, 2017

How To Calculate Value In Html Using Javascript

Hello Friends My Name Is Viraj,Today I Will Calculate Valu On Your Web Page.In this tutorial, we will learn how to perform calculations using JavaScript. It is quite often required to do calculations online in order forms, request quote forms and the like. This tutorial will show you how to use different form elements like drop-down list, radio button, check box and text box in a calculation.We will be using a ‘cake order form’ as an example. As the user makes selections in the form, the total price is calculated in real time.Read "Writing and Debugging JavaScripts", before trying out these examples. At a minimum, you should have the "Firebug" (or Web Developer Tools). It is very difficult to debug JavaScript codes due to its loose syntax. One misspell character in variable or function name, may waste a lot of your time, as JavaScript treat it as a new item or abort the function.Let us create a simple web app that helps to calculate simple interest. The code is given below. You can paste it into a text editor (e.g.: gEdit or Notepad), save it with a filename that has the extension .html (e.g.: simpleint.html), open it in a web browser, and run it.It is a good practice to separate the HTML contents, CSS presentation styles and JavaScript behavior programming codes in three different files, ".html", ".css" and ".js", for ease of maintenance and good software engineering practice. The now-preferred approach is not to embed styles and JavaScript codes inside HTML document, but keep them in separate files.The calculate() function acts as the handler for the onclick event of the button. That is, when the user clicks the button Calculate, the calculate() function is executed.

The function should get the values that the user has entered into the input boxes. In order to do this, it uses the document.getElementById() method and the value property. After the calculation, the result is put inside a paragraph element using the same mechanism (assignment instead of reading, this time).JavaScript supports basic mathematical operations like addition, subtraction, division and so on. These mathematical operations makes sense on numbers, but in HTML, the data that we read is in string format, which means the data is to converted to a number, before we can perform mathematical operations on them. In this article, we will learn how to use jQuery to traverse all of the values in a HTML table column, convert the values to numbers, and then sum the values.In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand this tutorial you would need to have a little knowledge of HTML and CSS.Here In This Html Tutorial We Will Calculate Different Value Of Flower Base On Rate In Html/Css/Javascript.In This Tutorial We Will Count The Value Of Flower Base On Rate Using Html/Css/Javascript Code.Here Is An Example ...
So Let Begin With Our Coding............

Step 1:

<html>
<table border="1" bordercolor="yellow">
<colgroup span="3" width="360"></colgroup>
<thead>
<tr bgcolor="blue">
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">

<p>
<form method="post">
rate :"50" <br>
quantity=<input type="text" id="quantity" name="quantity"/>
<br>

<input type="button" value="value" onclick="myFunction()"/>

<script>
function myFunction()
{
var val1= parseInt(document.getElementById("quantity").value);
var ans=50*val1;
alert("quantity="+ans);

}
</script>

</p>
</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="40"<br>

quantity=<input type="text" id="quantity1" name="quantity1"/>
<br>

<input type="button" value="value" onclick="myFunction1()"/>

<script>
function myFunction1()
{
var val1= parseInt(document.getElementById("quantity1").value);
var ans=40*val1;
alert("quantity1="+ans);

}
</script>
</p>

</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="30"
<br>
quantity=<input type="text" id="quantity2" name="quantity2"/>
<br>

<input type="button" value="value" onclick="myFunction2()"/>

<script>
function myFunction2()
{
var val1= parseInt(document.getElementById("quantity2").value);
var ans=30*val1;
alert("quantity2="+ans);

}
</script>
</p>
</th>

</tr>
</thead>

</table>
</html>

Output :

How To Create Basic Registration Form In Html

Hello Friends My Name Is Viraj,Today I Will Create Basic Registration Form On Your Web Page.I am new to CSS and HTML, I want to try and create a registration form where i have a user enter details then submit to a database or if user click on reset it resets the fields. At present, the concept of online student registration form has emerged as a great relief for the educational institutes across the world as it saves the time for both the students as well as management. In addition to that, it reduces risk of loosing data, which was a great concern with manual registration forms.In this tutorial you will learn to create a student registration form using html code in easy steps. In this example given below, you will find several text fields required to fill in a student registration form, radio button, Reset button and Submit Form button. The Reset button will reset the form to blank.In this tutorial for writing html code for student registration form JavaScript validation has been used. Moreover, if you do not enter any value in the text fields, an error message will appear. In this student registration form, filling up every field is mandatory and will show an error message if any field is left blank. Further changes can be made as per the requirements by the programmer. Once all the fields are filled correctly, submit form adds the data.In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.

The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.Here In This Html Tutorial We Will Create Basic Registration Form In Html.Here In This Blog We Will Use All Type Of Html Tag To Create Registration Form In Html.Here Is An Example Related To Blog.

So Let Begin With Our Coding............

Step 1:

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body bgcolor="lightgrey">
<h2 align="center">On-Line Registration Form</h2>
<hr width="100%" size="2" color="red">
<br>
First Name:<input title="first name" type="text" size="30" name="f1">    
Middle Name:<input title="middle name" type="text" size="30" name="m1">    
Last Name:<input title="last name" type="text" size="30" name="l1">    
<br><br>
Type Your Address:<br>
<textarea row="5" cols="50">
</textarea>
<fieldset>
<legend align="center">
<b><i>Personal Details:-</b></i>
</legend>
<br><br>
Select Gender:<input type="radio" name="male">Male
<input type="radio" name="male">Female
<br><br>
Select Date of Birth: 
<select>
<option>--Days--</option>
<option>01</option><option>02</option><option>03</option></select>(dd)

<select>
<option>--Months--</option>
<option>January</option><option>February</option><option>March</option></select>(mm)

<select>
<option>--Years--</option>
<option>1950</option><option>1951</option><option>1952</option></select>(yy)
<br><br>

Castes:<input type="radio" name="other">Other
<input type="radio" name="other">OBC/SBC
<input type="radio" name="other">SC
<input type="radio" name="other">ST
<input type="radio" name="other">Open
<input type="radio" name="other">NT
<br><br>

Select Education:<input type="checkbox" name="ssc">S.S.C
<br><br>
                    <input type="checkbox" name="hsc">H.S.C
<br><br>

Mobile No:<select>
<option>+91</option><option>+92</option></select>
<input title="Mobile No." type="text" size="30">
<br><br>

Tel No:<input title="Tel No" type="text" size="30">
</fieldset>
<br><br>

File Upload:
<input type="file" name="upload">
<br><br>

<input type="button" value="Submit" name="submit">

<input type="button" value="Reset" name="submit">

</body>
</html>

Output :

How To Create Basic Calculator Using Html/Css/Javascript Code

Hello Friends My Name Is Viraj,Today I Will Create Basic Calculator On Your Web Page.Calculator is one of the basic project a Javascript or any other language a newbie programmer should probably know how to create. It is a basic project because it entails arithmetic operations. All you have to do is to create a button for each numbers, arithmetic operations. symbols and then add a screen that serves as a screen or lcd.Each buttons created has their own event handlers and functions. Whenever a number button is clicked, it prints the number indicated on the button into the textbox which is the screen. Then when an arithmetic operation is clicked after a value has been entered, it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number you'll be calculating together with the first number and clicking the equals-to button, the equals to button will store the value in the textbox as the second number and then it will check the arithmetic you clicked. Once it checked arithmetic operation you click, it will add or subtracts or multiply or divide the first-number and second-number depending on the arithmetic operation you clicked and then prints the result back to the textbox.This calculator will only have the division, multiplication, addition and subtraction operations but you can easily include more functions if you need.You can also use keyboard number keys to calculate the value. Input type are included in the code for a form which makes ‘textfield’ and ‘button’. Every input field is specified with attribute value. The attribute value specifies the value of an <input> element. Eval() function takes the expression and evaluates it accordingly. ‘On click’ is the event. It occurs when the user clicks on an element.Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the cal JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.The cal function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.In this article, we will create a calculator step-by-step. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript.The following creates the div (.box) that represents the structure of the calculator. Inside it are two div tags, one for display (inside this, I added input type="text" to display the result and set this to read only) and one for Keys. There is also an onclick event to be explained later. Here In This Html Tutorial We Will Create Basic Calculator Using Html/Css/Javascript Code.This Calculator Is Combination Of Html/Css/Javascript Code.Here Is An Example For It..

So Let Begin With Our Coding............

Step 1:

<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>

<style>
body {
background-color:#fff;
margin: 0px auto;

}
.calbody{
background: Yellow;
border: 1px solid #ff0;
padding: 10px;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;

}
h1{
text-align: center;
font-size: 40px;
color: #003652;

}

#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;

}

#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;

}

button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;


}

button:hover{
background-color: #509CA9;

}

</style>
</head>
<body>
<h1>
Html/Css/Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>


<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>


<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>


<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>

<script>

var firstnumber;
var secondnumber;
var result;
var operations;

function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "1";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}

}
function numtwo(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "2";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}

}
function numthree(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "3";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}

}
function numfour(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "4";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}

}
function numfive(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "5";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}

}
function numsix(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "6";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}

}
function numseven(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "7";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){

if (document.lcdform.lcds.value == "0"){

document.lcdform.lcds.value = "8";

}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}

}
function numnine(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

document.lcdform.lcds.value = "9";

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}

}
function numzero(){

if (document.lcdform.lcds.value == "0"){

document.lcdform.lcds.value = "0";

}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}

}
function numdobuzero(){

if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){

return;

}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}

}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}

function operationplus(){

operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
//alert(firstnumber);

}
function operationmult(){

operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationminus(){

operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationdivid(){

operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function operationperc(){

operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;

}
function equalsto(){

secondnumber = parseInt(document.lcdform.lcds.value);

if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){

result = firstnumber * secondnumber;

}
else if (operation == "-"){

result = firstnumber - secondnumber;

}
else if (operation == "/"){

result = firstnumber / secondnumber;

}
else if (operation == "%"){

if (document.lcdform.lcds.value == "0"){

result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0") {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){

for (var i = 0; i < secondnumber; i++){

result = firstnumber * i;
}


}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;

}

function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;

}

function operationraistop(){

operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";

}

</script>
</body>
</html>

Output :

Video Related To Topic

HTML/HTML5 Tutorial