text: const form = document.getElementById('form');
  const username = document.getElementById('username');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const password2 = document.getElementById('password2');
  
  // Show input error message
  function showError(input, message) {
      const formControl = input.parentElement;
      formControl.className = 'form-control error';
      const small = formControl.querySelector('small');
      console.log(small);
      small.innerText = message;
  }
  
  // Show success outline
  function showSuccess(input) {
      const formControl = input.parentElement;
      formControl.className = 'form-control success';
  }
  
  
  //Check email is valid
  function checkEmail(input) {
      const regularExpression = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (regularExpression.test(input.value)) {
          showSuccess(input);
      } else {
          showError(input, `${getFieldName(input)} not a valid email`);
      }
  }
  
  // Check required fields
  function checkRequired(arrayOfInputs) {
      arrayOfInputs.forEach((input) => {
          if (input.value.trim() === '') {
              showError(input, `${getFieldName(input)} is required`);
          } else {
              showSuccess(input);
          }
      });
  }
  
  // Check input length
  function checkLength(input, min, max) {
      if (input.value.length < min) {
          showError(input, `${getFieldName(input)} must be at least ${min} characters`);
      } else if (input.value.length > max) {
          showError(input, `${getFieldName(input)} must not be more than ${max} characters`);
      } else {
          showSuccess(input);
      }
  }
  
  //Check passwords match
  function checkPasswordsMatch(input1, input2) {
      if (input1 === input2) {
          showSuccess(input2);
      } else {
          showError(input2, 'Password does not match');
      }
  }
  
  // Get field name
  function getFieldName(input) {
      return input.id.charAt(0).toUpperCase() + input.id.slice(1);
  }
  
  // Event Listeners
  form.addEventListener('submit', function (event) {
      event.preventDefault();
  
      checkRequired([username, email, password, password2]);
      checkLength(username, 3, 15);
      checkLength(password, 6, 25);
      checkEmail(email);
      checkPasswordsMatch(password, password2);
  });
  
      // if (username.value === '') {
      //     showError(username, 'Username is required');
      // } else {
      //     showSuccess(username);
      // }
  
      // if (email.value === '') {
      //     showError(email, 'Email is required');
      // } else if (!isValidEmail(email.value)) {
      //     showError(email, 'Email is not valid');
      // } else {
      //     showSuccess(email);
      // }
  
      // if (password.value === '') {
      //     showError(password, 'Password is required');
      // } else {
      //     showSuccess(password);
      // }
  
      // if (password2.value === '') {
      //     showError(password2, 'Password Confirmation is required');
      // } else if (password2.value === password.value) {
      //     showSuccess(password2);
      // } else {
      //     showError(password2, 'Invalid Password');
      // }
  //});
  