Intro component with sign-up form

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  You have some HTML problems in this that definitely need fixing

  1. Why is try it free for 7 days a button not a paragraph? What do you think clicking that would do?
  2. The form is inaccessible as you have no labels! They cannot be empty. You need to learn how to accessibly hide text
  3. I can see you've tried to programmatically link inputs and errors here but it doesn't look right to me. You should point the aria describedby to a non-hidden element wrapping those messages, and that should have aria live. Eg add a div around each error paragraph, move the ID to that and add the aria-live attribute. This will ensure errors get read out only when relevant
  4. Use margin (or gap with flex/grid) to create vertical space between the form elements not brs

  Marked as helpful

  0

  ---

  

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  Re number 3 as this change would break your javascript - I recommend you update the javascript selectors to use classes and look for them using querySelector

  For example

  const emailError = document.querySelector('.js- email-error');
  

  Using js- prefixed classes like this is a common practice to separate concerns and improve code readability.

  IDs are better left alone for their real purpose - anchoring, and because they play such an important role in making code accessible. I've written a post about all of this if you're interested to read more

  Marked as helpful

  0
• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  Where is your git ignore? It was in the starter code provided. You are never meant to upload node modules!!

  You will now need to

  • detele node modules locally (and package-lock)
  • adjust the gitignore locally
  • commit that new git ignore
  • push changes
  • reinstall node modules locally

  I a real project, If you need to build using packages you tell the host what build step they need to use. This is very easy on sites like Netlify or Vercel. This would for example, build your css based off your latest code (css is not normally checked in and included in the remote repo but is fine to do on these practice projects so mentors can see the final code)

  Marked as helpful

  0

  ---

  

  Miguel Evangelista•520

  @MiguelaebPosted over 1 year ago

  @grace-snow I really appreciate your feedback, I'm going to fix it and resubmit the solution.

  0