Sanwebcorner | Programming Blog

How to create simple coming soon page

Simple website always looks nice and very professional . Here we will see how to create very simple coming soon page for your website. It is very easy to create the coming soon page using simple html and css code. Take on simple icon related to the coming soon page and put it in to the center of the page using css code like 

.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}

Then give your coming soon text in header tag. The simple coming soon page is ready. This is very simple and neat. I hope this page is very useful to you. You can use this page to your websites. I given the full html code here you can copy paste the code and change the image. or you can download the full code from here by pressing download button.




<!DOCTYPE html>
<html lang="en">
<head>
<title>Coming Soon Page</title>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css?family=Neuton|Roboto" rel="stylesheet">
<style>
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
.holder h1 {
font-family: 'loveloblack', sans-serif;
font-size:5em;
color:#2d2d2d;
text-shadow: 3px 3px 0 #e3e3e3;
line-height: 27px;
margin-top: 12px;
margin-bottom: 10px;
}
.holder h1 span.tbl{
font-family: Dosis,Tahoma,sans-serif;
font-size:35px;
color:#2d2d2d;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.holder h1 span {
font-family: Dosis,Tahoma,sans-serif;
font-size:1em;
color:#3d9df8;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
p{
font-size: 18px;
font-weight: 600;
color: #13447E;
font-family: 'Neuton', serif;
}
</style>
</head>
<body>
<div class="holder">
<img src="Coming-Soon-Icon.png" style="width:250px;" />
<h1><span class="tbl">Our Website is Coming Soon.</span></h1>
<p><span class="tbl">We'll be back shortly.</span></p><br>
<br />
</div>
</body>
</html>

Create Auto complete to Input field without database Jquery

Auto complete system one of the simple thing, It will done by using Jquery. Now we will see how to create auto complete process to the input field by using manually given keyword by the programmer. This process is very useful to the user. When user types the keyword it automatically shows the suggestion tho the used based on the given keyword.

 There is two ways to complete this process one is auto complete based on the database data and another one is based on the given keyword.For this concept there is no need any database. In previous session i showed you here how to create auto complete system with database. I hope this below example will help you. Check out my demo page in below link.



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"Html",
"Css",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( ".san" ).autocomplete({
source: availableTags
});
} );
</script>

<style>
.san{
width:100%;
border:1px solid red;
height:35px;
max-width:300px;
margin:0 auto;
display:block;
}

.content{
width:500px;
margin:0 auto;
background-color: #588659;
padding: 65px 35px;
}
</style>
</head>
<body>
<div class="content">
<h2 style="color:#fff; text-align:center;">Auto complete System without database using jQuery</h2>
<input class="san">
<p style="color:#fff; text-align:center;">www.sanwebcorner.com</p>
</div>
</body>
</html>

How to Animate gradient Text using pure css

This is one of the css3 trick to Animate the gradient text. This is one of the interesting concept and this will be done by using the html and css3 code. First we should give the gradient colors for the text using the following code. background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%); you can change the gradient color according to your choice. In this example i privided light orange and red color for gradient. Then will give the position for this gradient using the below code.background-position: 200% center; and then give the animation for the background using below code animation: shine 3s linear infinite; 

This is the process to generate the animated gradient text using css3 and html. I hope this example is very useful and also very simple to create. Here i provided the demo page, check out the demo page for this effect. And also have the code you can download and use this code for your projects.




Code for Animate gradient text using Css:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>How to Animate gradient Text using pure css</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<style>
html {
height: 100%;
}
body {
background: #333;
text-align: center;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 100px;
text-transform:uppercase;
}
.linear-wipe {
text-align: center;
background: -webkit-gradient(linear, left top, right top, color-stop(20%, #FF3202), color-stop(40%, #FF6E02), color-stop(60%, #FF6E02), color-stop(80%, #FF3202));
background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 3s linear infinite;
animation: shine 3s linear infinite;
}
@-webkit-keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes shine {
to {
background-position: 200% center;
}
}
</style>
</head>
<body>
<h2>How to Animate gradient Text using pure css</h2>
<h1 class="linear-wipe">sanwebcorner</h1>
</body>
</html>

How to generate random password using php

In this program we are going to see how to generate random password using php. This is the php concept to generate random password with given character like abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+? you can give the any character like that. str_shuffle() is a php function is used to shuffle the given character. You can also mention how many digits you want. In this example i given 8 character length. You should provide according to your choice.

Here when you refresh the page using refresh button the password will be change. The password dynamically changed when you refresh the page. This is one of the old concept to generate the password but still is useful. Please check out the demo page and download the code from here. I hope this concept will useful somewhere in the programs. 

Code for Create random Password using PHP:

<html>
<head>
<title>Generate random password using php</title>
<style>
.san{
margin: 40px;
border: 1px solid #3A3737;
width: 355px;
padding: 16px;
font-size: 30px;
font-weight: bold;
float:left;
}
</style>
</head>
<body>
<?php
function random_password_generate($length) 
{
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+?";
$password = substr(str_shuffle( $chars ),0, $length );
return $password;
}
$password = random_password_generate(8);?>
<h2 style="float:left; margin:40px;  padding: 21px 0px;"> Password: </h2> &nbsp; <div class="san">
<?php echo $password;?>
</div>
<input type="button" value="Refresh Page" onClick="window.location.reload()" style="float:left; margin:49px 40px;  padding: 15px;">
</body>
</html>

3D Drop Shadow for text using pure css

This is one of the simple concept using css3 code. It is just drop the shadow to the text for 3D Effect. 3D text always looking good and attractive to everyone. So you can use this for your headings to attractive your contents to the clients. This is very easy to drop the shadow with the help of css3. You can drop the shadow to the text using the following simple code.

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);

You can change the color of the codes and shadow colors according to your choice. Here is the demo page of this example you can visit the demo page for this 3d text, and also download the code from here. I hope this simple  concept is very useful to you.



To Drop Shadow to Text for 3D Effect:

<html>
<head>
<title>Drop shadow for 3d text</title>
<style>
body { font: 900 120px/1 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding-top: 10%; }

h1 {
position: absolute;
top: 35%;
width: 100%;
font-size:75px;

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h2>3D Drop Shadow for text using pure css </h2>
<h1>SAN WEB CORNER</h1>
</body>
</html>

How to Set Different Scroll speed for Divs using Css and Jquery

This is one of the interesting concept to set the different scroll speed for different div. When you scroll each of the div moves based on the scroll speed you mentioned. For that you should include the JQuery file in the programs. The following code used to set the scroll speed each of the div.

<div class="box" data-scroll-speed="5">HTML</div>
<div class="box" data-scroll-speed="3">CSS</div>
<div class="box" data-scroll-speed="7">JAVASCRIPT</div>
<div class="box" data-scroll-speed="4">JQUERY</div>

I hope this topic will useful to you. Here we have the full code and also available the demo link of this program. Please check out the demo link for set the different scroll speed for each div. This types of concept is very useful somewhere in the programs.

How to set Different Scroll time for each div :

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery different scroll speeds</title>
<style>
body {
font-family: arial, sans-serif;
}
.content {
height: 9000px;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
}

.box {
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
height: 150px;
width: 190px;
line-height: 150px;
text-align: center;
font-size: 25px;
color: #fff;
background: #ff8330;
margin:25px;
}
.box:nth-of-type(2) {
background: #E01B5D;
}
.box:nth-of-type(3) {
background: #179292;
}
.box:nth-of-type(4) {
background: #699817;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="box" data-scroll-speed="5">HTML</div>
<div class="box" data-scroll-speed="3">CSS</div>
<div class="box" data-scroll-speed="7">JAVASCRIPT</div>
<div class="box" data-scroll-speed="4">JQUERY</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>



Auto 3d rotate gallery image using pure css

In this topic will see how to create auto rotate 3D images with the help of pure css. This is one of the simple concept and easy to create we can use it to the gallery page for better view for the images. And also this is very attractive animation effect with pure css. Now will see how to create this effect.This concept is to rotate multiple images in the 3d effect without using any jquery and javascript. This will done by using pure css3 code. and we can use n number of images to in this concept by reducing the transform deg.

For carousel id we can set the following important css3 code like below to animate rotate effect
transform-style: preserve-3d;
animation: rotation 20s infinite linear;

Then set the transform degree for each image with 40 degree difference between each images like below
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}

then set the keyframe rotation from 0deg to 360deg . This all are very important points to be noted. Please check the below demopage to view the auto rotate 3d gallery images. And download the code from here and use it to your website. We can use this types of animation in gallery pages for our website. I hope this is very useful to you. 


Css for 3d rotate image:

.gallery{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 90%;
height: 78%;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
#carousel img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
width:100%;
}
#carousel img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}

@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}

Html code for 3d rotate image gallery:

<body>
<div class="div-center gallery">
<div id="carousel">
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
<figure><img src="p5.jpg" alt=""></figure>
<figure><img src="p6.jpg" alt=""></figure>
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
</div>
</div>
</body>

How to create 3(three) step registration form with JavaScript validation

This post helps you how to create simple and perfect 3 step form with Javscript validation using Css3 and Html.Now a days 3 step form is commonly used form in the webpages because it is very attractive one for the customers because it helps no need to scroll down for the bigger type forms. And also 3 step form is captured the information by the categories, And also this from contains the Progress bar in the top of the form it will done by using css3 and Jquery for user reference.

This simple attractive form will done by using css3 and html and validation purpose we used the JavaScript. The form is processed the validation step by step by clicking the next button. Here have a final step to verify the all of your form contents with your data. You can customize this form according to your project. I hope this tutorial  is very useful for the developers.


In this example i used the name, email and country in the first step if you clicked next button without any data you will get the validation error like the below screenshot.In the next step is username and password and confirmation password is given with JavaScript validation, the third step is verification step is to display all your Datas from the form.

This multiple step form is the responsive form it will fit all the device because its done by using bootstrap and html . This multi step form is used to reduce the webpage space as well the user attraction. The below example have the codes and demo page. Check the below demo page for your better understanding of this Three(3) Level form with validation.

multi-step-form-with-validation


Html Code Three step form with Validation:

<div class="container">
<br><br>
<form class="form-horizontal form">
<div class="col-md-8 col-md-offset-2">  
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control" name="country" id="country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
</select>
</div>
</div>
</div>
<div class="step">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" name="username" value="" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" value="" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<input type="password" name="rpassword" class="form-control" id="rpassword" placeholder="Retype password">
</div>
</div>  
</div>
<div class="step display">
<h4>Confirm Details</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Name :</label>
<label class="col-md-10 control-label lbl" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email :</label>
<label class="col-md-10 control-label lbl" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country :</label>
<label class="col-md-10 control-label lbl" data-id="country"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username :</label>
<label class="col-md-10 control-label lbl" data-id="username"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password :</label>
<label class="col-md-10 control-label lbl" data-id="password"></label>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
<button type="button" class="action btn-hot text-capitalize submit btn">Submit</button>
</div>
</div>
</div>

</div>
<a style="color:#fff; float:right;" href="http://www.sanwebcorner.com/"><h3>www.sanwebcorner.com</h3></a>
</div>
</form>
</div>

Javascript for 3 step form with validation:

<script type="text/javascript">
$(document).ready(function(){
var current = 1;

widget      = $(".step");
btnnext     = $(".next");
btnback     = $(".back"); 
btnsubmit   = $(".submit");

// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);

// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});


// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name     : "required",
email    : {required : true, email:true},
country  : "required",
username : "required",
password : "required",
rpassword: { required : true, equalTo: "#password"},
},
});

});

// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}

// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length); 

$(".action").hide();

if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) { 
// Show entered values
$(".display label.lbl").each(function(){
$(this).html($("#"+$(this).data("id")).val());
});
btnnext.hide(); 
btnsubmit.show();
}
}
</script>

Simple Countdown based on Date using JavaScript

This Post help you how to create countdown based on your given date. It automatically takes the countdown using date you are provided. It displays the years, months, days, hours, minutes and seconds. It is very useful display the counter for the event launching and any other new product launching system.This countdown display with animation countdown cube.If you don't want display some fields like years then you should remove the fields in JavaScript. You can able to change the time zone in the below javscript code i am using here Asia/Kolkata the default time zone is UTC, It will convert the utc to Asia/Kolkata. This concept is build with given end time, It automatically calculated the years, months, days, hours, minutes, seconds and display the results in the cube div.



The below html code is used to display the full countdown
<div id='counter' class='counter'></div>
And the countdowncube.css file used design the counter boxes in a perfect manner you can able to change the styles and colors according to your choice to edit the countdowncube.css file. and the countdowncube.js have the javascripts to display the counter you can edit and customize the counters according to your choice.

I hope this simple concept is very useful to you. This example have the demo page please check out the demo page and download the full code and use it to your website.

Countdown based on given date:

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Simple Countdown based on Date using Jquery</title>
<meta name="description" content="Personal Website of Ali Cigari, jack of all trades...">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" href="countdowncube.css">
<style class="inlinestyle">
.counter {
margin: 10 auto;
text-align: center;
}
body
{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id='counter' class='counter'></div>

<script src="countdowncube.js"></script>
<script>
var targetDate = new Date();
targetDate.setMonth(targetDate.getMonth() + 18)
targetDate.setDate(1)
targetDate.setHours(11)
targetDate.setMinutes(0)
targetDate.setSeconds(0)
targetDate.setMilliseconds(0);

var targetDateStringUTC = targetDate.toISOString()
.replace(':00.000', '');
var targetDateString = targetDateStringUTC.replace('Z', '');

var targetLADate = moment.tz(targetDateStringUTC,
'Asia/Kolkata').format();
var tzLAOffset = targetLADate.substr(-6);
var targetDateStringOffset = targetDateString.replace('Z', '')
.replace(':00.000', '') +
tzLAOffset;

var tzOldFormatOffset = targetDateString.substr(-5);
var targetDateOldFormatString = targetDate.toLocaleDateString() +
' ' + tzOldFormatOffset;

var pastDate = new Date();
pastDate.setMonth(targetDate.getMonth() - 18)
pastDate.setMinutes(0);
pastDate.setSeconds(0);
pastDate.setMilliseconds(0);
var targetDateStringPast = pastDate.toISOString()
.replace(':00.000', '');
var nearFutureDate = new Date();
nearFutureDate.setSeconds(nearFutureDate.getSeconds() + 10);
nearFutureDate.setMilliseconds(0);
var nearFutureDateString = nearFutureDate.toISOString()
function reloadCounter(element_id,
new_target,
targetTimezone,
cubeSize,
background,
color,
onEnd,
triggerEnd) {

$(element_id).empty();

$(element_id).countdownCube( {
target: new_target,
targetTimezone: targetTimezone,
cubeSize: cubeSize,
background:  background,
color: color,
onEnd: onEnd,
triggerEnd: triggerEnd,
} );
};
</script>
<script>
$('#counter').countdownCube( {
target: targetDateStringUTC,
cubeSize: 150,
background:  '#ffff00',
color: 'blue',
} );

$('#counter-end-notrigger').countdownCube( {
target: targetDateStringPast,
targetTimezone: 'UTC',
cubeSize: 150,
background:  'lightcyan',
color: 'darkcyan',
/*
target is in the past and triggerEnd is false,
so onEnd is not triggered when the page is loaded
*/
onEnd: function(e) {
$("#counter-end-notrigger")
.text('This was the end, but it was not triggered! ' +
'(counter original target: ' +
e.options.targetDateObject.toISOString() +
')');
}
} );
$('#counter-end-trigger').countdownCube( {
target: targetDateStringPast,
targetTimezone: 'UTC',
cubeSize: 150,
background:  'lightcyan',
color: 'cyan',
onEnd: function(e) {
$("#counter-end-trigger")
.text('This was the end and it was triggered! ' +
'(counter original target: ' +
e.options.targetDateObject.toISOString() +
')');
},
triggerEnd: true,
} );

$('#counter').countdownCube({
target: new Date( 'Feb 10, 2018 7:47:00' ),
cubeSize: 50
});
</script>
</body>
</html>

Test your Password Strength using Jquery

To show the password strength to the customer is one of the important concept, because the user will know  how strong our password and it helps to reset the password when the password is poor. The password is one of the very important field to access their profile so the password should be strong so we need to set the strong password. In the below example have the two different strength validation. 

In the first example the strength meter is in below text box it shows how the password strength. It changes the red color when password is poor and also display the text like your password is too weak.when password is four to eight character it shows the message "Could be stronger" and color is yellow. And the password is above 8 character it shows "password is strong" message and color changes as green.

In the second example same text will display like the above example but there is no strength meter in this instead of this meter it changes the border color of the password text field dynamically based on the password strength 

Here i did the validation using character you can set the password validation using combination of the characters and the numbers and special characters by changing the script validation. Check the below example demo page to see the like demo of the below example. I hope this concept is very useful. 


Code for test Password strength:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Password strength Indicator using Jquery</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Password strength Validation Option1:</h1>
<div class="form-container">
<form class="form-1" action="">
<label>Enter password</label>
<input class="input-1" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
<div class="progress-bar_wrap">
<div class="progress-bar_item progress-bar_item-1"></div>
<div class="progress-bar_item progress-bar_item-2"></div>
<div class="progress-bar_item progress-bar_item-3"></div>
</div>
<span class="progress-bar_text">Password is blank</span>
</form>
</div>
<h1>Password strength Validation Option2:</h1>
<div class="form-container">
<form class="form-4" action="">
<label>Enter password</label>
<input class="input-4" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
<span class="progress-bar_text">Password is blank</span>
</form>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>
</html>