Responsive newsletter sign-up form in HTML, CSS & JS

Community feedback

• 

  Carolina Borba•510

  @anacarolinabmvPosted about 1 year ago

  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('example@email.com');  //returns true
  validateEmail('example@email');  //returns false
  

  Hope this helps! Happy coding ✨

  Marked as helpful

  0

  ---

  

  MelodyPatin•40

  @MelodyPatinPosted about 1 year ago

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

  1
• 

  Antonain E.•220

  @antoebtfrPosted about 1 year ago

  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•40

  @MelodyPatinPosted about 1 year ago

  @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