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 page using HTML, CSS and JS

@moojica

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 are you most proud of, and what would you do differently next time?

Completing another challenge on FEM.

What challenges did you encounter, and how did you overcome them?

Email validation RegEx. I overcame this by using a tool by gskinner at https://regexr.com/

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

Any advice is always welcome.

Community feedback

@leannekeenan

Posted

Perfection! Honestly - your project is a perfect replica of the design. Since the objective here is to find things to improve, the only thing I can think of is changing the color of the active status on your input from black to the tomato color to give a cohesive vibe when actively entering your email ( I know it's probably a little weird considering red is usually the default for an error, but considering the color of the image and overall color theme, I think it would be ok).

Mostly I wanted to mention that I read that you used regex to complete your solution - how do you feel that improved your result? I dabble in regex in my ANKI study sessions but haven't used them in real-world applications and would love your input! :)

1

@moojica

Posted

Thank you. I appreciate your kind words and feedback!

In regards to using regex for my solution, it improved my result because it allowed me to validate the email address a user would put into the input field, ensuring that it adhered to a specific format.

The site I linked to in my responses was very helpful because remembering the different codes and patterns of writing regex can be a lot. I browsed the community patterns and found the email validation at the top of that list. Also, if you have questions about what a certain match or expression does, you can hover it and it’ll show you the details. Hope this helps! @leannekeenan

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