Design comparison
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
- @jcboteroPosted about 1 year ago
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 helpful0@avinnoPosted about 1 year ago@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@avinnoPosted about 1 year ago@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
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