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 with Success Message

LucasNgTg 190

@LucasNgTg

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


What specific areas of your project would you like help with?

This is my first time making a form validation. Any feedback is welcome.

Community feedback

@Yohannes-GitHub

Posted

  • Your solution's desktop mode meets that of the design almost 1 to 1 so kudos to you on that one.
  • Your mobile mode is also really good but the one between the two could be improved. Instead of just decreasing the font from the desktop one, you could decrease the height and width too so that it looks good.
  • On the JS part, your form displays an error even while typing the input. Instead of doing that you should validate the input only when the submit button is clicked in my opinion. Also the regex for validating the email is wrong I think in that it allows for someone to submit an input like email@co. The regex that I found covers even this case. It goes like this.
  • const regex = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/;
  • Also, you already have put an event listener on your form that listens to submit so you could put the rest of the function calls in here instead of also putting an event listener on the button and adding the functionality there.
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