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 signup and success notification challenge demo

P
Jose Monge 340

@josemongedev

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 general I tried to use semantic HTML tags for the basic structure. The first signup page is a section and the notification is an aside element that's hidden initially. I wrote the script code using plain vanilla javascript without any framework. Also, I use preventDefault to stop the submission of the form, so no backend connection is made. The javascript is loaded on the window.onload function and it's separated into 3 sections: elements/document objects, handlers and finally events. I think this generic structure works fine for small implementations like this. Any recommendation is welcome. Thanks!

Community feedback

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