Skip to content
Submitted over 3 years ago

Pod Request Access Landing Page with email verify

DSoluk•120
@dsoluk
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Updating solution with fixes as per feedback from @vanzasetia and @TheCodeGuru

Struggled with replacing onclick attribute with listener (was getting strange behavior as seemed to execute logic as if submit had been clicked) but got through it with help from another solution (Blondeli)...not sure I get why had to use event.preventDefault.

Also, need to understand practical application of SoC in this context as suggested by @vanzasetia . Sounds great but not sure exactly what to do. If simple as naming classes used in js then that makes sense but suspect more than that.

Thanks for feedback!!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi there! 👋

    Good effort on this challenge! 👍

    Regarding your question, I usually have a container that set a max-width to 1440px. I don't think it is necessary to create a new layout or design for a screen size above 1440px. So, for a screen size that is above 1440px are going to see a layout horizontally center (sometimes vertically center too).

    Now, some feedback from me.

    • The image-host.jpg is a decorative image. It is not adding useful information for the user and the site will be fine without it because there will be no missing information if the image doesn't exist. So, leave the alt empty.
    • The alternative text for the company logos should not contain any words that are related to "image" such as icon, picture, etc. It's already an image element so the screen readers would tell those images as images.
    • The input-container should be a form element. The input element and the submit button should live inside the form element. So by doing this on JavaScript you can grab the form element and listen for the submit event and then validate the user input.
    • I would recommend using addEventListener instead of using onsubmit attribute on the HTML. It's a good practice to separate the functionality and the presentation on its own file.
    • Also, I highly suggest grabbing the DOM element by using js- classes that is specifically for JavaScript purposes. That way, if you want to refactor the CSS or change the CSS class name, you won't have to worry about JavaScript. By doing this, you are practicing one of the programming principle which is Separation of Concerns.

    That's it! I hope this information is useful! 😁

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the card title needs to be in a heavier font weight.

    Secondly the color of the associated brands needs more opacity since it's not well contrasted

    I hope this helps

    Cheers

    Happy coding 👍

    Marked as helpful

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