Responsive coming soon page using Semantic HTML, SCSS, and JS
Design comparison
Solution retrospective
First time using media queries in JavaScript! I used them to change the border-width
on the desktop version when the user enters an invalid email. Is there a way to do this with pure CSS?
If there are any issues with the functionality or appearance of the website, please let me know!
Also, any feedback regarding how to check the validity of the email through JS more elegantly would be appreciated.
Community feedback
- @k-stopczynskaPosted over 2 years ago
Hi!
For email validation- just use regex. Your solution unfortunately got me submit successfully the email: %^%&^*@gmail.com and kstop@$%^&%$&$.com. As you know they are not correct email adresses. As for the media-queries in JS- when you really need to- use them. But mostly styling should be done in css. You could use JS to add a class for certain elements and just style this class. I used to do the same thing:)
Congratulations on finishing the challenge! You really did well on matching the design:) Keep on coding!
Marked as helpful0@VenusYPosted over 2 years ago@k-stopczynska Thank you for the feedback!
I actually came across regex while researching how to code this part of the project, but I read somewhere that regex shouldn't be used for email validation as it sometimes causes valid emails to be rejected, which is why I opted for this simpler method despite its flaws. However, I will look further into it off the back of your comment.
If you know the reason why regex is not recommended by some for situations like this, please let me know. :)
0 - @k-stopczynskaPosted over 2 years ago
Hi!
Well, there is at least one reason I would think of: regex doesn't check if there is such a domain or if this email is actually yours (so security reasons, probably some tokens would be in play for this). Usually in regex you also don't check for addresses with IP in it.
But for email validation like this newsletter- I would say it's enough for filtering if email is valid. For logging purposes- definitely not but I never dived into it that much at this point of my learning.
Hope this helps:)
0@VenusYPosted over 2 years ago@k-stopczynska That makes sense, thank you for the information. :)
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