Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter Sign Up Form (HTML, CSS & JS)

P
vcollins1 410

@vcollins1

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Completing this challenge

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

No major challenges with this one. Took me a few minutes to figure out that I had to use focus and not border for the input field.

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

Any tips would be helpful

Community feedback

Grego 1,310

@Grego14

Posted

Hello! I have been reading your code and here are some recommendations:

When you click the dimiss button you are changing the display property of the card to block when you should change it to its initial state flex, otherwise it causes overflows.

I also recommend that you read a little about event delegation, so that you don't have to use two eventListeners to handle the buttons and just one. Event Delegation Example.

Something like this:

document.addEventListener("submit", e => {
  e.preventDefault();
  if(e.target === subscribe){
    /* ... */
  }else if(e.target === dismiss){
    /* ... */
  }
});

I hope this helps!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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