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

@JaredBrown1

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


I could not figure out how to get the custom red validation text under the input field, so I was hoping someone could give me some hints. I was only able to figure out how to customize the text of the popup validation already in place from the 'required' property on my input.

Community feedback

@AgataLiberska

Posted

Hi Jared! The best option I think would be to just have custom validation done with JS and control the visibility of the error message in JS. If you want to stick to CSS, you could try adding the error message right underneath the input in your markup, set display: none, and use input:invalid + p (or something like that) to select it and change the display rule. The :invalid pseudoclass kicks in as soon as the user starts typing and goes away when the input is valid.

Nice work on this challenge btw, but do have a look at how your solution works on tablet size (you can emulate different viewport sizes in your browser). On some sizes, the image is really stretched out and it covers up the logo.

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