Newsletter sign-up form with success message

Community feedback

• 

  Alberto Raúl José•610

  @alberto-rjPosted 6 months ago

  👋 Hi @mkboris!

  👏 Congratulations on investing your time and taking your frontend skills to the next level with the Newsletter sign-up form with success message challenge.

  You did a good job! 👍 ❤️️

  But I still have a few suggestions that could help you improve your solution to this challenge even more:

  📌 IN YOUR index.html AND script.js FILES: I've noticed that you've also taken great care with the accessibility of your form, especially for screen reader users, which is great!

  For accessibility reasons, it would also be nice to consider the lines of code below when it comes to form validation:

  On line 67 of your index.html file: Add the attribute role=“alert” to your element responsible for error messages so that assistive technologies can also better understand what the content of this element is about.

  👎 DON'T

  <span aria-live="polite" id="error-message"></span>
  

  👍 DO

  <span role="alert" aria-live="polite" id="error-message"></span>
  

  On line 76 of your index.html file: Consider it good practice to add the aria-describedby=“error-message” attribute to your email field only when it is in the invalid state to ensure that assistive technologies cannot access the error message unnecessarily.

  On line 20 to 33 of your script.js file:

  • When your email field is valid:

  input.setAttribute(“aria-invalid”, “true”);
  input.setAttribute("aria-describedby", "error-message");
  

  • When your email field is invalid:

  input.removeAttribute(“aria-invalid”); // Or use: input.setAttribute(“aria-invalid”, “false”); 
  input.removeAttribute("aria-describedby");
  

  🔎 Useful resources:

  • W3SCHOOLS: Accessibility Errors
  • MDN: aria-invalid
  • MDN: aria-describedby
  • MDN: ARIA: alert role

  📌 ON LINES 21 TO 29, 39 TO 40 AND 44 TO 45 OF YOUR script.js FILE: It is not good practice to specify the styling of HTML elements directly in JavaScript. Alternatively, you could specify your styling through CSS classes and then add/remove these classes with JavaScript as required.

  👎 DON'T

  HTML:

  <button id="btn" onclick="beRed()">Click me to be red!</button>
  

  JavaScript:

  function beRed() {
    const btn = document.getElementById("btn");
    btn.style.color = "red";
  }
  

  👍 DO

  HTML:

  <button id="btn" onclick="beRed()">Click me to be red!</button>
  

  CSS:

  .text--red {
    color: red;
  }
  

  JavaScript:

  function beRed() {
    const btn = document.getElementById("btn");
    btn.classList.add('text--red');
  }
  

  🔎 Useful resources:

  • CSS vs. CSS-in-JS: How and why to use each
  • MDN: Element: classList property
  • MDN: Element: click event

  📌 ON LINE 14 TO 32 OF YOUR script.js FILE: In addition to validating the form after the user submits it, it would also be nice if you validated it while the user was entering an entry in the email field.

  👁 Note: You could implement this by adding a listener for the input or keyup event to your email field.

  🔎 Useful resources:

  • MDN: Element: input event
  • MDN: Element: keyup event
  • MDN: Client-side form validation

  So, @mkboris, these are my suggestions for your solution. I sincerely hope they can help you in some way.

  Keep learning, coding and sharing! 🌟

  Happy coding! 🚀

  0