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

Responsive Newsletter with vanilla JS (click and keydown-event)

Sarah 540

@AutumnsCode

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?

I am proud of working with regex successfully, the JS in general and overall how it turned out. I believe I could simplyfly my css better and adding some animation for the transition.

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

I believe the most challenging part was the display section when clicking on the buttons

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

I read the "Managing forms with JS" on the Learning Path before. And it would help me if someone explain to me how to use it on this project.

And any kind of feedback is welcome!

Community feedback

P

@jamesbarnett

Posted

Hello, congratulations on your solution! It's exceptionally well done. Semantic markup, nice responsiveness, and incredibly accurate to the design.

The one thing to think about improving here is validating an email address with a regular expression. As it stands the spec includes the ability have email address with other international characters not covered by the regex. See the top answer to this old Stack Overflow question (the poster breaks down how incredibly complex this is): https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression

Hope this is helpful or at least interesting. :) Happy coding!

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