Skip to content
Submitted about 2 months ago

newsletter-sign-up-with-success-message-main

AymaneOnline•330
@AymaneOnline
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'm mainly proud of the JavaScript part of the challenge. I'll try next time to do the styling faster because it took me quite some time.

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

For the styling, what I can remember is that I was trying to figure out how to make the "subscribe" button positioned in the bottom of any mobile device. (by using margin-top: auto).

Another problem that I've encountered is about CSS Specificity, where I needed to increase the specificity of the .hidden class using display: none !important; to prevent display: none to be overridden by something like display: flex.

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

I need someone to tell me of the JavaScript code is good enough. The code works but I need to know if it does have any flaws and/or could be optimized.

Community feedback

  • webdevbynight•410
    @webdevbynightPosted about 1 month ago

    Here is some feedback about your JavaScript code, as you asked for:

    • if you use querySelector() with just an ID as an argument, it is better to use getElementById();
    • once you selected an element with querySelector(), you can reach any descendent element starting directly from this element: for example, once you did const signUp = document.querySelector('.sign-up');, you can reach the element with the .error-message class doing const errorMessage = signUp.querySelector('.error-message');, which is better for performances;
    • you can simplify your regular expression using just [a-z] to target letters and adding the i flag (to make the regex case-insensitive);
    • on line 21, you do not need the second part of the statement, since an empty string does not match the regular expression against which it is tested;
    • finally, think of the FormData API to retrieve the fields values submitted.

    I hope this feeback helps you.

    Marked as helpful
    1
    AymaneOnline•330
    @AymaneOnlinePosted about 1 month ago

    @webdevbynight Thank you for your feedback!

    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