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

Ping coming soon page using react (vitejs)

@Imhandegbelo

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

Mukwende 1,370

@mukwende2000

Posted

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 helpful

1

@Imhandegbelo

Posted

@mukwende2000 Thank you for your feedback man. I really appreciate. Unto the next challenge 😃

1
Mukwende 1,370

@mukwende2000

Posted

What empty state are you talking about

1

@Imhandegbelo

Posted

@mukwende2000 I was talking about submitting the form with an empty email field. So sorry for replying this late

0
Mukwende 1,370

@mukwende2000

Posted

@Imhandegbelo no problem, it looks like you have fixed it now right? or maybe am not understanding the quesion?

0

@Imhandegbelo

Posted

@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 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