Intro component with sign up form solution

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  hey @ojitxslml lovely job here! 🥳 - the page looks great and is nice and responsive.

  Here's a few points you might like to consider:

  1. I would make your p with a firstBox_title into a header, probably a h1 in this case as there's no other headers on the page - this will just add a bit more structure.
  2. You can probably put your link text directly inside an a element without the need to add a p as a child. (As you have at the moment under the secondBox_banner link).
  3. Rather than using js to add the selected class, you could try using the focus psudo class on the input elements. This should achieve the same thing, and make your life easier.
  4. For the list of inputs, I saw you had to do some tricky calcualations to get the width working. I would suggest, setting the form as display: flex with direction as column, and using gap and padding on the parent to control the widths of the inputs for example:

  form.register__form {
      display: flex;
      flex-direction: column;
      gap: 2em;
      padding: 2em;
  }
  

  Then removing the set width and margins from the inputs themselves. This just seems more robust to me.

  5. For the errors I would switch between visibility:hidden and visibility:revert. The advantage being that this retains space in the DOM for the hidden element and reduces jank. You may need to adjust the spacing between inputs to account for this.

  6. For the JavaScript, I would consider having a look into event delegation rather than looping through the inputs on each submission, but this is just a personal preference! Perhaps consider it next time you find yourself in a similar situation?

  Well done and keep up the good work!! 👍

  Hope this helps - let me know if anything is not clear.

  Cheers 👋

  Dave

  Marked as helpful

  1

  ---

  

  Juan Pablo Urra•230

  @ojitxslmlPosted almost 3 years ago

  @dwhenson Hello!! thanks you so much for taking your time reviewing my code, Everything is clear, I would keep on mind your suggestions and I'll do some research to use all of these on new challenges and projects, I'm very grateful 🙌

  0