PHP JavaScript: javascript

Showing posts with label javascript. Show all posts

Animated 3D Cube Using HTML CSS JAVASCRIPT

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<title>CSS3 3D Cube</title>
	<style>
	body{line-height:1}
	nav ul{list-style:none}
	blockquote,q{quotes:none}
	blockquote:before,blockquote:after,q:before,q:after{content:none}
	a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
	ins{background-color:#ff9;color:#000;text-decoration:none}
	mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
	del{text-decoration:line-through}
	abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
	table{border-collapse:collapse;border-spacing:0}
	hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
	input,select{vertical-align:middle}
	a, a:visited {
	color: #0101d0;
	font-weight: bold;
	cursor: pointer;
	font-size: 20px;
	font-family: arial;
	line-height: 20px;
	display: inline-block;
	padding: 10px;
	}
	a:hover {
	color: #000;
	}
	#wrapD3Cube {
	width: 250px;
	height: 213px;
	margin: 20px auto;
	background-color: #EEE;
	}
	#D3Cube {
	width: 112px;
	height: 112px;
	top: 50px;
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	margin: auto;
	position: relative;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
	#D3Cube > div {
	position: absolute;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	width: 112px;
	height: 112px;
	float: left;
	overflow: hidden;
	opacity: 0.85;
	}
	#side1 {
	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #ff0000;
	}
	#side2 {
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #4d0000;
	}
	#side3 {
	transform: translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
	background-color: #006600;
	}
	#side4 {
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #000066;
	}
	#side5 {
	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #602020;
	}
	#side6 {
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #3399ff;
	}
	</style>
	</head>

	<body>
	<div id="wrapD3Cube">
	<div id="D3Cube">
	<div id="side1"></div>
	<div id="side2"></div>
	<div id="side3"></div>
	<div id="side4"></div>
	<div id="side5"></div>
	<div id="side6"></div>
	</div>
	</div>
	<p style="text-align: center;">
	<a onclick="turnLeft()">Left</a>
	<a onclick="turnRight()">Right</a> <br />
	<a onclick="flipCube()">Flip</a>
	</p>
	</body>

	<script>
	var cubex = -22, // initial rotation
	cubey = -38,
	cubez = 0;
	function rotate(variableName, degrees) {
	window[variableName] = window[variableName] + degrees;
	rotCube(cubex, cubey, cubez);
	}
	function rotCube(degx, degy, degz){
	segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)";
	$('#D3Cube').css({"transform":segs});
	}
	function turnRight() {
	rotate("cubey", 90);
	}
	function turnLeft() {
	rotate("cubey", -90);
	}
	function flipCube() {
	rotate("cubez", -180);
	}
	</script>

	</html>

Result

Simple JavaScript code to design calculator

For creating a basic calculator in JavaScript, we use table structure, input type button, and JavaScript functions.

Input type button use is to take input from the user.
The table structure use is to create calculator structure.
Functions to evaluate the data.

Three simple functions to process all data

Script

1. element()

Which is used to read values from each button

function element(val){

document.getElementById('result').value+=val;

}

2. solve()

This function performs all arithmetic operations like(+,-,/,*)

function solve(){

var value1= document.getElementById('result').value;

let res = eval(value1);

document.getElementById('result').value=res;

}

3. clearElement()

Which is used to clear input value in the calculator

function element(val){

document.getElementById('result').value+=val;

}

HTML

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

CSS

body,html{

matgin:0px;

}

input[type="button"]{

border:none;

width:100%;

outline: none;

}

#wrap

{

margin:10%;

}

</style>

Simple Text Animation Using HTML, CSS and JQuery

In this article, we are explaining a very simple way to animate text in different ways.

1. Includes(jquery and bootstrap libraries)
2. CSS to design content
3. Body of content
4. Javascript to perform actions

Animations
1. Blur-in on mouse hover
2. Blur-out on mouse hover
3. Change background to the text
4. Show/hide text in sequence

Includes

css

<style>

#fadeIn { font: 15px monospace; }

#fadeIn .letter { opacity: 0; }

#fadeIn .opacity {

-webkit-transition: opacity .15s ease-in-out;

-moz-transition: opacity .15s ease-in-out;

-ms-transition: opacity .15s ease-in-out;

-o-transition: opacity .15s ease-in-out;

transition: opacity .15s ease-in-out;

opacity: 1;

}

#backgroundPaint .background {

-webkit-transition: background .3s ease-in-out;

-moz-transition: background .3s ease-in-out;

-ms-transition: background .3s ease-in-out;

-o-transition: background .3s ease-in-out;

transition: background .3s ease-in-out;

background: yellow;

}

h1, h2

{

font-size: 1.6em;

font-weight: normal;

margin: 0;

}

{

font-size: 1.3em;

margin-top: 1.5em;

}

a.blur

{

text-decoration: none;

color: #339;

}

a.blur:hover, a.blur:focus

{

text-decoration: underline;

color: #933;

}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus

{

text-decoration: none;

color: rgba(0,0,0,0);

outline: 0 none;

-webkit-transition: 400ms ease 100ms;

-moz-transition: 400ms ease 100ms;

transition: 400ms ease 100ms;

}

.textshadow a.blur,

.textshadow a.blur.out:hover, .textshadow a.blur.out:focus

{

text-shadow: 0 0 4px #339;

}

.textshadow a.blur.out,

.textshadow a.blur:hover, .textshadow a.blur:focus

{

text-shadow: 0 0 0 #339;

}

</style>

Body

<body>

<button>Click</button>

<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>

</div>

<button>Click</button>

<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>

</div>

<p>The following links blur in on hover/focus</p>

<h1><a href="http://www.phpjavascript.com/" class="blur">Hover me (Blur-in)</a></h1>

<p>The following links blur out on hover/focus</p>

<h1><a href="http://www.phpjavascript.com/2018/01/display-json-data-in-table-using-jquery.html" class="blur out">Hover me (Blur-out)</a></h1>

</body>

JavaScript

$.fn.animateText = function (delay, styleclass) {

var text = this.text();

return this.each(function () {

var $this = $(this);

$this.html(text.replace(/./g, '<span class="letter">$&</span>'));

$this.find('span.letter').each(function (i, el) {

setTimeout(function () {

$(el).addClass(styleclass);

}, delay * i);

});

};

$('#fadeIn button').click(function () {

$(this).next('h2').animateText(15, 'opacity');

});

$('#backgroundPaint button').click(function () {

$(this).next('h2').animateText(8, 'background');

});

if (document.createElement("detect").style.textShadow === "") {

document.getElementsByTagName("html")[0].className += " textshadow";

}

</script>

Note:Paste javscript code at te bottom of your html code.
*Please share the article and follow our PHP Javascript for more.

* Display JSON data in dropdown

* Display JSON data in a table

Form Validation Using Jquery

The code that every web developer looking for. Validating a form in all possible ways. A simple and effective code is here.

Here we are validating all common input types which we use in register form like name, email, phone, password, radio button, select option.

Includes

Script

function Validate() {

(function ($) {

jQuery.validator.setDefaults({
errorPlacement: function (error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});

//To validate letters

$.validator.addMethod("letters", function (value, element) {

return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});

//To validate Number

$.validator.addMethod("number", function (value, element) {

return this.optional(element) || value == value.match(/^[0-9]*$/);

});

//To validate digits for phone number that should start with only 7 or 8 or 9

$.validator.addMethod("digits", function (value, element) {

return this.optional(element) || value == value.match(/^^[789]\d{9}$/);

});

//To validate password

$.validator.addMethod("pwcheckNumber",

function (value, element) {

return /\d/.test(value);

});

$.validator.addMethod("pwcheckUppercase",

function (value, element) {

return /[A-Z]/.test(value);

});

$.validator.addMethod("pwcheckSpecial",

function (value, element) {

return /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(value);

});

//Form validation

$("#Form").validate({

rules: {

Title: {

required: true,

FirstName: {

required: true,

minlength: 3,

letters: true

Mobile: {

required: true,

number: true,

minlength: 10,

maxlength: 10,

digits: true

Email: {

required: true,

email: true,

Password: {

required: true,

minlength: 8,

pwcheckNumber: true,

pwcheckUppercase: true,

pwcheckSpecial: true,

ConfirmPassword: {

required: true,

equalTo: "#Password"

Gender: {

required: true,

}

//Message suggestions that you see on screen

messages: {

Title: {

required: "Please select title",

FirstName: {

required: "Please enter first name",

minlength: "Name should be minimum 3 characters",

letters: "Only letters and spaces are allowed",

Mobile: {

required: "Please enter phone number",

minlength: "Please enter valid phone number",

maxlength: "Please enter valid phone number",

digits: "Phone number should be start with 789",

Email: {

required: "Please enter email",

minlength: "Please enter a valid email address",

Password: {

required: "Please enter password",

minlength: "Password must be minmum 8 character",

pwcheckNumber: "Password must contains one digit",

pwcheckUppercase: "Password must contains atleast one uppercase letter",

pwcheckSpecial: "Password must contains atleast one special character",

ConfirmPassword: {

required: "Please enter confirm password ",

equalTo: "Confirm password must same as password",

Gender: {

required: "Please select gender type"

}

});

})($);

}

</script>

//CSS

<style>

.error_msg {

color: red;

}

body{

position: absolute;

width: 600px;

height: 200px;

z-index: 15;

top: 15%;

left: 30%;

margin: -100px 0 0 -150px;

}

.box-header{

background: #dc3545;

width: 500px;

height: auto;

text-align: center;

color: white;

font-size: 30px;

padding: 10px;

}

.box{

background: #43c181;

padding-top: 10px;

padding-left: 110px;

padding-bottom: 30px;

width: 500px;

height: auto;

}

</style>

<div class="box-header">Register From</div>

<label>Title</label>

<option value="">Select Title</option>

</select>

</div>

<label>First Name</label>

<input type="text" id="FirstName" name="FirstName" class="form-control"

placeholder="First Name"/>

</div>

<label>Mobile</label>

</div>

<label>Email</label>

</div>

<label>Password</label>

<input type="password" id="Password" name="Password" class="form-control"

placeholder="Password"/>

</div>

<label>Confirm Password</label>

<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control"

placeholder="ConfirmPassword"/>

</div>

<label>Gender</label>

<input type="radio" id="Gender" name="Gender" value="Male"> Male

<input type="radio" id="GenderNew" name="Gender" value="Female"> Female<br>

</div>

<input type="submit" value="Submit" class="btn btn-danger" id="Submit" name="Submit"

onclick="Register()">

</div>

</form>

</div>

</body>

Result

*Please share, comment and subscribe to PHP Javascript for more.

PHP JavaScript

Animated 3D Cube Using HTML CSS JAVASCRIPT

Simple JavaScript code to design calculator

Script

HTML

CSS

Simple Text Animation Using HTML, CSS and JQuery

* Display JSON data in dropdown

* Display JSON data in a table

Form Validation Using Jquery

Result

* Display JSON data in dropdown

* Display JSON data in a table

Labels

Popular Posts