HTML, CSS, Vanilla JS + SwiperJS

Community feedback

• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  Hi Diarrah! 👋🏻

  Your solution looks great! Regarding your questions:

  • Getting the error message to only appear when the input is focussed is a bit hard with your current structure. You currently have a label around your input, which isn't really doing anything you'd need a label for. If you can remove this, so that the input and the error are on the same depth you could write a selector like this to make it work I think: .form-control.error input:focus ~ small and set it to block in this case. That should only have the error show when the error class is active and the input is focussed.
  • When you toggle your menu you could also toggle a div or pseudo-element that has some styling like this: position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5);. So you just throw a dark layer on top of your page. Just make sure to set the z-index to the correct value so it's under your menu.

  Hope this helps! If not, let me know and we'll figure it out on Slack! 😁

  3

  ---

  

  Diarrah•3,418

  @DiarrahPosted over 4 years ago

  @GerbenDol Took your advice on the mobile nav overlay div & it worked perfectly! Thank you!

  1

  

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  @Diarrah Great to hear it worked!

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Diarrah, Gerben has already given you some great suggestions. Another option for re-validating the form when the user clicks out of the input would be to add a blur event listener to the input in your JS. Given your JS code, you could change the submit listener on your form to be a blur listener on your input. This would show and hide the error message sooner, which would give your "users" a faster feedback loop.

  Great work on this challenge!

  1