Responsive intro component with sign up form

Community feedback

• 

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  Hello Adriana,

  You have done an awesome job :)

  If you would like to slightly improve your code, you could do the following:

  1- You could use arrow functions instead of regular ones (since you already used it in the event listener function). So, it would look as follows:

  const checkInputs = () => {
   const firstNameValue = firstName.value.trim()
     .... and, so on
  }
  
  const setErrorFor = (input) => {
    const trialControl = input.parentElement;
    ..... and, so on
  }
  
  const successValidation = (input) => {
     const trialControl = input.parentElement;
     ..... and, so on
  }
  

  2- There is a very small change you can do for the page's styles. The error text (colored in red) is align to the right. If you would like to fix it, you could change the following line in your styles.css file:

  .trial__control p.trial__error-txt {
  // line 90 in styles.css
  right: 16px;  // This should be changed to ==> left: 16px;
  }
  

  3- Another thing that you could add, is a click event listener to the email input field, so that if the user try to re-enter their email (if there was an error in the previous attempt), the email's error message would disappear to allow the user to write their e-mail freely. So, it would look as follows:

  // You already have this line in your code
  const email = document.getElementById('email');
  // You need to add this one, though
  const errorParagph = document.querySelector('.trial__error-email');
  
  const processClick = () => {
     if( email.parentElement.classList.contains('error') ) {
        email.parentElement.classList.toggle('error');
        // The above line will remove the error class from e-mail's parent div (which is 
         responsible for showing the email's error paragraph)
     }
  };
  
  email.addEventListener('click', processClick);
  /* 
  next line is required to ensure that, if the user also clicks on the space occupied by the error paragraph it will also count as a click on the input field
  */
  errorParagph.addEventListener('click', processClick);
  

  4- (This is a general note, but it doesn't necessarily apply here) Remember that, if you want to add the same event listener to multiple elements in the page, it is best practice to use a callback function instead of a listener function expression. For example:

  if you have multiple forms and you want to add a "submit" event listener to each one it would be best to do it as follows:

  const forms = document.querySelectorAll('form');
  
  const callbackFunc = (e) => {
      isValid = true;
      checkInputs();
      
      if (!isValid) {
          e.preventDefault();
      //preventDefault vai cancelar o evento padrão do browser
      }
  }
  
  forms.forEach( (form) => {
  form.addEventListener("submit", callbackFunc); 
  // So the two forms will have the same callback function.
  } );
  
  // or you could do it with a for of loop
  for (const form of forms) {
     form.addEventListener("submit", callbackFunc); 
  }
  

  Hope this helps.

  If you have any questions, don't hesitate to ask.

  Have a nice day :)

  Marked as helpful

  1

  ---

  

  Adriana Silva Almeida•50

  @Adriana2710Posted over 2 years ago

  @Ahmed96Mah thank you so much! Awesome tips and I will add them to my project (and the future ones as well) for sure! I appreciate your help.

  1

  

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  @Adriana2710

  You are welcome :)

  0