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

@avinno

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


  • So, I have not used JS with regard to window size due to normally being able to do this with CSS, but with this project, I felt it was necessary to meet the goals of the challenge. After the fact, I do believe I could have used flexbox with "order" CSS property or grid with similar to reconfigure where the error message showed up, but I continued on with JS and adding second mobile error message element to hide/show depending on the width of the screen. There are always multiple ways of tackling a project and elements of a project and I may do it differently in the future, but I was okay with testing my JS skills here even if some may say it was doable with CSS.
  • Besides the above, I am sure of my code most everywhere else. No major/catastrophic concerns.
  • No questions at this time!

Community feedback

@jcbotero

Posted

Hello Aaron, excellent code. Perhaps the only thing I could suggest is that your input field is accepting values that are not email type. A possible solution is to place the following in that input:

type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}"

Also, you can add an oninvalid=" " function, if you want to customize the error message.

If you think this helped you, please mark the comment as helpful. Thank you!

Marked as helpful

0

@avinno

Posted

@jcbotero Hey! Thanks for the feedback!

I had originally a catch for if the input was blank and if there were no "@" signs found in the input value. I will have to go back and look at why this is not working in my JS anymore. Initially it worked, but I changed my structure up for JS screen width detection, so I am thinking when I did that I scrambled something, including my brain.

Thanks for that! I'll look to fix and update.

0

@avinno

Posted

@jcbotero Also, I do think regex is a good thing (and likely best practice) to include in reference to your feedback. I should go back and add that instead. I didn't mean to say or suggest what I originally did was best practice, but I did initially have it catch empty submits and also submits that did not include @ sign, but for some reason it is not catching my second condition of if there is no @ sign, throw the error as well. I'm looking at it now to see what's up, but if you see any reason my second condition of .includes for the @ sign detection, feel free to let me know!

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