Newsletter sign-up form with success message

Community feedback

• 

  P

  Gilbert•360

  @juliengDevPosted 4 months ago

  Hey there @ralphvirtucio👋! Here are some suggestions to help improve your code:

  Why Not Declare newsletter_heading as h1

  Using Pseudo-Class ::before for Bullets -Instead of using an <img> tag for bullets, you can utilize the ::before pseudo-class to create and style bullets with the background property. This can reduce the number of HTTP requests and improve page performance.

  Email Validation

  The current email validation is insufficient as it allows invalid email formats such as [email protected]. Enhancing the validation with a regular expression (regex) can improve accuracy.

  Alternatively, you can use a validation library such as Validator.js, Just-Validate, or Bouncer for more robust validation.

  Font Size at 62.5% Tips to help you with sizing elements :

  • Setting the font-size to 62.5% on the html element is a common technique to simplify rem calculations. This sets the base font size to 10px (assuming the default browser font size is 16px), making it easier to calculate sizes in rem units (e.g., 1.6rem equals 16px).

  JavaScript Improvements

  • Created a separate validateEmail function for better reusability and readability.
  • Introduced showError and clearError functions to centralize error handling and reduce code duplication.
  • Simplified the handleEmailInput function to just clear errors, as validation is now handled in handleSubmit.

  I discovered something new with your project, so thanks for that! It was about using the action and method attributes to redirect the main page to a Thank You page and extract the user’s email from the URL. I’ve never seen something like this before, and I’m going to check this in detail later because now I’m curious about this method. Overall, are you sure it’s the best way to handle this challenge here? I guess you did some research. I would be glad if you could explain what benefits it brings you. :)

  Great job on the design! It’s really faithful to the original and looks fantastic. Once you address the regex issue for email validation, your challenge will be complete. Keep up the awesome work.

  <Happy Coding/>! 👾 Regards, @juliengDev

  Marked as helpful

  0

  ---

  

  P

  Ralph Virtucio•670

  @ralphvirtucioPosted 4 months ago

  Hi @juliengDev,

  Thank you so much for your time and the valuable feedback! 😊

  I didn’t declare the newsletter__heading as h1 because I felt it wasn’t descriptive enough for screen readers.

  Thanks for testing the integrity of my email validation. I’ve pushed a refactored version of it—did some heavy lifting to “punish” myself 😂.

  After reviewing submissions in the Frontend Mentor Discord community, I realized that converting the Thank You page into a component and consolidating it into a single HTML file might be a more effective approach. I'm considering this changes and submit it as an alternative solution.

  I’ll make the changes to the <img> tag in the list soon.

  Thank you for the tips!

  Here’s some donut and coffee 🍩☕

  CODE UP 🧑‍💻

  1