Debit Card Using HTML CSS AND JavaScript

By -

 Debit Card Using HTML CSS AND JavaScript











Please make sure that you are entering valid details, otherwise payment will not get processed. Please cross validate once again.

cvv


HTML

SAVE AS - index.html


<!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>
 




CSS CODE

SAVE AS- style.css

section
{
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.gw-main
{
    text-align: center;
    margin-top: 100px;
    transition: .5s ease-in-out;
}

.gw-main h2
{
    color:#6147d8;
    font-size: 16px;
}

.gw-card-front, .gw-card-back
{
    position:relative;
    width:350px;
    margin-top: 20px;
    background:linear-gradient(to left bottom, #c70909,#12007a);
    border-radius: 9px;
    padding:80px 30px;
    padding-bottom: 40px;
   
}

.gw-card-back
{
    padding-top: 50px;
    padding-bottom: 60px;
}

.gw-card-logo
{
    position:absolute;
    top:10px;
    width:85%;
    display: flex;
    justify-content: space-around;
   
    font-size: 50px;
    color:#fff;
}

.gw-card-info
{
   
    position:absolute;
    top:20px;
    left:50%;
    width:100%;
    transform: translateX(-50%);

}

.gw-card-info p
{
    font-size: 12px;
    padding:5px 20px;
    color:#b6c2e9;

 
   
}

.gw-card-number input
{

    width:80px;
    font-size: 24px;
   
    text-align: center;
    letter-spacing: 2px;
    background:none;
    border:none;
    outline:none;
    color:white;
    font-family: 'Courier New', Courier, monospace;
}

.gw-main input::-webkit-input-placeholder
{
    color:#ada0f84d;
}

.gw-card-number input::-webkit-inner-spin-button
{
    display:none;
}

.gw-card-expire
{
    margin-top: 20px;
    color:#fff;
    text-align: right;
}

.gw-card-expire input
{
    width:70px;
    background:transparent;
    outline:none;
    border:none;
    color:white;
}

.gw-card-expire label
{
    font-size: 13px;
    text-transform: uppercase;
    color:#aaa9a9;
}


.gw-card-back .gw-card-number input{
    visibility: hidden;
}

.gw-card-back .gw-card-expire {
    visibility: hidden;
}

.gw-cvv-cont
{
    display: flex;
   
}

.gw-cvv-before
{
    position:absolute;
    left:10px;
    width:80%;
    background:#ffffff;
    height: 33px;
    text-align: right;
    padding-top: 9px;
    padding-right: 10px;
    color:#7c7c7c;
}

.gw-cvv input
{
    width:10%;
    background:#eae8fa;
    position:absolute;
    right:10px;
    height:40px;
    width:50px;
    border: none;
    outline:none;
    text-align: center;
   
   
}

.gw-cvv input::-webkit-inner-spin-button
{
    display: none;
}

.gw-cvv input::-webkit-input-placeholder
{

    color:#ac96fd71;
}

.gw-card-back
{
 
    transform:rotateY(180deg);
    display: none;
}

.gw-card
{
    transition: .8s ease-in-out;
}



javascript code

save as- animation.js

$(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();
        }
    });

 

 


});


Comments

Post a Comment

Popular posts from this blog

Trading Live Advance Chart Source code HTML CSS & JS

By -
Image
   Trading Live Advance Chart Source code HTML CSS & JS SOURCE CODE html source code  save as---Index.html <! 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 > TRADING live </ title > </ head > < link rel = "stylesheet" href = "style.css" >   <!-- Gaurav tripathi --> < body >     <!-- TradingView Widget BEGIN --> <!-- TradingView Widget BEGIN --> < div class = "tradingview-widget-container" >     < div id = "tradingview_1dcca" ></ div >     < div class = "tradingview-widget-copyright" > < a href = "https://www.tradingview.com/" rel = "noopener nofollow&qu
Read more

How to show live Cryptocurrency Price In your website Using HTML CSS, AND JavaScript

By -
Image
  How to show live Cryptocurrency Price In your website Using HTML CSS, AND JavaScript source code html code  save as Index.html <! 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 > Live Crypto currency Price </ title >     </ head > < body >   <!-- TradingView Widget BEGIN --> < div class = "tradingview-widget-container" >   < div class = "tradingview-widget-container__widget" > </ div >   < div class = "tradingview-widget-copyright" > < a href = "https://www.tradingview.com/" rel = "noopener nofollow" target = "_blank" > < span class = "blue-text" > Track all
Read more

Learn Python 2024 by gaurav tripathi

By -
Image
Project Learn Python By Gaurav Tripathi Python 2024 Crash course is a beginners to advance course free of cost. It covers all the basics and advanced topics in indiamoon youtube. Subcribe Python Crash Course: Part 1 Why Python and How to Learn by Gaurav Tripathi, 2024 full course Learn Python Crash Course: Part 2 Setting Up Your Python Environment | Python Learn by Gaurav Tripathi
Read more