Validación del código PIN del estilo iOS con JavaScript y CSS3

Vista prévia

Descripción

Un validador de código PIN interactivo, animado y fresco, hecho con JavaScript y CSS/CSS3, similar a la interfaz de contraseña de iOS.

Funcionamiento

Cree el código HTML para el validador de códigos PIN.

<div id="pin">

<div class="dots">


<div class="dot"></div>


<div class="dot"></div>


<div class="dot"></div>


<div class="dot"></div>

</div>

<p>Enter the password</p>

<div class="numbers">


<div class="number">1</div>


<div class="number">2</div>


<div class="number">3</div>


<div class="number">4</div>


<div class="number">5</div>


<div class="number">6</div>


<div class="number">7</div>


<div class="number">8</div>


<div class="number">9</div>

</div>
</div>

Los estilos primarios CSS/CSS3.

body.wrong {

-webkit-animation: bg-red 1s ease-in;

animation: bg-red 1s ease-in;
}

body.correct {

-webkit-animation: bg-green 1s ease-in;

animation: bg-green 1s ease-in;
}

#pin {

background: #212121;

width: 20em;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

padding: 1em;

border-radius: .3em;

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);

margin: auto;

color: rgba(255, 255, 255, 0.2);
}

.dots {

width: 50%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

padding: 1em;

padding-top: 3em;
}

.dot {

position: relative;

background: rgba(255, 255, 255, 0.2);

border-radius: 0.8em;

width: 0.8em;

height: 0.8em;

-webkit-transform: scale3d(0.7, 0.7, 0.7);

transform: scale3d(0.7, 0.7, 0.7);
}

.dot.active {

-webkit-animation: growDot .5s ease;

animation: growDot .5s ease;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;
}

.dot.wrong {

-webkit-animation: wrong .9s ease;

animation: wrong .9s ease;
}

.dot.correct {

-webkit-animation: correct .9s ease;

animation: correct .9s ease;
}

#pin p { font-size: .8em; }

.numbers {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row wrap;

-ms-flex-flow: row wrap;

flex-flow: row wrap;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

-webkit-align-content: flex-end;

-ms-flex-line-pack: end;

align-content: flex-end;

margin: 2em 0;
}

.number {

position: relative;

width: 2.5em;

height: 2.5em;

margin: 0.5em;

border-radius: 2.5em;

border: 2px solid rgba(255, 255, 255, 0);

text-align: center;

line-height: 2.5em;

font-weight: 400;

font-size: 1.8em;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-transition: all .5s ease;

transition: all .5s ease;
}

.number:hover { color: rgba(255, 255, 255, 0.5); }

.number:hover:before { border: 2px solid rgba(255, 255, 255, 0.5); }

.number:before {

content: "";

position: absolute;

left: -2px;

width: 2.5em;

height: 2.5em;

border: 2px solid rgba(255, 255, 255, 0.1);

border-radius: 2.5em;

-webkit-transition: all .5s ease;

transition: all .5s ease;
}

.number.grow:before {

-webkit-animation: grow .6s ease;

animation: grow .6s ease;
}

Las animaciones CSS3.

@-webkit-keyframes
 growDot {
100% {
 background: white;
 -webkit-transform: scale3d(0.9, 0.9, 0.9);
 transform: scale3d(0.9, 0.9, 0.9);
}
}

@keyframes
 growDot {
100% {
 background: white;
 -webkit-transform: scale3d(0.9, 0.9, 0.9);
 transform: scale3d(0.9, 0.9, 0.9);
}
}

@-webkit-keyframes
 grow {
50% {
 -webkit-transform: scale3d(1.5, 1.5, 1.5);
 transform: scale3d(1.5, 1.5, 1.5);
}
 100% {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

@keyframes
 grow {
50% {
 -webkit-transform: scale3d(1.5, 1.5, 1.5);
 transform: scale3d(1.5, 1.5, 1.5);
}
 100% {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

@-webkit-keyframes
 wrong {
20% {
 background: crimson;
}
 40% {
 -webkit-transform: translate(-15px, 0);
 transform: translate(-15px, 0);
}
 60% {
 -webkit-transform: translate(10px, 0);
 transform: translate(10px, 0);
}
 80% {
 -webkit-transform: translate(-5px, 0);
 transform: translate(-5px, 0);
}
}

@keyframes
 wrong {
20% {
 background: crimson;
}
 40% {
 -webkit-transform: translate(-15px, 0);
 transform: translate(-15px, 0);
}
 60% {
 -webkit-transform: translate(10px, 0);
 transform: translate(10px, 0);
}
 80% {
 -webkit-transform: translate(-5px, 0);
 transform: translate(-5px, 0);
}
}

@-webkit-keyframes
 correct {
20% {
 background: limegreen;
}
 40% {
 -webkit-transform: translate(0, -15px);
 transform: translate(0, -15px);
}
 60% {
 -webkit-transform: translate(0, 10px);
 transform: translate(0, 10px);
}
 80% {
 -webkit-transform: translate(0, -5px);
 transform: translate(0, -5px);
}
}

@keyframes
 correct {
20% {
 background: limegreen;
}
 40% {
 -webkit-transform: translate(0, -15px);
 transform: translate(0, -15px);
}
 60% {
 -webkit-transform: translate(0, 10px);
 transform: translate(0, 10px);
}
 80% {
 -webkit-transform: translate(0, -5px);
 transform: translate(0, -5px);
}
}

@-webkit-keyframes
 bg-red {
50% {
 background: crimson;
}
}

@keyframes
 bg-red {
50% {
 background: crimson;
}
}

@-webkit-keyframes
 bg-green {
50% {
 background: limegreen;
}
}

@keyframes
 bg-green {
50% {
 background: limegreen;
}
}

El núcleo JavaScript para activar el validador de código PIN.

(function() {

var input
 = "",


correct = "1593"; // pin code



var dots

= document.querySelectorAll(".dot"),


 numbers = document.querySelectorAll(".number");


dots

= Array.prototype.slice.call(dots);


numbers = Array.prototype.slice.call(numbers);



numbers.forEach(function(number, index) {


number.addEventListener('click', function() {



number.className += ' grow';



input += (index+1);



dots[input.length-1].className += ' active';



if(input.length >= 4) {




if(input !== correct) {





dots.forEach(function(dot, index) {






dot.className += " wrong";





});





document.body.className += " wrong";




}




else {





dots.forEach(function(dot, index) {






dot.className += " correct";





});





document.body.className += " correct";




}




setTimeout(function() {





dots.forEach(function(dot, index) {






dot.className = "dot";





});





input = "";




}, 900);




setTimeout(function() {





document.body.className = "";




}, 1000);



}



setTimeout(function() {




number.className = 'number';



}, 1000);


});

});
})();