.container
.cc
.cc-container
.brand-chip
.chip
i.fas.fa-microchip.fa-lg.fa-rotate-90
.brand
p Card Info
.info-container
.number
input.input(
placeholder="0000"
type="number"
tabindex="0"
onKeyPress="if(this.value.length==4) return false;")
input.input(
placeholder="0000"
type="number"
tabindex="1"
onKeyPress="if(this.value.length==4) return false;")
input.input(
placeholder="0000"
type="number"
tabindex="2"
onKeyPress="if(this.value.length==4) return false;")
input.input(
placeholder="0000"
type="number"
tabindex="3"
onKeyPress="if(this.value.length==4) return false;")
.bottom-info
.info-input
.date
input.input(
placeholder="00"
type="number"
tabindex="4"
onKeyPress="if(this.value.length==2) return false;")
p /
input.input(
placeholder="00"
type="number"
min="0"
max="99"
tabindex="5"
onKeyPress="if(this.value.length==2) return false;")
.type
.visa.hidden
i.fab.fa-cc-visa(style="font-size: 1.8em")
.master.hidden
i.fab.fa-cc-mastercard(style="font-size: 1.8em")
.amex.hidden
i.fab.fa-cc-amex(style="font-size: 1.8em")
.discover.hidden
i.fab.fa-cc-discover(style="font-size: 1.8em")
.default-card
i.fas.fa-credit-card(style="font-size: 1.8em")
.name
input.input(
placeholder="FIRST"
maxlength="13"
tabindex="6")
input.input(
placeholder="LAST"
maxlength="13"
tabindex="7")
.cvc-button-container
p CVC
.cvc-button
i.fas.fa-sort-down.fa-lg
.cvc
input.input.cvc-input(
placeholder="000"
type="number"
tabindex="8"
onKeyPress="if(this.value.length==3) return false;")$radius: 15px
@keyframes inputValid
0%
z-index: -1
99%
z-index: -1
100%
z-index: 4
@keyframes inputInvalid
0%
z-index: 4
1%
z-index: -1
100%
z-index: -1
@keyframes slideDown
0%
transform: translateY(-30px)
100%
transform: translateY(0px)
@keyframes slideUp
0%
transform: translateY(0px)
100%
transform: translateY(-30px)
@keyframes rotateDown
0%
transform: rotate(-90deg)
100%
transform: rotate(0deg)
@keyframes rotateUp
0%
transform: rotate(0deg)
100%
transform: rotate(-90deg)
.cvc-hidden
animation: slideUp 1s cubic-bezier(.03,.71,.7,.94) forwards
.cvc-show
animation: slideDown 1s cubic-bezier(.03,.71,.7,.94) forwards
.cvc-button-down
animation: rotateDown 1s cubic-bezier(.03,.71,.7,.94) forwards
.cvc-button-up
animation: rotateUp 1s cubic-bezier(.03,.71,.7,.94) forwards
.cvc-input-show
animation: inputValid 1s cubic-bezier(.03,.71,.7,.94) forwards
.cvc-input-hide
animation: inputInvalid 1s cubic-bezier(.03,.71,.7,.94) forwards
input[type='number']
-moz-appearance:textfield
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button
-webkit-appearance: none
margin: 0
.input
border: none
outline: none
background-color: rgba(0,0,0,0)
color: white
.input::placeholder
color: white
.number
.input
width: 20%
font-size: 22px
input:focus
border-bottom: 2px solid white
.date
.input
width: 24px
margin-left: 3px
font-size: 18px
p
padding-top: 3px
.name
.input
width: 50%
margin-left: 10px
font-size: 16px
text-transform: uppercase
.info-container
height: 60%
width: 100%
.number
width: 100%
height: 35%
display: flex
flex-direction: row
justify-content: space-around
align-items: center
.bottom-info
width: 100%
height: 50%
display: flex
flex-direction: row
.type
height: 100%
width: 40%
display: flex
align-items: center
justify-content: center
.info-input
height: 100%
width: 100%
display: flex
flex-direction: column
align-items: flex-end
justify-content: center
.date
width: 100%
height: 50%
display: flex
justify-content: flex-end
align-items: center
.name
width: 100%
height: 50%
display: flex
flex-direction: row
justify-content: center
align-items: center
margin-left: 20%
.brand-chip
border-top-left-radius: $radius
border-top-right-radius: $radius
height: 40%
width: 100%
display: flex
flex-direction: row
.chip
display: flex
justify-content: flex-start
padding-left: 15px
align-items: center
width: 50%
.brand
display: flex
width: 50%
height: 100%
justify-content: center
align-items: flex-start
.cvc
position: absolute
z-index: -1
width: 50px
height: 20px
position: relative
background-color: rgb(100,100,200)
display: flex
flex-direction: row
align-items: center
justify-content: center
font-size: 14px
margin-right: 20px
border-bottom-right-radius: 8px
border-bottom-left-radius: 8px
padding: 4px 0px
.input
width: 100%
padding-left: 9px
font-size: 16px
margin-bottom: 2px
.input::placeholder
font-size: 16px
.cvc-button-container:hover
cursor: pointer
.cvc-button-container
position: absolute
width: 50px
height: 10px
padding-bottom: 12px
padding-right: 20px
background-color: rgba(0,0,0,0)
border-bottom-right-radius: $radius
bottom: 35px
right: 0px
display: flex
align-items: center
justify-content: space-around
p
font-size: 14px
margin-bottom: 4px
margin-right: 5px
.cvc-button
margin-top: 10px
.cc-container
display: flex
flex-direction: column
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.4)
background: linear-gradient(35deg, red -100%, blue 100%)
border-radius: $radius
height: 175px
.cc
width: 300px
height: 210px
position: relative
background-color: rgba(0,0,0,0)
border-radius: $radius
margin-top: 20px
display: flex
flex-direction: column
align-items: flex-end
color: white
.hidden
display: none
.container
display: flex
align-self: center
justify-content: center
width: 350px
height: 400px
margin-top: 100px
body
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
font-family: Helvetica
background: white
const cvcButtonListener = () => {
cvcButtonContainer.addEventListener('click', () => slideCvc(cvc, cvcButton, cvcInput));
}
const show = (cvc, button, input) => {
cvc.classList.remove('cvc-hidden');
cvc.classList.add('cvc-show');
input.classList.remove('cvc-input-show-hide');
input.classList.add('cvc-input-show');
button.classList.remove('cvc-button-up');
button.classList.add('cvc-button-down');
$('.cvc .input').focus();
}
const hide = (cvc, button, input) => {
cvc.classList.remove('cvc-show');
button.classList.remove('cvc-button-down');
input.classList.remove('cvc-input-show-show');
input.classList.add('cvc-input-hide');
cvc.classList.add('cvc-hidden');
button.classList.add('cvc-button-up');
$('.cvc .input').blur();
}
const slideCvc = (cvc, button, input) => {
let hidden = false;
const classList = Object.values(cvc.classList);
for( let i = 0; i < classList.length; i++) {
if(classList[i] === "cvc-hidden")
hidden = true
}
if(hidden === true) {
show(cvc, button, input)
} else {
hide(cvc, button, input)
}
}
const tabNumbers = () => {
const max = 4;
const numberInputs = document.querySelectorAll('.number .input');
numberInputs[0].focus();
$('.number .input').on('keyup', (e) => {
cardType(numberInputs[0]);
const length = e.currentTarget.value.length;
const curIndex = e.currentTarget.tabIndex;
if(length >= max) {
for(let i = 0; i < max; i++){
const index = parseInt(numberInputs[i].attributes.tabIndex.value, 10);
if(curIndex+1 == 4) {
const date = document.querySelectorAll('.date input')[0];
date.focus();
break;
}
if(index == (curIndex+1)) {
numberInputs[i].focus();
break;
}
}
}
});
}
const tabDates = () => {
const max = 2;
const dateInputs = document.querySelectorAll('.date .input');
$('.date .input').on('keyup', (e) => {
const length = e.currentTarget.value.length;
const curIndex = e.currentTarget.tabIndex;
if(length >= max) {
for(let i = 0; i < max; i++){
const index = parseInt(dateInputs[i].attributes.tabIndex.value, 10);
if(curIndex+1 == 6) {
const name = document.querySelectorAll('.name .input')[0];
name.focus();
break;
}
if(index == (curIndex+1)) {
dateInputs[i].focus();
break;
}
}
}
});
}
const nameEnter = () => {
const nameInputs = document.querySelectorAll('.name .input');
$('.name .input').on('keydown', (e) => {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
const key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
e.preventDefault();
}
}
const curIndex = e.currentTarget.tabIndex;
if(e.which === 13) {
if(curIndex === 6) {
nameInputs[1].focus();
}
if(curIndex === 7) {
document.querySelector('.cvc .input').focus();
show(cvc, cvcButton, cvcInput);
}
}
});
}
const cvcEnter = () => {
$('.cvc .input').on('keydown', (e) => {
if(e.which === 13) {
hide(cvc, cvcButton, cvcInput);
}
});
}
const cardType = (e) => {
const num = parseInt(e.value[0]);
if(num === 4){
// Visa
$('.visa').removeClass('hidden');
$('.discover').addClass('hidden');
$('.amex').addClass('hidden');
$('.master').addClass('hidden');
$('.default-card').addClass('hidden');
} else if(num === 5){
// MasterCard
$('.master').removeClass('hidden');
$('.discover').addClass('hidden');
$('.amex').addClass('hidden');
$('.visa').addClass('hidden');
$('.default-card').addClass('hidden');
} else if(num === 3){
// Amex
$('.amex').removeClass('hidden');
$('.discover').addClass('hidden');
$('.visa').addClass('hidden');
$('.master').addClass('hidden');
$('.default-card').addClass('hidden');
} else if(num === 6){
// Discover
$('.discover').removeClass('hidden');
$('.visa').addClass('hidden');
$('.amex').addClass('hidden');
$('.master').addClass('hidden');
$('.default-card').addClass('hidden');
} else {
$('.default-card').removeClass('hidden');
$('.discover').addClass('hidden');
$('.amex').addClass('hidden');
$('.master').addClass('hidden');
$('.visa').addClass('hidden');
}
}
const cvcButtonContainer = document.getElementsByClassName('cvc-button-container')[0];
const cvc = document.getElementsByClassName('cvc')[0];
const cvcButton = document.getElementsByClassName('cvc-button')[0];
const cvcInput = document.getElementsByClassName('cvc-input')[0];
const numberInputs = document.querySelectorAll('.number .input');
window.onload = () => {
hide(cvc, cvcButton, cvcInput);
cvcButtonListener();
tabNumbers();
tabDates();
nameEnter();
cvcEnter();
cvcClick();
}
External CSS
This Pen doesn't use any external CSS resources.