Ping landing page using Parcel & Tailwind & Vanilla JS
Design comparison
Solution retrospective
none, still getting used to form validation tho
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?specifically on the js code, is there anyway to make it more clean or any more suggestions for it?
Community feedback
- @huyphan2210Posted about 1 month ago
Hi, @geomydas, I reviewed your solution and have a few thoughts:
- I'm a bit puzzled about why you wanted to clean up your JavaScript code, as there’s not much going on in it right now.
- I believe the goal of the JavaScript in this challenge should be to handle email validation and form submission. Currently, you're relying on the built-in HTML email validation, as you’re using
type="email"
in theinput
. While that’s fine, Tailwind is just styling the validity state based on that. I’d suggest enhancing the validation by adding a pattern attribute, for example:
<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
The
pattern
attribute allows you to specify a regular expression (regex) that further restricts the format of the email input. This gives you more granular control over what constitutes a valid email address beyond the default browser behavior. If you don't know regex, I'd suggest to do your research on it.- For the
form
submission, instead of resetting theform
after submission, I’d recommend providing feedback to the user that their email was successfully submitted. You could display a small notification or text message confirming the submission. If the challenge doesn't specify a design for this, feel free to create your own solution.
Hope this helps!
Marked as helpful0@geomydasPosted about 1 month ago@huyphan2210 i'm planning to start more projects with form validation in it and this is the most ideal challenge to get feedback on since its small and it is easy to identify more issues.
also, is there an alternative that uses the regex inside the js instead of the pattern attribute?
1@huyphan2210Posted 30 days ago@geomydas
Instead of applying a
pattern
directly on theinput
, you can handle the validation using theonchange
event and perform regex validation in JavaScript:<!-- index.html --> <input type="email" required onchange="handleInput()" />
// script.js function handleInput() { // Use regex for validation here }
0 - @kaamiikPosted 30 days ago
Hi. Congrats for doing this challenge. I have some few notes in your code I wanna mention:
-
The logo image should be inside your
header
and as ana
tag. -
The social links inside the footer seems not centered. You can use
display: grid;
withplace-content: center;
to center them.
0@geomydasPosted 30 days ago@kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.
0@geomydasPosted 30 days ago@kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.
0@geomydasPosted 30 days ago@kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.
0@kaamiikPosted 30 days agoYea aspect-ratio can be a solution too. I did not test the grid here but remember I did the same way for the svgs inside the circle box. @geomydas
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