Mobile first - Fylo landing page (HTML-CSS/SASS)

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted about 3 years ago

  Hey Benjo, this is great! 🎉

  I think you can get more of a curve on the grey panel at the bottom, by using the SVG just at the bottom of the .hero div and then setting the background color of .about to match the SVG. You'll need to remove the margin at the bottom of the .hero and use padding instead.

  You've done a great job with the email validation, but I don't think you need to get the errorMessage span at the start of your script. You could retrieve the relevant span by traversing from event.target, either using nextElementSibling or parentElement.querySelector('.hero__form--error'):

  function setFormState(input, errorMessage, className, message) {
    input.classList.add(className);
    errorMessage.classList.add(className);
    errorMessage.textContent = message;
    errorMessage.style.animation = 'errorPop 350ms ease';
    setTimeout(() => {
      input.classList.remove('error', 'success');
      errorMessage.classList.remove('error success');
      errorMessage.style.animation = 'none';
    }, 3000);
  }
  
  function checkEmail(event) {
    event.preventDefault();
    const input = event.target.email;
    const errorMessage = input.nextElementSibling;
    if (!validateEmail(input.value)) {
      setFormState(input, errorMessage, 'error', 'Invalid Email, Please check your email');
    } else {
      setFormState(input, errorMessage, 'success', 'Email Successfully Submitted');
    }
  }
  

  I've also removed some of the duplication by creating a setFormState method, which hopefully makes the code a little less busy and easier to read.

  Finally I would recommend removing your commented code, it's not a big deal but it's the kind of thing that makes your code look a bit unprofessional, so it's probably better to remove it especially if you are applying for junior roles.

  Hope that helps! 😄

  Marked as helpful

  1

  ---

  

  Benjo Quilario•1,810

  @benjoquilarioPosted about 3 years ago

  @mickyginger Thank very much, It's a great help

  0