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

Community feedback

• 

  Yazdun•1,310

  @Yazdun

  Posted about 3 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

  22

  Marked as helpful
• 

  Hexer•3,620

  @EmmanuelHexer

  Posted about 3 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

  12