@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
@benjoquilario
Posted
@mickyginger Thank very much, It's a great help