JS with LocalStorage: Interactive Card Details

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  Hey broo, noice job persisting the data when user reloads the page , I tried working on it as well using localStorage but was unsuccessful for some reason . . . will definitely refer to your code . . .altho I had some concerns regarding your code . . .

  • Instead of

    if (!userNameValidation.test(username)) {
      allFieldsValid = false;
      console.log('Username not valid');
    }
  
    if (!cardNumberValidation.test(cardnumber)) {
      allFieldsValid = false;
    }
  
    if (!monthValidation.test(monthnumber)) {
      allFieldsValid = false;
    }
  
    if (!yearValidation.test(yearnumber)) {
      allFieldsValid = false;
    }
  
    if (!cvcValidation.test(cvcnumber)) {
      allFieldsValid = false;
    }
  
    if (allFieldsValid) {
      form.style.display = 'none';
      cardThankYou.style.display = 'flex';
    }
  

  you could have done something like

  if(!userNameValidation.test(username) || (!cardNumberValidation.test(cardnumber)) || (!monthValidation.test(monthnumber)) || (!yearValidation.test(yearnumber)) || (!cvcValidation.test(cvcnumber))){
    allFieldsValid  = false;
  }
  

  • Instead of

  continueBtn.addEventListener("click", () => {
    localStorage.removeItem('username-data');
    localStorage.removeItem('cardnumber-data');
    localStorage.removeItem('month-data');
    localStorage.removeItem('year-data');
    localStorage.removeItem('cvc-data');
    form.reset();
    window.location.reload();
  });
  

  you could have simply done

  continueBtn.addEventListener("click", () => {
    localStorage.clear();
    form.reset();
    window.location.reload();
  });
  

  Makes for efficient code I guess . . .also this line

  <p class="card-holder" id="credit-card-holder" pattern="[A-Za-z]*">Jane Appleseed</p>
  

  shows error in console for pattern attribute . . . .needs some correction with regex. Also you could have added error messages on invalid form by adding empty divs and manipulating their innerText on invalid input. That's all ,I guess the key to persisting data was adding window.onload() eventlistener and calling addDataToInput(), Hope I was able to help , happy coding !!! 🥂🥂

  Marked as helpful

  0