Interactive card details form solution || Responsive || Mobile first

Community feedback

• Account deletedPosted almost 3 years ago

  for your JavaScript code some of your codes are repeated but is not a lot My Recommendation for the inputs.forEach(() => {}) => create a functions per nested conditions so it will decrease the logical thinking what I mean about that is it will became more easier to read your code if you do this... example

  const containsNameInput = function (input) {
   if(input.value === ''){
                  input.parentElement.classList.add('error-empty');
                  input.parentElement.classList.remove('error-invalid');
              }else if(input.value !== '' && input.value.match(/^[0-9]+$/) !== null){
                  input.parentElement.classList.remove('error-empty');
                  input.parentElement.classList.add('error-invalid');
              }
              else{
                  input.parentElement.classList.remove('error-empty');
                  input.parentElement.classList.remove('error-invalid');
              }
  // add this function to the parent condition statement
  // So on and so fort for the others are nested condition
  }
  

  for the second question: "Modal"

  much better used this kind of way instead to loop the forms so it will check each input once the user click the submit button ("submit" handler)

  // their variables contains the value of their inputs
  const nameInput = document.querySelector(".name-input").value;
  const numberInput = document.querySelector(".name-input").value.length;
  const monthInput =  document.querySelector(".month-input").value;
  const yearInput = document.querySelector(".year-input").value;
  const cvcInput = document.querySelector(".cvc-input").value.length;
  
  // second operand of condition is not 100% accurate is just an example
   if(nameInput === 'name' &&
       numberInput === 16    &&
       monthInput === "month" &&
       yearInput === "year" &&
       cvcInput === 4) {
           modal.style.display = 'flex or block";  
  }  else {
   // you can create a code here if you want to throw an error
   // in the webpage
  }
  

  23

  Marked as helpful