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

Sign up form

Bazthosβ€’ 430

@Bazthos

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First exercise on HTML forms and their use with JS.

What I got from this project :

  • Using several functions to clarify my code and decrease the writing of it;
  • Use of regular expressions and first thoughts on data validation;
  • First experience on event propagation with preventDefault();

I used very simple regular expressions for the validation of the mail, if you have any advice to improve it I'm interested!

Good continuation

Community feedback

Vanza Setiaβ€’ 27,855

@vanzasetia

Posted

Hi, Bazthos! πŸ‘‹

Well done on this challenge! Your solution looks great! πŸ‘ It's nice that you have a hidden h1 on this site (if this is a real website the h1 would exist somewhere else on the page).

Regarding the RegEx for the email, I recommend searching the RegEx on the internet, and then once you find the one that almost works for you (it's hard to find to exact or "perfect" RegEx right away) then try improving the existing RegEx. I suggest using Regexr to help you understand what the RegEx is doing and at the same time learn RegEx and improve it as best as you can. This way, you ended up learning RegEx and possibly creating your own RegEx.

Now, some suggestions from me.

  • input with type="submit" is a browser legacy. So, my recommendation is to use button with type="submit" instead. Also, use CSS to uppercase the text. Uppercased text in HTML would more likely be spelled by screen readers.
  • Every input needs a label element. So, I recommend having a sr-only label or even better (in my opinion) is to make the label as a placeholder (you can read this article by CSS Tricks about Form Validation with pure HTML and CSS).

Keep up the good work! πŸ‘

Marked as helpful

1
Ivanβ€’ 2,630

@isprutfromua

Posted

Hi there. You did a good job 😎

keep improving your programming skillsπŸ› οΈ

your solution looks great, however, if you want to improve it, you can follow these recommendation:

βœ… Keep using HTML5 validation attributes (required, minLength, pattern etc).

βœ… Don’t re-implement stuff HTML5 attributes can do for us (no unnecessary JS).

βœ… Follow a consistent HTML format. It is important to remain consistent in your HTML style. You can use prettier to help you with that but the goal is to always follow a consistent way you code your markup.

I hope my feedback will be helpful. You can mark it as useful if so πŸ‘ it is not difficult for you, but I understand that my efforts have been appreciated

Good luck and fun coding 🀝⌨️

Marked as helpful

0

Vanza Setiaβ€’ 27,855

@vanzasetia

Posted

@isprutfromua Hey Ivan! It's great that you've been given helpful feedback. However, I don't recommend asking people to mark your comment as helpful. It might create additional pressure on the author of the solution to mark your comment as helpful.

So, my recommendation is to say something like "I hope you find this helpful" or "I hope my feedback helps", but please avoid asking for your comment to be marked as helpful explicitly.

Keep in mind that, the main goal of giving feedback is to help people and it is recommended not to expect anything in return. If the solution author marks your feedback as helpful, that's a bonus. πŸ™‚

P.S. I recommend reading the Frontend Mentor community guidelines to know more about what behaviors should be avoided and encouraged.

2
Ivanβ€’ 2,630

@isprutfromua

Posted

@vanzasetia good point, thanks

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