Pod Request Access Landing Page | HTML CSS Sass JS (Regex)

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted over 2 years ago

  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 also hasSubmitted = 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

  2

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  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 if statement 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 using switch statement?
  • 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.

  1

  

  Yazdun•1,310

  @YazdunPosted over 2 years ago

  @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

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  Hi, checked all your projects and i must say, you are really good.

  I started programming about a month ago, I'm still learning html and css now. Can you give me a roadmap on what you did to become as good as you are now? I hope to hear from you soon.

  Thanks, Phalcin

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Phalcin Thank you! By the way, it looks like it's the same message that you sent me through email, am I right? If so then I am going to reply to your email as soon as possible. 🙂

  1

  

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  @vanzasetia kk, I wanted to get your reply that's why i sent it here too. Will be waiting. Thanks.

  0