Skip to content
Submitted 21 days ago

Newsletter Sign Up with Success message

Ejiro Frances•260
@Ejiro-Frances
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of:

  • Improved mobile first building process

  • Improved sass and css: I got to add to my css vocabulary and I got the chance to improve sass usage.

  • Learning JavaScript Form Validation: This project challenged me to learn and implement custom form validation, allowing me to fully control when the form shows success and error messages, and tailoring the validation to real-world use cases.

  • Achieving Responsive Design: Ensuring that the newsletter form looks great across all devices and screen sizes, showing a clear and user-friendly experience on both desktop and mobile views, I learnt to use one img tag in my HTML as this was a review I got from a previous project.

  • Improved Problem-Solving Skills: Debugging, testing, and making adjustments to get everything working smoothly, required a lot of problem-solving, which has strengthened my skills.

What challenges did you encounter, and how did you overcome them?

Here are a few challenges :

  • Getting the icon to be an image: I overcame this through research.

  • Browser-Based Validation Conflict: Initially, the automatic browser validation interfered with my custom validation messages. To solve this, I added the novalidate attribute to disable the browser's built-in checks, allowing my JavaScript code to handle validation independently and display custom error messages.

  • JavaScript Value Updating: I noticed that the email value wasn't updating as expected. To resolve this, I adjusted the code to capture emailInput.value directly within the submit event, ensuring I got the latest value on form submission.

  • Dynamic Display of Success and Error Messages: Managing visibility between the form and success message sections proved tricky. I streamlined this by using classList.add and classList.remove to toggle between views, giving the user immediate feedback based on their input.

What specific areas of your project would you like help with?

  • Choosing the Best CSS Units: Feedback on using different CSS units (like px, rem, em, %) would be valuable, especially for responsive design and scaling elements effectively. Guidance on when to use each unit type in various situations (such as font sizes vs. layout spacing) could refine my approach.

  • Enhanced Email Validation: While the current regex covers many email formats, advice on a more comprehensive pattern would help ensure the form accepts all valid email formats while catching more errors.

  • Accessibility Improvements: Suggestions on using ARIA roles and attributes to make the form accessible to screen readers or improving keyboard navigation would be great for making the form more inclusive.

  • CSS and JavaScript Structure Optimization: Input on structuring my code for readability, scalability, and performance.

Community feedback

  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 16 days ago

    Hey there, firstly well done with the project. I do have some tips and recommendations that I hope will be helpful for you in your future projects:

    Your styling

    1. I would recommend to shorten your hover animations, as most user will not interact with an element for so long, unless there's a really good reason to.
    2. I think you forgot to style the text in your Thanks for subscribing element.
    3. You could definitively try to play around more with your spacing specially with challenges like this which allow you to have the whole screen and provide you some visual guides.
    4. Though it is a personal preference, the project could look better if you could center your element properly on the screen as well as adding proper spacing between your main elements and the attribution.
    5. Remember to style your input and button elements accordingly.
    6. Seems like you are not leveraging the functionality of the picture tag to set different image sources depending in the screen size to optimize your project.
    7. This is also personal preference, but I would recommend to work with rems and ems as is, rather than using the font-size: 62.5% trick. This will make it easier to handle consistency in bigger projects.
    8. In regards to your question about px, rems and ems. Though it is completely up to you, it is commonly recommended to utilize rems or ems whenever possible since they provide better responsiveness. I personally utilize rems for spacing, font-sizes, transforms, breakpoints, etc. and only utilize px when dealing with really small values, like with border-radius, etc.

    About your JS

    1. Your attribution element disappears if the email submission is successful but it does not appear again after dismissing the success message (I personally think this could be avoided altogether, though is just personal preference).
    2. Try to leverage the use of ids more as that improves performance.
    3. Just for future projects, it could be beneficial to group specific functionality (like hiding and showing elements) into functions as this makes your project more flexible and scalable.
    4. About your question with the email validation, I personally also don't know what is the best way. I also use Regex expressions, as it allows me to account for a wide range of possible emails, but of course this could also vary depending on the scope of your project and how precise you have to be. Sorry that I cannot give you a better answer from my side.
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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