Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter sign-up form with success message

@joaovictormendessilva

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


In your opinion, is the validation of the form well done?

Community feedback

@abdullahmuslim

Posted

Try fixing the dismiss message button

  • It suppose to close the success message hopefully bring you back to the signup form.
  • The active state should be on :active psuedo attribute not :hover

Hope you find it helpful 🙂

1

@joaovictormendessilva

Posted

Thanks for the advice, I made the two changes you commented on. Feel free to test again.

0

@abdullahmuslim

Posted

@joaovictormendessilva

I think there is just one more little thing you might want to add to your input, another event listener.

onInput When the inserted email doesn't match the format, you might want to clear the warning after an input and wait for resubmission. I mean it doesn't look good to have an error lurk around when it's being fixed. I don't think it's good for user experience.

const input = document.querySelector("input");
input.addEventListener("input", clearError);

function clearError(){
//change styles back to previous here
...
}
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord