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

Check the validation of the input and assign a state to the button

duongns-vn 210

@duongns-vn

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?

  • Check the validation of the email when the user enters it. email.addEventListener('input', updateButtonState)
  • Update submit button status and color based on email validity. function updateButtonState()
  • Show or hide error messages depending on email validity.
  • Change the color of the submit button when hovering in or out if the email is valid. onmouseover onmouseleave
  • Display success notification and email value when the user presses the submit button and the email is valid. addEventListener('click', function)

Community feedback

N1Dovud 170

@N1Dovud

Posted

Hi, there! Great project! I liked it. As for feedback, if you pay attention to the text input field, when I click it, its border color becomes yellow, whereas according to the design, it needs to be black or smth close to that. Another thing I noticed is your website is not responsive, it only works for desktop but not for tablets or mobile devices. Do consider this and if you need some help, you can check out my solution. I hope I was of some help. Have a good day!

1

duongns-vn 210

@duongns-vn

Posted

Thank you for your feedback. I checked the response and it seems to work. As for the input, why is it yellow? It's because I wrote code to check the input value directly.

If the user does not enter the correct value, the invalid warning will remain until the input is correct, when correct the button is allowed to be pressed.

// Event listener to validate email on input change
email.addEventListener('input', updateButtonState);

// Event listeners to change button color on hover if email is valid
submitButton.onmouseover = updateButtonState;
submitButton.onmouseleave = updateButtonState;

If entered incorrectly, the button will not work. I wanted it to look a little more special than the design, lol. I also took a look at your solution, everything is very good, congratulations.

Thank you very much!

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