This is my solution to the newsletter-sign-up on Frontend Mentor

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@olaide-hok
Great work here!
Some improvement would be to grab the email provided and display it in the success message and add comments.
const emailSpan = document.querySelector('.description-two span'); // Span to display the submitted email // Function to handle form submission and validation const checkInput = () => { const emailValue = mail.value.trim(); // Get and trim the email input value if (isValidEmail(emailValue)) { // If email is valid: sectionOne.style.opacity = '0'; // Hide the form section sectionTwo.classList.add('active'); // Show the success message section errorMsg.textContent = ''; // Clear any error message emailSpan.textContent = emailValue; // Dynamically update the email in the success message } else { // If email is invalid: errorMsg.textContent = 'Valid email required!'; // Show error message mail.classList.add('error-input'); // Add error styling to the input field } };
The success message display can also be restyle to match the figma design better.
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