Design comparison
Solution retrospective
I am most proud of how I used the action and method attributes to redirect the main page to a Thank You page and extract the user's email from the URL. However, I would reconsider using these attributes in the future. I read a post in the Frontend Discord community suggesting using a single HTML page where the Thank You message is just a dialog or modal.
What challenges did you encounter, and how did you overcome them?The challenges I encountered were form validation and redirecting the main page to the Thank You page. I overcame these challenges by seeking help from the Discord community and reading related MDN articles like client-side form validation and sending form data.
What specific areas of your project would you like help with?The areas that you can provide help are the form validation and redirecting the main page to Thank you page:
-
Did I cover all scenarios for the validation?
-
Is implementing the redirect with action and method attributes considered a best practice?
Any feedback is much appreciated !!
Community feedback
- @juliengDevPosted 3 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 helpful0@ralphvirtucioPosted 3 months agoHi @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
Please log in to post a comment
Log in with GitHubJoin 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