Newsletter sign-up form with success message

Community feedback

• 

  Grego•1,310

  @Grego14Posted 7 months ago

  Hello! congratulations on completing the challenge!

  The way you use margin: 11em 0 in the .container element to center it in the center is unnecessary, since in the body you already have almost all the properties necessary for it to be centered, the only thing missing is an appropriate height.

  body{
    min-height: 100vh
  }
  
  .container{
    /* margin: 11em 0; */
  }
  

  Now with the JavaScript code:

  You can simply add a class that handles all the styles something like this:

  emailInput.classList.add('input-error')
  

  And then in the CSS:

  #email.input-error{
    border: 1px solid hsl(4, 100%, 67%);
    background-color: hsl(4, 84%, 93%);
    color: hsl(4, 100%, 67%);
  }
  
  #email.input-error::placeholder{
    color: hsl(4, 100%, 67%);
  }
  

  And I recommend that you add these styles to the #email as the default styles.

  border: 1px solid var(--Grey); 
  background-color: white; 
  color: black;
  

  And so you will only have to add and remove the error-input class so that the styles are changed, without doing it using JavaScript.

  There is no need to change the placeholder, since it returns to its initial value when the user deletes all the text.

  I hope this helps! 😁

  Marked as helpful

  0