Design comparison
Solution retrospective
I’m proud for learning about using forms in HTML and using regular expressions to find a pattern in a given string, in this case an valid email address.
What challenges did you encounter, and how did you overcome them?I did find understanding regular expressions difficult due to fact they look daunting at first. After reading up on them and trying different examples I gained a better understanding but I will study more to understand their uses fully.
What specific areas of your project would you like help with?Any suggestions to improve my solution are welcome.
Community feedback
- @R3ygoskiPosted 7 months ago
Hello Jack, good job, your project is very good and very similar to proposed design.
I have only 1 suggestion, that's use a preventDefault in your form, because when it's empty, and you try to submit, it's reload the page.
To make this, you just need to give your form and ID, then in your JS you can select it with
querySelector
, then you just need to add a event listener to it. it will be something like that:const form = document.querySelector('#email-form') form.addEventListener('submit', (event) => { event.preventDefault() })
And probably after this, you will need to clear your input, because I noticed it was clearing because of the submit event. So as we removed it, you will need to do this:
email_input.value = ''
Now about your HTML, I highly recommend to use Semantic HTML, because it's more accessible and it's very important, an example where yo ucould use this, here:
<div class="header">
, instead of using<div>
tag you could use an<header>
tag, instead of<div class="form-section">
you could use a<section>
tag, and so on. If you want to see more about Semantic HTML, here's a link: W3School - Semantic HTML.Again, congrats for conclude your project, it's very good and well made. If something I said was unclear, please, comment below and I will try to help.
Marked as helpful0@Jack-OCPosted 6 months ago@R3ygoski Sorry for the late reply, thank you for the suggestions I’ll look to fix those parts of my code.
1
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