Skip to content
Submitted 7 months ago

i have used 2 html files , One for signup page and on for the msg page

MANISH•20
@Manishbhai9350
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of that i used 2 html files for this , One index and one succes html files features -

1 . When you are writing the email it will not check it when you stop writing email for 600ms it will authenticate the email , I used regex for email authentication , if the email is wrong it will give an error that is showes in the design if the email is write it will store it in the localStorage . then you will be redirected to the succes html file there you will see your email

2 . If you will try to directly go to the succes html file without entering the email You will be redirected to the index.html file

 Thats it now you should check more features by check out the project
What challenges did you encounter, and how did you overcome them?

1 . Email Authentication 2 . Page redirection 3 . Error when email is wrong 4 . Can not directly go to succes page without entering the Email

More you can check the project

Community feedback

  • Mouwvfic•210
    @mouwaficbdrPosted 7 months ago

    Hello @Manishbhai9350, excellent work on this project. To check email validity, you can use the HTMLSelectElement.checkValidity() method to establish the validity condition in your JavaScript, along with the email input type in HTML.

    For further information, you can visit here.

    I implemented this method in my solution, so feel free to examine how I applied it in my repository.

    Marked as helpful
    0
    MANISH•20
    @Manishbhai9350Posted 7 months ago

    @mouwaficbdr You did a great work although . Great to hear that But i prefer to validate the email using js that we can also validate it in the backend , You did a great job 😊😊

    1
    Mouwvfic•210
    @mouwaficbdrPosted 7 months ago

    @Manishbhai9350 thanks ! Okay I get it !

    0
  • Joramir Jr.•250
    @JoramirJrPosted 7 months ago

    Hi @Manishbhai9350!

    Regarding the success message, you may find it interesting to use the replaceWith JS method to replace the initial card with the success card, instead of executing a page redirect.

    Here's the link to my solution's JS file; check out the bottom event listener, where I implemented the replace method.

    Hope its helpful!

    0
    MANISH•20
    @Manishbhai9350Posted 7 months ago

    @JoramirJr this type of the page project are fullStack projects that is why i used two files that is why i used page redirect Because in express we can anywhere redirect user . Thanks for your reply i may find it helpfull ❤️❤️😊😊 You did a good job Keep It up 👍👍👌

    0

Please log in to post a comment

Log in with GitHub

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