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

#bem#accessibility

@garcialexco

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


Hello! Here is my solution for this challenge. πŸŽ‰

I had a lot of fun coding this challenge. The Javascript was the most difficult part, but it made a lot of sense after a while of tinkering.

Any ideas on how to improve in any way are greatly appreciated! Much thanks. πŸ™πŸ½πŸ‘»

Community feedback

Stephen Johnstonβ€’ 320

@sjohnston82

Posted

The styling looks great! One thing I noticed was you are not passing the input email to the success page.

This can easily be done by setting the form data into local storage and then retrieving it on the success page:

let userEmail = document.getElementById("emailAddress").value;
localStorage.setItem("email", userEmail);

and in a script tag on the success page:

const email = localStorage.getItem("email");
const spanElement = document.getElementsByClassName("user-email-success")[0];
spanElement.textContent = email;

Marked as helpful

1

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