Interactive card using Sass

Community feedback

• 

  Jesse Good•120

  @jessegood

  Posted almost 3 years ago

  Nice solution!

  Here are some tips to improve your code.

  1. To improve validation: It seems you are performing validation on the keyup event. However, the form can still be submitted even if the form is not filled out. I would suggest listening to the submit event, perform validation and only allow submitting the form when there are no errors.

  2. I think learning the built in JavaScript Validation API would be good. For example, you can set the required attribute to input forms and then just check input.validity.valueMissing to see if the field is blank.

  3. Putting numbers into groups of 4: Here is the function I use. You could listen to the input event on your input field and then format the input using the function below.

  function formatCreditCardNumber(num) {
    num = num.split(" ").join("");
    let arr = num.split("");
    let formattedNum = [];
    if (arr.length < 4) return num;
  
    for (let i = 0; i < arr.length; i++) {
      if (i !== 0 && i % 4 === 0) {
        formattedNum.push(" ");
      }
  
      formattedNum.push(arr[i]);
    }
  
    return formattedNum.join("");
  }
  

  For improving your SASS, I highly recommend looking into nesting to make your CSS more compact and readable: Here is a tiny example using your code. However,

  .container {
    .aside {
      width: 100%;
      height: 40vh;
      background-repeat: no-repeat;
      background-size: cover;
      
      .front-card {
          position: absolute;
          top: 70%;
          left: 10%;
          z-index: 1;
      }
    }
  }
  

  The above compiles to:

  .container .aside {
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .container .aside .front-card {
    position: absolute;
    top: 70%;
    left: 10%;
    z-index: 1;
  }
  

  Also, to space our your numbers, use font-variant-numeric: tabular-nums;!

  01