Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Newsletter sing up message using CSS, HTLM and JS

Daniela•100
@danielaser
A solution to the Newsletter sign-up form with success message challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I would like to know if there is a best way to write the JavaScript functionality for the validation and submit button. I did it as I thought.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deletedPosted over 1 year ago

    I guess you can argue a lot about this. Depending on the complexity of what you are trying to do one could be better than the other. Generally for simple things like email or username validation regex is fine. For more complex calculations personally I would recommend against complex regex because they are not very easy to read + complex to understand therefore very error prone and not easy to fix.

    About the submit button, it's interesting that you choose to do it this way. Most people will try to do some trick like hide the previous card and show a new one with toggling attributes from js. Or doing string interpolation to create the html and then injecting the html into the page.

    The only problem in what you did is that you don't have access to the email from the user input. Probably in reality if you rendered this page in the server you would easily have access to it but in this case you can do probably some hack and either pass it from the url or use a global variable or something like this. And that means that you have to write some js in the success page.

    Edit: Actually string interpolation and then replace the html is probably the most preferred way of doing it in this case. There is no reason for the success card to be a separate page logically speaking. A separate page is making sense if the page itself would make sense to be all alone which in this case it wouldn't. And also you can have access to the email very easy.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub