Default page

Edit File: main.js

// Credit: Mateusz Rybczonec

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 150;
const ALERT_THRESHOLD = 75;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

const TIME_LIMIT = 300;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;

document.getElementById("app").innerHTML = `
<div class="base-timer">

<div class="timer-container"> <span id="base-timer-label" class="base-timer__label">${formatTime(
    timeLeft
  )}</span>
  <span class="mins">mins</span>
  </div>

</div>
`;

startTimer();

function onTimesUp() {
  clearInterval(timerInterval);
}

function startTimer() {
  timerInterval = setInterval(() => {
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );

if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

if (seconds < 10) {
    seconds = `0${seconds}`;
  }

return `${minutes}:${seconds}`;
}

// Select your card section

$(document).ready(function() {
      var selectedmonth;
      var selectedyear;

$('.onlynum').keypress(function (e) {
              var charCode = (e.which) ? e.which : event.keyCode
              if (String.fromCharCode(charCode).match(/[^0-9]/g))
              return false;
          });
          $( ".txtonly" ).keypress(function(e) {
              var key = e.keyCode;
              if (key >= 48 && key <= 57) {
                  e.preventDefault();
              }
        });

$("#cc-exp-month").change(function(){
          selectedmonth = $(this).children("option:selected").val();
          $(".mon_value").text($(this).val());
          $('#card_expiry').removeClass('error');
          $('#card_expiry').removeClass('focus-color');
          $(this).css('color','#fff');
          $(this).addClass('arrow-color');
      });
      $("#cc-exp-year").change(function(){
          selectedyear = $(this).children("option:selected").val();
          $(".year_value").text($(this).val());
          $('#card_expiry').removeClass('error');
          $('#card_expiry').removeClass('focus-color');
          $(this).css('color','#fff');
          $(this).addClass('arrow-color');
      });

$("#cc-exp-year").focus(function() {
          $('#card_expiry').addClass('focus-color');
          $(this).css('color','#fff');
      }).focusout(function() {
          $('#card_expiry').removeClass('focus-color');
        });
        $("#cc-exp-month").focus(function() {
          $(this).css('color','#fff');
          $('#card_expiry').addClass('focus-color');
      }).focusout(function() {
          $('#card_expiry').removeClass('focus-color');
        });

});

//// /////////////////    ////////////////     Card Validation           /////////////////////////// ////////////////////// ///////////

$(function() {

var cards = [{
            nome: "mastercard",
            colore: "#283b4b",
            src: "/new_ui/images/Mastercard-logo.png"
        }, {
            nome: "visa",
            colore: "#17579f",
            src: "/new_ui/images/Visa_Inc.png"
        },
        {
            nome: "americanExpress",
            colore: "#108168",
            src: "/new_ui/images/American_Express_logo.svg.png"
        }, {
            nome: "discover",
            colore: "#64656a",
            src: "/new_ui/images/discover-it-for-students-credit-card.jpg"
        }, {
            nome: "dankort",
            colore: "#2d596e",
            src: "/new_ui/images/Dankort_logo.png"
        }, {
            nome: "rupay",
            colore: "#272974",
            src: "/new_ui/images/rupay.png"

}
    ];

var html = document.getElementsByTagName('html')[0];
    var number = "";

var selected_card = -1;

$(document).click(function(e) {
        if (!$(e.target).is(".ccv") || !$(e.target).closest(".ccv").length) {
            $(".card").css("transform", "rotatey(0deg)");
            $(".seccode").css("color", "var(--text-color)");
        }
        if (!$(e.target).is(".expire") || !$(e.target).closest(".expire").length) {
           $(".date_value").css("color", "var(--text-color)");
        }
        if (!$(e.target).is(".number") || !$(e.target).closest(".number").length) {
            $(".card_number").css("color", "var(--text-color)");
        }
        if (!$(e.target).is(".inputname") || !$(e.target).closest(".inputname").length) {
            $(".fullname").css("color", "var(--text-color)").css("text-transform", "uppercase");
        }
    });

$(function() {
        $('.onlyText').keydown(function(e) {
            if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
            } else {
                var key = e.keyCode;
                if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
                    e.preventDefault();
                }
            }
        });
    });

$(".Number").keyup(function(event) {
        $(".card_number").text($(this).val());
        number = $(this).val();

if (parseInt(number.substring(0, 2)) > 50 && parseInt(number.substring(0, 2)) < 56) {
            selected_card = 0;
        } else if (parseInt(number.substring(0, 1)) == 4) {
            selected_card = 1;
        } else if (parseInt(number.substring(0, 2)) == 34 || parseInt(number.substring(0, 2)) == 37) {
            selected_card = 2;
        } else if (parseInt(number.substring(0, 2)) == 65) {
            selected_card = 3;
        } else if (parseInt(number.substring(0, 4)) == 5019) {
            selected_card = 4;
        } else if (parseInt(number.substring(0, 2)) == 60) {
            selected_card = 5;
        } else {
            selected_card = -1;
        }

if (selected_card != -1) {
            html.setAttribute("style", "--card-color: " + cards[selected_card].colore);
            $(".bankid").attr("src", cards[selected_card].src).show();
        } else {
            html.setAttribute("style", "--card-color: var(--card-color)");
            $(".bankid").attr("src", "").hide();
        }

if ($(".card_number").text().length === 0) {
            $(".card_number").html("●●●● ●●●● ●●●● ●●●●");
        }

}).focus(function() {
        $(".card_number").css("color", "white");
    }).on("keydown input", function() {

$(".card_number").text($(this).val());

if (event.key >= 0 && event.key <= 9) {
            if ($(this).val().length === 4 || $(this).val().length === 9 || $(this).val().length === 14) {
                $(this).val($(this).val() + " ");
            }
        }
    })

//Name Input
    $(".onlyText").keyup(function() {
        $(".fullname").text($(this).val());
        if ($(".onlyText").val().length === 0) {
            $(".fullname").text("FULL NAME");
        }
        return event.charCode;
    }).focus(function() {
        $(".fullname").css("color", "white");
    });

var cname;
    var cnum;
    var ccv_val;
    $(".input input").bind('keyup mouseup', function() {
        $('.err').hide();
        cname = $(".onlyText").val();
        cnum = $(".Number").val();
        ccv_val = $(".ccv").val();
        cnum.length = 0;
        ccv_val.length = 0;
        if ((cname != "") && (cnum != "") && (ccv_val != "")) {
            $('.buy').css({ 'cursor': 'pointer', 'opacity': '1', 'pointer-events': 'auto' });
        } else {
            $('.buy').css({ 'cursor': 'default', 'opacity': '0.3', 'pointer-events': 'none' })
        }
    });

//////////////////////////////////////////////////////////////////////////////////////////////////

//Security code Input
    $(".ccv").focus(function() {
        $(".card").css("transform", "rotatey(180deg)");
        $(".seccode").css("color", "white");
    }).keyup(function() {
        $(".seccode").text($(this).val());
        if ($(this).val().length === 0) {
            $(".seccode").html("●●●");
        }
    }).focusout(function() {
        $(".card").css("transform", "rotatey(0deg)");
        $(".seccode").css("color", "var(--text-color)");
    });

});

// creditcard pay btn validation
$('body').on('click', '#credit_card_pay_btn', function() {
  var cardName = $('#card_name').val();
  var cardNumber = $('#card_num').val();
  var cardCvc = $('#card_cvc').val();
  var cardMonth= $('#cc-exp-month').val();
  var cardYear= $('#cc-exp-year').val();
  var today = new Date();
  var expDate = new Date($("#cc-exp-year").val(),($("#cc-exp-month").val()-1));
  var cvvalid = /^[0-9]{3,4}$/;
  var cvvArray = cvvalid.exec(cardCvc);

var cc = $('#card_num');
    var ccval = cc.val();
    var len = ccval.length;

if (cardName == '') {
      $('#card_name').addClass('error');
       }else if (cardNumber == '' || len < 19) {
        $('#card_num').addClass('error');
    }
    else if(cardMonth == '' || cardYear == '' ) {
      $('#cc-exp-month').removeClass('arrow-color');
      $('#cc-exp-year').removeClass('arrow-color');
      $('#card_expiry').validate({
          rules: {
            cardExpYear: {
              CCExp: {
                month: '#cc-exp-month',
                year: '#cc-exp-year'
              }
            }
          }
        });

$.validator.addMethod('CCExp', function(value, element, params) {
          var minMonth = new Date().getMonth() + 1;
          var minYear = new Date().getFullYear();
          var month = parseInt($(params.month).val(), 10);
          var year = parseInt($(params.year).val(), 10);
          return (!month || !year || year > minYear || (year === minYear && month >= minMonth));
        });
        $('#card_expiry').addClass('error');
    }
     else if(today.getTime() > expDate.getTime()) {
          $('#card_expiry').addClass('error');
          $('#cc-exp-month').removeClass('arrow-color');
          $('#cc-exp-year').removeClass('arrow-color');
      }

else if (cardCvc == '') {
        $('#card_cvc').addClass('error');
    } else if(cardCvc!=cvvArray) {
      $('#card_cvc').addClass('error');
      }
    else {
        console.log(cardName);
        console.log(cardNumber);
        console.log(cardMonth,cardYear);
        console.log(cardCvc);

payCard(cardNumber,cardName,cardCvc,cardMonth,cardYear);

$('#card_num').removeClass('error');
        $('#card_name').removeClass('error');
        $('#card_cvc').removeClass('error');
        $('#card_expiry').removeClass('error');
        $('#card_num').prop( "disabled", true );
        $('#card_name').prop( "disabled", true );
        $('#card_cvc').prop( "disabled", true );
        $('#cc-exp-month').removeClass('arrow-color');
          $('#cc-exp-year').removeClass('arrow-color');
        $('#cc-exp-month, #cc-exp-year').prop( "disabled", true );
    }

});