Ping coming soon page using react (vitejs)
Design comparison
Solution retrospective
- At first, I had a difficult time positioning the error texts on mobile but I handled that with media querries.
- I still have an issue with the empty state of the email section I had to compromise the design a little and opt for a
toast (react-toastify)
instead - Please I would like my solution to be reviewed for best practices.
- Any ideas on how to make the empty state error go away when the correction has been made would be appreaciated.
- Feedbacks are most appreciated
Community feedback
- @mukwende2000Posted over 1 year ago
I get it you don't want to do anything when the form is submitted with an empty email, but i think showing a notification is even much better for user experience, if you really just want to do nothing, you can do it all in the handleSubmit function, you don't need the errorCheck function
function handleSubmit() { let regex = /^([a-z0-9_\-.]+)@([a-z0-9_\-.]+)\.([a-z]{2,5})$/i if(!email) return if(regex.test(email)) { //your success logic here } else { //your error logic here } }
Again like i said, showing a notification is much better in my opinion, atleast someone will know why they are not proceeding to the next step.
Marked as helpful1@ImhandegbeloPosted over 1 year ago@mukwende2000 Thank you for your feedback man. I really appreciate. Unto the next challenge 😃
1 - @mukwende2000Posted over 1 year ago
What empty state are you talking about
1@ImhandegbeloPosted over 1 year ago@mukwende2000 I was talking about submitting the form with an empty email field. So sorry for replying this late
0@mukwende2000Posted over 1 year ago@Imhandegbelo no problem, it looks like you have fixed it now right? or maybe am not understanding the quesion?
0@ImhandegbeloPosted over 1 year ago@mukwende2000 I didn't fix it, I just walked around it with the toast notification
0
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