@Yazdun
Posted
Hello Vanza, this is so awesome man well done, your commitment is so inspiring keep it up š I played around with your solution for a little bit, and as perfect as it is, I have some suggestions :
- for error handling, I personally prefer to handle errors before submission, I declare a variable called
let hasSubmitted = false;and as long as it is false, it means user has not submit the form yet, then after first submission, if there is any error, I show the error and alsohasSubmitted = true;. this let me to show errors dynamically after failed submission as users type their email by using something along the following code š
heroInput.addEventListener("input", e => {
hasSubmitted && // handle errors here
});
and also I disable the button as long as there is any error after first failed submission, so users won't need to click submit to find out if there is any error or not and errors will be handled as they are typing. I know this is a personal preference but I think it had worth mentioning.
- also there is another thing : using nested if and else statement, again that is not really an issue but I'm gonna tell you my personal approach and maybe you find it useful. in your js you've used š
if (isEmailInvalid) {
event.preventDefault();
if (heroInput.value) {
showAlertMessage(message);
setTimeout(hideAlertMessage, 5000);
} else {
showAlertMessage(message);
setTimeout(hideAlertMessage, 5000);
}
}
but I think using switch instead of nesting if and else is more readable, maybe you find following code more readable too š
switch (isEmailInvalid) {
case false:
console.log("it's all good");
break;
case heroInput.value:
showAlertMessage(errorMessage);
setTimeout(hideAlertMessage, 5000);
break;
default:
showAlertMessage(errorMessage);
setTimeout(hideAlertMessage, 5000);
break;
}
that's all I had to say and I love to know what you think about em. and here I have a question :
- how much time do you spend on creating these challenges ? your README file is so nice and I haven't seen such a clean solution on frontend mentor, and do you still do these challenges on a mobile device ? forgive me for my curiosity though
Marked as helpful
@vanzasetia
Posted
Hi @Yazdun! š
Thank you for your detailed feedback! I really appreciate it!
- About the error handling, if I show the error message as the user typing the email, it is not a pleasant experience, especially if they are using a screen-reader. The alert message will be read every time the user type one letter. Also, I didn't see the use case to have a variable to know whether or not the user has submitted the email or not.
- I use nested
ifstatement so that when the user is trying to submit an invalid email (both empty input and invalid email) then I prevent the form from submitting any email address. Is there a way to prevent the submitting by usingswitchstatement? - Regarding your questions.
- For this challenge, I aimed to finish this challenge in 7 days, but I ended up finishing it in 10 days. Usually, it takes me up to 7 days (or more š) to finish a challenge. š
- The last challenge that I did by using a mobile device was the Order summary challenge and after that, I did the rest of the next challenges with a Laptop.
@Yazdun
Posted
@vanzasetia Yes you are right ! It is not pleasant experience for people with screen readers, there are solutions for that but it adds unnecessary complication to the code, so your approach makes more sense now.
you can prevent form from submitting in switch statement by using e.preventDefault() inside each case, I actually tested it in your code and it works as same as if and else statement, you can give it a shot yourself.
Thanks for your answers and keep up the good work
