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 - Vite/Vanilla JS/Responsive/Flex/Grid/dialog

P

@jamesbarnett

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 happy with how the confirmation using the `` element turned out. The only thing I would do differently would be to get the asset paths correct for deployment earlier in the process.

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

I did run into a couple of issues with selector specificity. I did eventually recognize what was going on and adjusted. Good learning experience.

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

Suggestions to improve the javascript for managing the dialog. Am I missing any obvious, well-adopted best practices, etc.?

Community feedback

P

@ralphvirtucio

Posted

Hi Jim Barret, Great job on completing this challenge

I like how you used a dialog for the "Thanks for subscribing" message. I'm considering using it when I refactor this challenge. Thank you for sharing the showModal resource.

  • I have a test scenario for you: When the user inputs an invalid email and then clears the input to enter a valid email, they are redirected to the "Thanks for Subscribing" page. After clicking the dismiss message and returning to the main page, I notice that the error message "Valid email required" is still there even though there is no user email input.

  • It is also a good practice to use button type="submit" when submitting a form.

If you want more references about client-side form validation here is a MDN article you can check. 😊

Everything looks great!

CODE UP ☕🧑‍💻😊 !

Marked as helpful

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