Base-Apparel-coming-soon-page

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

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 = "[email protected]";
const password = "supersecret";

• instead try this,

const firstName =  "Your",
       lastName =  "Name",
       emailAddress = "[email protected]"
       •••                
       •••         // 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!