Check the validation of the input and assign a state to the button
Design comparison
Solution retrospective
- 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
- @N1DovudPosted 4 months ago
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-vnPosted 4 months agoThank 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 GitHubJoin 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