Responsive intro component with sign up form

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 :)