Responsive Layout with CSS Grid and JS Validation for Email

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Kevin! 👋

  Congratulations on finishing this challenge! 👏 Good effort on this challenge! 👍

  Some feedback from me.

  • I would recommend adding aria-describedby to the input element that points the the id of the error element (paragraph). Next, add aria-live to the error element so that it's get read by the screen reader when the message appear. Also, I highly suggest using the hidden attribute instead inline styling with JavaScript which should be avoided just like inline styling in HTML.
  • Don't use br for presentational purposes. The screen readers would read out the br element as "break". Let the text wrap where it needs to be or used span and then make it as block element.
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity which makes it hard to maintain (especially on a big project).

  I hope you find this information beneficial. Happy coding! 😄

  Marked as helpful

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  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 steps:

  ✅ there is no reason to store debbuging code in the repository

  console.log(isValidEmail);
  

  ✅ you can place this code into the separated function. Dont reeat yourself

    if ( isValidEmail ) {
      document.getElementById("invalid").style.visibility = "hidden";
      document.getElementById("invalid-msg").style.visibility = "hidden";
    } else {
      document.getElementById("invalid").style.visibility = "visible";
      document.getElementById("invalid-msg").style.visibility = "visible";
    }
  

  ✅ plese use just one css unit instead of using rems, ems and pxels

  
  .content {
  	text-align: center;
  	margin: 2rem 2em;
  }
  
  h1 {
  	text-transform: uppercase;
  	font-size: 2.5rem;
  	line-height: 42px;
  	letter-spacing: 10.83px;
  	font-weight: 600;
  	margin-bottom: 1rem;
  }
  

  ✅ try to avoid styling tags

  button, input, form
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0