Frontend Mentor Newsletter Sign-Up Built With HTML/CSS/JS

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  Hey!

  Yes, the thing which bothered you is the default browser validation logic. You can get rid of it by adding novalidate attribute to the form, but in general it is considered bad to accessibility.

  I'm sorry I doesn't have much time right now to look thorough through your code, but why there is a success message instead of the form in the mobile version?

  Anyway, I have no doubt that you did great work as always =)

  Marked as helpful

  1

  ---

  

  Dylan•290

  @dquinn089Posted 3 months ago

  @Alex-Archer-I I fixed the mobile display view, I just had to initialize the proper visibility states in the script:

  signupSection.style.display = "flex";
  successSection.style.display = "none";
  

  I will also take your advice and just let the browser validation logic do its thing. Appreciate the tips as always!

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @dquinn089

  Now I find a time to look to your code =)

  I want to express my disagreement (in the most polite and correct manner) with usage of id to styling. That way just doesn't lead to any good =) And also about px for font sizes =)

  But overall as I thought it is a cool work! And your validation is still necessary since it checked not only @.

  By the way, maybe learning of some popular naming conventions - BEM or OOCSS - could help you to better tune your mind to HTML-CSS connection.

  Marked as helpful

  1

  

  Dylan•290

  @dquinn089Posted 3 months ago

  @Alex-Archer-I 100% agree with you on the use of ID's in styling. I didn't realize until the end how awful it makes the code in terms of readability and organization. The distinct usage between classes and Id's really didn't click in my head until JS got involved.

  Thank you for the tips on BEM and OOCSS, definitely going to to be utilizing these!

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @dquinn089

  The trials and errors are very decent way to learn something, so it's cool that you came to this conclusion about ids =)

  And also there are more methodologies than BEM and OOCSS, it's just those I'm more familiar with =)

  1
• 

  MikDra1•6,920

  @MikDra1Posted 3 months ago

  Nice one @Dylan 😁😁😁

  If you want to improve your solution you should take care about the email that get's rendered in the success message in bold ✉

  Good job and keep going 😀😁😉

  0
• 

  Abd Ur Rehman•360

  @A-noob-in-CodingPosted 3 months ago

  Hi there,

  For email validation, custom made regex would be better as you can strongly check for any wrong emails as input

  For reference I used this regex

  const emailRegex = /^[a-zA-Z0-9.]+@[^\s@]+\.[^\s@]+$/;
  

  0

  ---

  

  Dylan•290

  @dquinn089Posted 3 months ago

  @A-noob-in-Coding This is my current function with the regex i built:

  function validateEmail (email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
  

  It's in the JS but it seems to not be functioning.

  0

  

  Abd Ur Rehman•360

  @A-noob-in-CodingPosted 3 months ago

  @dquinn089

  The difference between your regex and mine is that mine only allows alphanumeric characters and dot before the @ part of email, whereas yours allow all characters except whitespace and @ before the @ part

  Rest is same,

  Although some special characters are allowed Source validity.com

  Hope it helps 🥰@dquinn089

  0