Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="payment">
    
    <div class="payment__shadow-dots"></div>
    <div class="payment__dots">
      <svg width="65" height="115" viewBox="0 0 65 115" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="17.5" cy="2.5" r="2.5" fill="#E0ECF7"/>
        <circle cx="32.5" cy="2.5" r="2.5" fill="#E0ECF7"/>
        <circle cx="47.5" cy="2.5" r="2.5" fill="#E0ECF7"/>
        <circle cx="2.5" cy="2.5" r="2.5" fill="#E0ECF7"/>
        <circle cx="17.5" cy="12.5" r="2.5" transform="rotate(90 17.5 12.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="12.5" r="2.5" transform="rotate(90 32.5 12.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="12.5" r="2.5" transform="rotate(90 47.5 12.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="42.5" r="2.5" transform="rotate(90 17.5 42.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="62.5" r="2.5" transform="rotate(90 47.5 62.5)" fill="#E0ECF7"/>
        <circle cx="62.5" cy="2.5" r="2.5" transform="rotate(90 62.5 2.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="82.5" r="2.5" transform="rotate(90 47.5 82.5)" fill="#E0ECF7"/>
        <circle cx="62.5" cy="22.5" r="2.5" transform="rotate(90 62.5 22.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="42.5" r="2.5" transform="rotate(90 47.5 42.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="42.5" r="2.5" transform="rotate(90 32.5 42.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="62.5" r="2.5" transform="rotate(90 32.5 62.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="22.5" r="2.5" transform="rotate(90 17.5 22.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="22.5" r="2.5" transform="rotate(90 32.5 22.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="22.5" r="2.5" transform="rotate(90 47.5 22.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="52.5" r="2.5" transform="rotate(90 17.5 52.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="72.5" r="2.5" transform="rotate(90 17.5 72.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="72.5" r="2.5" transform="rotate(90 47.5 72.5)" fill="#E0ECF7"/>
        <circle cx="62.5" cy="12.5" r="2.5" transform="rotate(90 62.5 12.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="92.5" r="2.5" transform="rotate(90 47.5 92.5)" fill="#E0ECF7"/>
        <circle cx="62.5" cy="32.5" r="2.5" transform="rotate(90 62.5 32.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="52.5" r="2.5" transform="rotate(90 47.5 52.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="52.5" r="2.5" transform="rotate(90 32.5 52.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="32.5" r="2.5" transform="rotate(90 17.5 32.5)" fill="#E0ECF7"/>
        <circle cx="32.5" cy="32.5" r="2.5" transform="rotate(90 32.5 32.5)" fill="#E0ECF7"/>
        <circle cx="47.5" cy="32.5" r="2.5" transform="rotate(90 47.5 32.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="62.5" r="2.5" transform="rotate(90 17.5 62.5)" fill="#E0ECF7"/>
        <circle cx="17.5" cy="82.5" r="2.5" transform="rotate(90 17.5 82.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="92.5" r="2.5" transform="rotate(90 2.5 92.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="112.5" r="2.5" transform="rotate(90 2.5 112.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="72.5" r="2.5" transform="rotate(90 2.5 72.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="82.5" r="2.5" transform="rotate(90 2.5 82.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="102.5" r="2.5" transform="rotate(90 2.5 102.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="12.5" r="2.5" transform="rotate(90 2.5 12.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="42.5" r="2.5" transform="rotate(90 2.5 42.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="22.5" r="2.5" transform="rotate(90 2.5 22.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="52.5" r="2.5" transform="rotate(90 2.5 52.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="32.5" r="2.5" transform="rotate(90 2.5 32.5)" fill="#E0ECF7"/>
        <circle cx="2.5" cy="62.5" r="2.5" transform="rotate(90 2.5 62.5)" fill="#E0ECF7"/>
      </svg>
      </div>
    
    <div class="card">
      
      <div class="card__visa">
        <svg class="visa" enable-background="new 0 0 291.764 291.764" version="1.1" viewbox="5 70 290 200" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
          <path class="svgcolor" d="m119.26 100.23l-14.643 91.122h23.405l14.634-91.122h-23.396zm70.598 37.118c-8.179-4.039-13.193-6.765-13.193-10.896 0.1-3.756 4.24-7.604 13.485-7.604 7.604-0.191 13.193 1.596 17.433 3.374l2.124 0.948 3.182-19.065c-4.623-1.787-11.953-3.756-21.007-3.756-23.113 0-39.388 12.017-39.489 29.204-0.191 12.683 11.652 19.721 20.515 23.943 9.054 4.331 12.136 7.139 12.136 10.987-0.1 5.908-7.321 8.634-14.059 8.634-9.336 0-14.351-1.404-21.964-4.696l-3.082-1.404-3.273 19.813c5.498 2.444 15.609 4.595 26.104 4.705 24.563 0 40.546-11.835 40.747-30.152 0.08-10.048-6.165-17.744-19.659-24.035zm83.034-36.836h-18.108c-5.58 0-9.82 1.605-12.236 7.331l-34.766 83.509h24.563l6.765-18.08h27.481l3.51 18.153h21.664l-18.873-90.913zm-26.97 54.514c0.474 0.046 9.428-29.514 9.428-29.514l7.13 29.514h-16.558zm-160.86-54.796l-22.931 61.909-2.498-12.209c-4.24-14.087-17.533-29.395-32.368-36.999l20.998 78.33h24.764l36.799-91.021h-24.764v-0.01z" fill="#FFFFFF"></path>
          <path class="svgtipcolor" d="m51.916 111.98c-1.787-6.948-7.486-11.634-15.226-11.734h-36.316l-0.374 1.686c28.329 6.984 52.107 28.474 59.821 48.688l-7.905-38.64z" fill="#FFFFFF"></path>
          </svg>
          </div>
      
      <div class="card__number">0000&nbsp;0000&nbsp;0000&nbsp;0000</div>
      <div class="card__name">
        <h3>Card Holder</h3>
        <p id="card-name">Mrs Kate Smith</p>
        </div>
      
      <div class="card__expiry">
        <h3>Valid Thru</h3>
        <p>
          <span id="month">MM</span>/<span id="year">YY</span>
        </p>
        </div>
        </div>
    
    <form class="form">
      <h2>Payment Details</h2>
      
      <div class="form__name form__detail">
        <label for="name">Cardholder Name</label>
        <ion-icon name="person-outline"></ion-icon>
        <input type="text" placeholder="Mrs Kate Smith" id="name" maxlength="24">
        <div class="alert" id="alert-1">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3163 9.00362C11.8593 10.0175 11.1335 11.25 9.99343 11.25H2.00657C0.866539 11.25 0.140732 10.0175 0.683711 9.00362L4.67714 1.54691C5.24618 0.484362 6.75381 0.484362 7.32286 1.54691L11.3163 9.00362ZM5.06238 4.49805C5.02858 3.95721 5.4581 3.5 6 3.5C6.5419 3.5 6.97142 3.95721 6.93762 4.49805L6.79678 6.75146C6.77049 7.17221 6.42157 7.5 6 7.5C5.57843 7.5 5.22951 7.17221 5.20322 6.75146L5.06238 4.49805ZM6 8C5.44772 8 5 8.44772 5 9C5 9.55229 5.44772 10 6 10C6.55228 10 7 9.55229 7 9C7 8.44772 6.55228 8 6 8Z" fill="#FF6A96"/>
          </svg>
          Full name required</div>
          </div>
      
      <div class="form__number form__detail">
        <label for="number">Card Number</label>
        <ion-icon name="card-outline"></ion-icon>
        <input type="text" placeholder="0000 0000 0000 0000" id="number" onkeypress="return isNumeric(event)">
        <div class="alert" id="alert-2">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3163 9.00362C11.8593 10.0175 11.1335 11.25 9.99343 11.25H2.00657C0.866539 11.25 0.140732 10.0175 0.683711 9.00362L4.67714 1.54691C5.24618 0.484362 6.75381 0.484362 7.32286 1.54691L11.3163 9.00362ZM5.06238 4.49805C5.02858 3.95721 5.4581 3.5 6 3.5C6.5419 3.5 6.97142 3.95721 6.93762 4.49805L6.79678 6.75146C6.77049 7.17221 6.42157 7.5 6 7.5C5.57843 7.5 5.22951 7.17221 5.20322 6.75146L5.06238 4.49805ZM6 8C5.44772 8 5 8.44772 5 9C5 9.55229 5.44772 10 6 10C6.55228 10 7 9.55229 7 9C7 8.44772 6.55228 8 6 8Z" fill="#FF6A96"/>
          </svg>
          Invalid card number</div>
          </div>
      
      <div class="form__expiry form__detail">
        <label for="date">Exp Date</label>
        <ion-icon name="calendar-outline"></ion-icon>
        <input type="text" placeholder="MM/YY" id="date" onkeypress="return isNumeric(event)" >
        <div class="alert" id="alert-3">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3163 9.00362C11.8593 10.0175 11.1335 11.25 9.99343 11.25H2.00657C0.866539 11.25 0.140732 10.0175 0.683711 9.00362L4.67714 1.54691C5.24618 0.484362 6.75381 0.484362 7.32286 1.54691L11.3163 9.00362ZM5.06238 4.49805C5.02858 3.95721 5.4581 3.5 6 3.5C6.5419 3.5 6.97142 3.95721 6.93762 4.49805L6.79678 6.75146C6.77049 7.17221 6.42157 7.5 6 7.5C5.57843 7.5 5.22951 7.17221 5.20322 6.75146L5.06238 4.49805ZM6 8C5.44772 8 5 8.44772 5 9C5 9.55229 5.44772 10 6 10C6.55228 10 7 9.55229 7 9C7 8.44772 6.55228 8 6 8Z" fill="#FF6A96"/>
          </svg>
          Invalid date</div>
          </div>
      
      <div class="form__cvv form__detail">
        <label for="cvv">CVV
          <ion-icon name="information-circle" class="info"></ion-icon></label>
        <ion-icon name="lock-closed-outline"></ion-icon>
        <input type="password" placeholder="0000" id="cvv" maxlength="4" onkeypress="return isNumeric(event)" >
        <div class="alert" id="alert-4">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3163 9.00362C11.8593 10.0175 11.1335 11.25 9.99343 11.25H2.00657C0.866539 11.25 0.140732 10.0175 0.683711 9.00362L4.67714 1.54691C5.24618 0.484362 6.75381 0.484362 7.32286 1.54691L11.3163 9.00362ZM5.06238 4.49805C5.02858 3.95721 5.4581 3.5 6 3.5C6.5419 3.5 6.97142 3.95721 6.93762 4.49805L6.79678 6.75146C6.77049 7.17221 6.42157 7.5 6 7.5C5.57843 7.5 5.22951 7.17221 5.20322 6.75146L5.06238 4.49805ZM6 8C5.44772 8 5 8.44772 5 9C5 9.55229 5.44772 10 6 10C6.55228 10 7 9.55229 7 9C7 8.44772 6.55228 8 6 8Z" fill="#FF6A96"/>
          </svg>
          Invalid CVV</div>
          </div>
      
      <button type="submit" class="form__btn">Confirm</button>
        
      </form>        
   </div>
  <a href="https://dribbble.com/myacode" class="dribbble" target="_blank"><ion-icon name="logo-dribbble"></ion-icon></a>
</div>
              
            
!

CSS

              
                :root {
    --primary-light: #8e8aff;
    --primary: #655dff;
    --primary-dark: #4f46f8;
    --secondary: #17c9ff;
    --alert: #ff6a96;
    --greyLight-1: #e0ecf7;
    --greyLight-2: #c8dbf0;
    --greyDark-1: #92acc4;
    --greyDark-2: #5a768f;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
  
html {
    box-sizing: border-box;
    font-size: 62.5%; // 1rem = 10px    100% = 16px
    overflow-y: scroll;
    background: var(--greyLight-1);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .03rem;
}
  
.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment {
    width: 74.8rem;
    height: 48rem;
    border-radius: .8rem;
    background: #ffffff;
    display: grid;
    grid-template-columns: 32rem 24.8rem;
    padding: 4rem 6rem;
    grid-gap: 6rem;
    align-items: center;
    position: relative;

    &__dots {
        position: absolute;
        top: .5rem;
        left: 4rem;
    }

    &__shadow-dots {
        position: absolute;
        top: .5rem;
        left: 4rem;
        width: 6.5rem;
        height: 11.5rem;
        background: linear-gradient(to bottom, #e0ecf700 0%, #ffffff 100%);
        z-index: 200;
    }
}

.card {
    grid-column: 1 / 2;
    width: 32rem;
    height: 20rem;
    border-radius: 1rem;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    padding: 0 2rem;
    align-items: center;
    color: #ffffff;
    background: linear-gradient(to bottom, var(--secondary) 0%, var(--primary) 50%);
    box-shadow: -.6rem .6rem 1.8rem #4f46f83d;
    border: 1px solid #ffffff;
    z-index: 200;
    position: relative;

    &__visa {
        justify-self: flex-end;
        grid-column: 2 / 3;
        overflow: hidden;
        width: 5.5rem;
    }
    &__number {
        font-family: 'Roboto Mono', monospace;
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        font-size: 1.8rem;
        letter-spacing: .12rem;
    }
    &__name {
        grid-row: 3 / 4;
        
        h3 {
            font-size: .9rem;
            text-transform: uppercase;
            margin-bottom: .8rem;
            font-weight: 300;
        }
        p {
            font-size: 1.4rem;
        }
    }
    &__expiry {
        grid-row: 3 / 4;
        justify-self: flex-end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        h3 {
            font-size: .9rem;
            text-transform: uppercase;
            margin-bottom: .8rem;
            font-weight: 300;
        }
        p {font-size: 1.4rem;}
    }
}

.form {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 11rem);
    grid-template-rows: repeat(5, min-content);
    grid-column-gap: 2.8rem;
    grid-row-gap: 1.2rem;
    color: var(--greyDark-2);
    
    h2 {
        font-size: 2rem; 
        grid-column: 1 / 3;
        line-height: 1;
        margin-bottom: 1.4rem;
        font-family: 'Inter', sans-serif;
    }

    &__detail { 
        display: flex; 
        flex-direction: column;
        position: relative;
        justify-content: center;
        padding-bottom: .6rem;
        color: var(--greyDark-1);
    }

    &__name {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        justify-self: stretch;
        
    }
    &__number {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        justify-self: stretch;
    }
    &__expiry {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    &__cvv {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        justify-self: flex-end;
        width: 100%;
        input[type=checkbox] { display: none; }
        
        .info {
            top: -.4rem;
            left: 2.4rem;
            color: var(--greyDark-1);}
    }
    &__btn {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
        height: 3.8rem;
        border-radius: .6rem;
        border: none;
        background: var(--primary);
        color: #ffffff;
        justify-self: stretch;
        font-family: inherit;
        font-size: 1.6rem;
        cursor: pointer;
        &:focus { outline: none; }
        &:hover {background: var(--primary-dark);}
    }

    ion-icon {
        position: absolute;
        font-size: 2rem;
        top: 3.4rem;
        margin-left: 1rem;
        color: var(--primary-light);
        stroke: var(--primary);
    }

    label {
        pointer-events: none;
        font-size: 1.4rem;
        padding: 0 0 1rem 0;
        line-height: 1;
        color: var(--greyDark-1);
    }

    input {
        padding: 1rem 1rem 1rem 4rem;
        border: none;
        background: transparent;
        border-radius: .6rem;
        border: 1px solid var(--greyLight-2);
        color: var(--greyDark-2);
        font-family: inherit;
        font-size: 1.4rem;
        
        &::placeholder {
            color: var(--greyLight-1);
            font-size: inherit;
            letter-spacing: .12rem;
        }
        &:focus {outline: none;}
        &:hover {border: 1px solid var(--primary-light);}
    }
}

.alert {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--alert);
    margin-top: .6rem;
    display: flex;
    align-items: center;
    opacity: 0;
    svg { margin-right: .4rem;}
}

.dribbble {
  position: fixed;
  font-size: 36px;
  right: 20px;
  bottom: 20px;
  color: #EA4C89;
}
              
            
!

JS

              
                const form = document.querySelector('.form');
const name = document.getElementById('name');
const number = document.getElementById('number');
const date = document.getElementById('date');
const cvv = document.getElementById('cvv');

const visa = document.querySelector('.card');

/*  SHOW ERROR  */
function showError(element, error) {
    if(error === true) {
        element.style.opacity = '1';
    } else {
        element.style.opacity = '0';
    }
};

/*  CHANGE THE FORMAT NAME  */
name.addEventListener('input', function() {
    let alert1 = document.getElementById('alert-1');
    let error = this.value === '';
    showError(alert1, error);
    document.getElementById('card-name').textContent = this.value;
});

/*  CHANGE THE FORMAT CARD NUMBER*/
number.addEventListener('input', function(e) {
    this.value = numberAutoFormat();

    //show error when is different of 16 numbers and 3 white space
    let error = this.value.length !== 19;
    let alert2 = document.getElementById('alert-2');
    showError(alert2, error);

    document.querySelector('.card__number').textContent = this.value;
});

function numberAutoFormat() {
    let valueNumber = number.value;
    // if white space change to ''. If is not a number between 0-9 change to ''
    let v = valueNumber.replace(/\s+/g, '').replace(/[^0-9]/gi, '');

    // the value got min of 4 digits and max of 16
    let matches = v.match(/\d{4,16}/g);
    let match = matches && matches[0] || '';
    let parts = [];

    for (i = 0; i < match.length; i += 4) {
        // after 4 digits add a new element to the Array
        // e.g. "4510023" -> [4510, 023]
        parts.push(match.substring(i, i + 4));
    }

    if (parts.length) {
        // add a white space after 4 digits
        return parts.join(' ');
    } else {
        return valueNumber;
    }
};

/*  CHANGE THE FORMAT DATE  */
date.addEventListener('input', function(e) {
    this.value = dateAutoFormat();
    
    // show error if is not a valid date
    let alert3 = document.getElementById('alert-3');
    showError(alert3, isNotDate(this));

    let dateNumber = date.value.match(/\d{2,4}/g);
    document.getElementById('month').textContent = dateNumber[0];
    document.getElementById('year').textContent = dateNumber[1];
});

function isNotDate(element) {
    let actualDate = new Date();
    let month = actualDate.getMonth() + 1; // start january 0 we need to add + 1
    let year = Number(actualDate.getFullYear().toString().substr(-2)); // 2022 -> 22
    let dateNumber = element.value.match(/\d{2,4}/g);
    let monthNumber = Number(dateNumber[0]);
    let yearNumber = Number(dateNumber[1]);
    
    if(element.value === '' || monthNumber < 1 || monthNumber > 12 || yearNumber < year || (monthNumber <= month && yearNumber === year)) {
        return true;
    } else {
        return false;
    }
}

function dateAutoFormat() {
    let dateValue = date.value;
    // if white space -> change to ''. If is not a number between 0-9 -> change to ''
    let v = dateValue.replace(/\s+/g, '').replace(/[^0-9]/gi, '');

    // min of 2 digits and max of 4
    let matches = v.match(/\d{2,4}/g);
    let match = matches && matches[0] || '';
    let parts = [];

    for (i = 0; i < match.length; i += 2) {
        // after 4 digits add a new element to the Array
        // e.g. "4510023" -> [4510, 023]
        parts.push(match.substring(i, i + 2));
    }

    if (parts.length) {
        // add a white space after 4 digits
        return parts.join('/');
    } else {
        return dateValue;
    }
};

/*  CHANGE THE FORMAT CVV  */
cvv.addEventListener('input', function(e) {
    let alert4 = document.getElementById('alert-4');
    let error = this.value.length < 3;
    showError(alert4, error)
});

/* CHECK IF KEY PRESSED IS A NUMBER (input of card number, date and cvv) */
function isNumeric(event) {
    if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode > 31)) {
        return false;
    }
};

/*  VALIDATION FORM WHEN PRESS THE BUTTON   */
form.addEventListener('submit', function (e) {
    // 1. if there is not any name
    // 2. if the length of the number card is not valid (16 numbers and 3 white space)
    // 3. if is not a valid date (4 number and "/" or is not a valid date)
    // 4. if is not a valid cvv

    if(name.value === '' || number.value.length !== 19 || date.value.length !== 5 || isNotDate(date) === true || cvv.value.length < 3) {
        e.preventDefault();
    };

    // 5. if any input is empty show the alert of that input
    let input = document.querySelectorAll('input');
    for( i = 0; i < input.length; i++) {
        if(input[i].value === '') {
            input[i].nextElementSibling.style.opacity = '1';
        }
    }
});
              
            
!
999px

Console