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 sign-up form in HTML, CSS & JS

@MelodyPatin

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


Hi there! I feel like the result of my challenge is pretty good, however I guess there are still a lot of best practices I don't know about, so if you'd like to review my code and give me a feedback about stuff I could improve to be more efficient I'd be gratefull :)

Community feedback

P

@anacarolinabmv

Posted

Hello Melody, great job on the challenge! The design is on point and the responsiveness works pretty well for most of the widths. However between 1000px and 900px the design is a bit off (the picture doesn't fill the whole space and is aligned to the top of the container).

I took a quick look at your code and everything seems fine. Very clean code and easy to understand, awesome! I would just suggest using Regular Expressions to validate the email, as checking if it includes "@" is not strong enough.

Here is an example of how to do it:

  const regex =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regex.test(email);
};

validateEmail('[email protected]');  //returns true
validateEmail('example@email');  //returns false

Hope this helps! Happy coding ✨

Marked as helpful

0

@MelodyPatin

Posted

@anacarolinabmv Thank you very much for your feedback wich was most helpfull, I did the corrections you suggested :) Have a lovely weekend !

1

@antoebtfr

Posted

Hi, great job !

The design is respected and the responsive works well 👍

There are some mistakes :

  • We can't dismiss the message of the success modal
  • The outline on the input should be disabled
  • if(email.includes("@")){ authorizes this eze@fzef@zefz@fe as an email. For the email verification in front-end, specially in JS, you can use this regex /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ Link for the regex

Marked as helpful

0

@MelodyPatin

Posted

@antoebtfr Thank you very much for you review I did the correction to dissmiss the message of the success modal, but as I don't know where it should redirect, I redirected to the subscription again, which is probably not ideal haha Thanks as well for the regex to do the email verification, very helpful to know it exist!

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