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 with Success Message Using Vanilla JS

Raptor0x1 210

@Raptor0x1

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?

During this challenge I found a way to be more productive and learn at a faster pace which works for me. Feeling Proud.

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

Challenges I faced :

  • Didn't know how to import form data to JS object
  • Regular expression for validating
  • Tried using third party library(validator.js) for validation in Vanilla JS

How did I overcame them?

  • Learned a lot from the FreeCodeCamp's article about form
  • I did play around with Regular Expression but I just copy pasted the RegEx for email. So Now I'm going to learn more about RegEx.
  • I tried hard using validator.js but at the end didn't used it. So if anyone have any helpful resources please do share.

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

  • Anything which will make the code better.
  • When the email is invalid the color of the text remains red when I click on the form to reenter the email.
  • I feel like I have traverse many html nodes in the code. Is it normal to bring so many nodes based on the size of the challenge.
  • Some useful resources for using validator.js or any other third party library for validation in Vanilla JS.

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