Skip to content
Submitted about 3 years ago

Responsive landing page using CSS Grid

CodingDuck•390
@KaskaS-O
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everybody!

I'd be grateful if someonetake a look at my email validation code. For sure it's not perfect, but I'm just beginning with js challenges and any tips & tricks are welcome. At the beginning I wanted to create new element with error message, but have some problems with removing it after entering a correct email format. To solve it I decided to create the container for error message in html and only to change it's display when email format is incorrect. Not sure if it's the most elegant sollution, but it works ;)

Thanks for any feedback!

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted about 3 years ago

    Hey there, your solution looks very good on all screen sizes! I'd suggest you only a few things to improve it a bit:

    1. Links that don't have any visible text attached to them need to have aria-labels that screen readers can use.

    2. Your email validation would probably work just fine in the most common use cases but I'd suggest using a regex and test the input value against it, to cover as much as possible. You can find some online if you google it ^^

    Good luck!

    Marked as helpful
    0
    CodingDuck•390
    @KaskaS-OPosted about 3 years ago

    @FluffyKas Hi!

    Thanks for the advices. I fixed accesibility issues thanks to them and started reading about regex, definately I'll try it shortly.

    0

Please log in to post a comment

Log in with GitHub

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