Base-Apparel-coming-soon-page

Community feedback

• 

  Eileen dangelo•1,600

  @Eileenpk

  Posted over 2 years ago

  Hi Godstime! your project looks good.

  Forms were hard for me too when I started, and validation can get messy. Here are a few things I see that might help.

  In your HTML:

  • Add an aria-label to the email input for accessibility

  <input type="email" name="email" id="email" placeholder="Email Address" aria-label="Email Address">
  
  

  In your JS:

  • Change the event listener to use input event instead of click, this will fire every time the input field changes
  • Add or remove classes instead of manipulating them
  • Check for an empty input before checking for a pattern match, currently if I try to submit the form with an empty email input, no error is shown

  email.addEventListener('input', validateEmail);
  
  function validateEmail() {
    if (email.value.trim() === '') {
      paragraph.innerHTML = 'Please provide an email';
      email.classList.remove('bg-form');
      error.src = '';
    } else if (!email.value.match(patterns)) {
      paragraph.innerHTML = 'Please provide a valid email';
      email.classList.add('bg-form');
      error.src = '../images/icon-error.svg';
    } else {
      paragraph.innerHTML = 'Please submit the email';
      email.classList.remove('bg-form');
      error.src = '';
    }
  }
  

  Hope you found this helpful!

  • Let's connect on LinkedIn! - @Eileenpk

  11

  Marked as helpful
• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  JAVASCRIPT 🟡:

  • The way you declared variables are need to be well structured and organized

  ---

  • Take a look at the following example code which describes an efficient way of declaring variables

  const firstName = "Your";
  const lastName = "Name";
  const emailAddress = "example@some.com";
  const password = "supersecret";
  

  • instead try this,

  const firstName =  "Your",
         lastName =  "Name",
         emailAddress = "example@some.com"
         •••                
         •••         // n number of declarations
         password = "supersecret";   // make sure to add a semicolon at end of last declaration
  

  • This single line declaration with separated commas will helps you to have a better structured code and improves readability though

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  01

  Marked as helpful