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

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

#accessibility#bem#sass/scss#lighthouse
Vanza Setiaā€¢ 27,795

@vanzasetia

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Everyone! šŸ‘‹

Finally, I completed another PREMIUM challenge! šŸŽ‰

It was a challenge where I needed to play around with the background images. They were tricky! I also improved my old Regular Expression from the Base Apparel challenge. I had written everything that I learned in the README file. So feel free to check it out! (and give feedback on it šŸ˜„)

Now for the questions:

  • I added alternative text for the Spotify, Apple Podcast, Google Podcasts, and Pocket Casts logos. However, the paragraph above the form element has mentioned all the platforms. I'm not sure that they are decorative or informative images. So, what do you think about it?
  • If you try using a screen reader on my website, can you understand the page content?
  • Can you navigate this website comfortably using your keyboard?

Any questions on the technique that I'm using are welcome! šŸ˜

Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! šŸ˜€

Thanks!

Community feedback

Yazdunā€¢ 1,310

@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 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,795

@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 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

@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

0
Hexerā€¢ 3,680

@Phalcin

Posted

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,795

@vanzasetia

Posted

@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,680

@Phalcin

Posted

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

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