Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Benjo Quilarioβ€’ 1,810

@benjoquilario

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


HelloπŸ‘‹

This is my 20th frontendmentor challenge. At first sight I really thought it easy but I guess It's not, because this is the first time I encounter double email validation, but still with some experiment and playing around I did it.

Feel free to drop you feedback and suggestion, I really appreciate it.

Thanks! 😁

Community feedback

Mike Haydenβ€’ 1,005

@mickyginger

Posted

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

@benjoquilario

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord