<repo_name>AstR0x/credit-card<file_sep>/src/index.js
const cardFront = document.querySelector('.credit-card__front');
const cardNumber = document.querySelector('.credit-card__front__card-number');
const bankLogo = document.querySelector('.credit-card__front__bank-logo');
const bankBrand = document.querySelector('.credit-card__front__bank-brand');
const codeNameInput = document.querySelector('.credit-card__back__code-name-input');
const validityPeriod = document.querySelector('.credit-card__front__validity-period');

cardNumber.oninput = function (event) {
  const number = event.target.value.trim();
  if (number.length > 5) {
    const cardInfo = new CardInfo(number, {
      banksLogosPath: './../node_modules/card-info/dist/banks-logos/',
      brandsLogosPath: './../node_modules/card-info/dist/brands-logos/',
    });
    if (cardInfo.bankLogoSvg) {
      bankLogo.src = cardInfo.bankLogoSvg || cardInfo.bankLogoPng;
      bankBrand.src = cardInfo.brandLogoSvg || cardInfo.brandLogoPng;
      cardFront.style.background = cardInfo.backgroundGradient;
      codeNameInput.placeholder = cardInfo.codeName;
      validityPeriod.style.color = cardInfo.textColor;
    }
  }
};