Skip to content

Commit

Permalink
Merge pull request #88 from Prasadpoojary/ATMcard
Browse files Browse the repository at this point in the history 
At mcard
  • Loading branch information
@pulkit-30
pulkit-30 authored Oct 31, 2021
2 parents 0e7b40d + decaf63 commit ae52eed
Show file tree
Hide file tree
Showing 5 changed files with 420 additions and 0 deletions.
Binary file added ATM Card Input/Capture.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions ATM Card Input/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# ATM Card

![Project Screenshot](https://github.com/Prasadpoojary/Frontend-Animations/blob/ATMcard/ATM%20Card%20Input/Capture.PNG?raw=true)

[Prasad Poojary](https://github.com/Prasadpoojary)

[View Project](https://prasadpoojary.github.io/Frontend-Animations/ATM%20Card%20Input/)



153 changes: 153 additions & 0 deletions ATM Card Input/animation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
$(document).ready(function () {

$(".gw-cn-one").focus();


$(".gw-cn-one").on('input',function(e)
{


if($(this).val().length==4)
{
$(".gw-cn-two").focus();

}

});

$(".gw-cn-two").on('input',function(e)
{


if($(this).val().length==4)
{
$(".gw-cn-three").focus();

}

});
$(".gw-cn-three").on('input',function(e)
{


if($(this).val().length==4)
{
$(".gw-cn-four").focus();

}

});

$(".gw-cn-four").on('input',function(e)
{


if($(this).val().length==4)
{
$(".gw-ce-date").focus();

}

});
$(".gw-ce-date").on('input',function(e)
{
if($(this).val().length==1)
{
try
{
if(Number($(this).val())>1)
{

$(".gw-card-expire label").html("invalid thru").css("color","red");
}
else
{

$(".gw-card-expire label").html("valid thru").css("color","#aaa9a9");
}

}
catch(error)
{
alert(error);
$(".gw-card-expire label").html("invalid thru").css("color","red");
}

}

if($(this).val().length==2)
{
try
{
if(Number($(this).val()>12))
{
$(".gw-card-expire label").html("invalid thru").css("color","red");
}
else
{
$(".gw-card-expire label").html("valid thru").css("color","#aaa9a9");
$(this).val($(this).val()+"/");
}

}


catch(error)
{
$(".gw-card-expire label").html("invalid thru").css("color","red");
}
}

if($(this).val().length==5)
{
if(Number($(this).val().split("/")[1])<22) // {12,22}
{
$(this).val($(this).val().split("/")[0]+"/");
$(".gw-card-expire label").html("invalid thru").css("color","red");
}
else if($(".gw-cn-one").val().length!=4 || $(".gw-cn-two").val().length!=4 || $(".gw-cn-three").val().length!=4 || $(".gw-cn-four").val().length!=4)
{
$(".gw-card-expire label").html("valid thru").css("color","#aaa9a9");
}
else
{
$(".gw-card-expire label").html("valid thru").css("color","#aaa9a9");

setTimeout(function()
{
$(".gw-card").css('transform','rotateY(180deg)');
$(".gw-card-front").css('display','none');
$(".gw-card-back").css('display','block');
$(".gw-card-back div").css('visibility','hidden');
},
100);
setTimeout(function()
{
$(".gw-card-back div").css('visibility','visible');
$(".gw-cvv input").focus();

},
500);
}




}

});

$(".gw-cvv input").on("input",function(){
if($(this).val().length==3)
{
$("#cardPaymentForm").submit();
$(".gw-cvv input").blur();
}
});






});
74 changes: 74 additions & 0 deletions ATM Card Input/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debit Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="animation.js"></script>
</head>
<body>

<section class="container">

<div class="gw-main">

<form method="post" action="/payment" id="cardPaymentForm">
<div class="gw-card">
<div class="gw-card-front">
<div class="gw-card-logo">
<i class="fa fa-credit-card"></i>
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-discover"></i>
<i class="fab fa-cc-amex"></i>
</div>
<div class="gw-card-number">
<input type="number" class="gw-cn-one" placeholder="3734" name="" id="">
<input type="number" class="gw-cn-two"placeholder="2352" name="" id="">
<input type="number" class="gw-cn-three" placeholder="8697" name="" id="">
<input type="number" class="gw-cn-four" placeholder="3423" name="" id="">
</div>
<div class="gw-card-expire">
<label>Valid Thru</label>
<input placeholder="07/22" class="gw-ce-date" type="text">
</div>
</div>
<div class="gw-card-back">
<div class="gw-card-info">
<p>Please make sure that you are entering valid details, otherwise payment will not get processed. Please cross validate once again.</p>
</div>
<div class="gw-card-number">
<input type="number" class="gw-cn-one" placeholder="3734" name="" id="">
<input type="number" class="gw-cn-two" placeholder="2352" name="" id="">
<input type="number" class="gw-cn-three" placeholder="8697" name="" id="">
<input type="number" class="gw-cn-four" placeholder="3423" name="" id="">
</div>
<div class="gw-cvv-cont">
<div class="gw-cvv-before">
cvv
</div>
<div class="gw-cvv">
<input type="number" placeholder="348" name="" id="">
</div>
</div>
<div class="gw-card-expire">
<label>Valid Thru</label>
<input placeholder="07/22" class="gw-ce-date" type="text">
</div>
</div>
</div>
</form>
</div>


</section>

</body>
</html>

Loading

0 comments on commit ae52eed

Please sign in to comment.