Posts

Showing posts with the label Javascript

Count down timer - Javascript

Image
HTML    < div   class = "counter_outer" >                      < ul >                          < li >                              < ul >                                  < li >< span   class = "daysNumber" > 00 </ span ></ li >                               ...

Google captcha validation with server side

Image
Create Captcha Credential here HTML:         < form   id = "registration"   name = "registration"   action = "#"   method = "POST" >          < input   type = "text"   name = "name"   placeholder = "Name"   />          < input   type = "email"   name = "email"   placeholder = "Email"   />          < input   type = "number"   name = "number"   placeholder = "Mobile Number"   />          < input   type = "password"   name = "password"   placeholder = "Password"   />          < div   class = "form-group" >              < div  ...

Print particular section in Javascript

Image
function   printDiv ( divName ) {   var   date  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 0 ]. innerHTML ;   var   senderNameNumber  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 1 ]. innerHTML ;   var   accountNumber  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 2 ]. innerHTML ;   var   AccountHolderName  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 3 ]. innerHTML ;   var   Amount  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 4 ]. innerHTML ;   var   Tax  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 5 ]. innerHTML ;   var   status  =  divName . parentElement . parentElement . querySelectorAll ( "td" )[ 6 ]. innerText ;   var   data  =...

Input type background color change (Learn)

Image
<!-- HTML -->    < div class = "container mt-5" style = " border-style: double; border-radius: 30px;" >      < div class = "col-md-12" style = " text-align: center;" >        < h3 style = " color: #bd2871;" > Please type any color and let the div change its color </ h3 >        < br >        < div id = "box" style = " background-color: #900c3e; height:200px; width: 100%;" >        </ div >      </ div >      < br >      < div class = "container" >        < div class = "row" >          < div class = "col-md-12" style = " text-align: center;" >         ...

Basic Student report card (Learn)

Image
<!-- HTML -->    < div class = "container mt-5" style = " border: 1px solid black;" >      < div class = "container mt-5" style = " text-align: center;" >        < h1 style = " color: #dc3545" >< u > Student Report </ u ></ h1 >        < br >        < div class = "row" >          < div class = "col-md-2 offset-1" >           English < input type = "text" id = "first" >          </ div >          < div class = "col-md-2" >           Hindi < input type = "text" id = "second" >          ...

18 Years age Validation in Javascript

Image
    function   underAgeValidate ( birthday ){      // it will accept two types of format yyyy-mm-dd and yyyy/mm/dd      var   optimizedBirthday  =  birthday . replace ( /-/ g ,  "/" );      //set date based on birthday at 01:00:00 hours GMT+0100 (CET)      var   myBirthday  =  new   Date ( optimizedBirthday );      // set current day on 01:00:00 hours GMT+0100 (CET)      var   currentDate  =  new   Date (). toJSON (). slice ( 0 , 10 )+ ' 01:00:00' ;      // calculate age comparing current date and borthday      var   myAge  = ~~(( Dat...

Gallery Light Box

Image
Gallery lightbox view See Demo Download Light Gallery Files Code put this code inside <head> tag < link   href = "lightbox/dist/css/lightgallery.css"   rel = "stylesheet" ></ link > HTML Use this code where you want to display light gallery < div >      < ul   id = "lightgallery"   class = "list-unstyled row" >          < li   class = "col-xs-6 col-sm-4 col-md-3"   data-src = "https://picsum.photos/id/494/1500/600" >              < a   href = "" >                  < img   class = "img-responsive"   src = "https://picsum.photos/id/494/200/200" >              </ a > ...