Newsletter sign up with success message

Community feedback

• 

  Marzia Jalili•4,110

  @MarziaJaliliPosted about 2 months ago

  Nice work!

  Some areas you can amend:

  • First, for a smoother color change of the buttons, you can use the transition property.

  Take the code below as an example:

  button {
    transition: background-color 0.5s; /* or .5s for short */
  }
  

  This ensures that the color will change after 500 milliseconds. Which makes it look even better.

  • Second, when the user tries again to provide valid data, the error states are still there.

  It would be better if you got rid of them using the onChange on the inputs for a more user friendly layout.

  This is how you can set the event listener for it:

  input.addEventListener('change', function() {
      // some conditions to remove the error states according to your code
  });
  

  Other than this you're doing great!

  If you find any difficulties, let me know.

  😎😎😎

  Marked as helpful

  0

  ---

  

  Paradox•330

  @TarestaPosted about 2 months ago

  @MarziaJalili I really appreciate your helpful advice! I went ahead and made the changes you suggested, but I’m feeling a bit uncertain about my input field. If you have a moment, would you mind taking another look to see if I captured what you were aiming for?

  1

  

  Marzia Jalili•4,110

  @MarziaJaliliPosted about 2 months ago

  Ahhh, stupid me!

  I am used to React JS, so I forgot that the event listen here can't be change.

  The only thing you have to do is to change the change to input.

  This will remove the error states every time the user types into the email field.

  The very last line of your code has to be changed to:

  // current code =>
   emailField.addEventListener('change', handleInputChange);
  
  // change it to => 
   emailField.addEventListener('input', handleInputChange);
  

  This will definitely solve the issue.

  0

  

  Paradox•330

  @TarestaPosted about 2 months ago

  @MarziaJalili No problem. Thanks for the help :)

  1