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

Ping Single Column Coming Soon Page using Flexbox and JavaScript

Chantae 320

@taepal467

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Frontendmentor Community, I had a hard time with this challenge. My main issue here is that I can not figure out how to remove the error message once the input is valid. When the email input is in the correct format, when you hit the Notify Me button, the error message "Please provide a valid email address" is still displayed. I will appreciate the feedback as to how to resolve this issue. Thank you.

Community feedback

T
Grace 30,650

@grace-snow

Posted

Hi

To fix that I think you need to

  • have hidden attribute on the error msg by default in html
  • have aria live attribute on the error massage by default in html
  • in js remove the aria invalid altogether, I don't think that should be on error msg at all
  • in js when it's valid, return to original state - remove error class, re-add hiddens to msg

You're very close here I think it's just not quite finished yet ☺

1

Chantae 320

@taepal467

Posted

@grace-snow Thank you so much for the feedback. I will make sure to use this for reference. I have actually tried removing the error -msg attribute but for some reason it would not show even if there was an error.

0
T
Grace 30,650

@grace-snow

Posted

@taepal467 make sure you check this on small phone screens too. I'm.seeing a lot of overflow on mobile

0
Chantae 320

@taepal467

Posted

@grace-snow Yes I just now became aware of that issue myself. I thought I understood how to use mobile-first workflow. The max-width and min-width confuses me a little. I definitely need to practice more and looking at tutorials on how to make the web browser mobile friendly.

0
T
Grace 30,650

@grace-snow

Posted

From looking at the code I can see a few issues

  • the input has no label. It's no good wrapping an input in a label tag with no text, usually that technique is onky used for radios and checkboxes as they have text within them
  • font size must never be in px, use rem
  • input should not have a width and height. Same with button. Width 100% would be ok. Use padding inside input.
  • no idea why you've got lots of negative margins. That's creating a load of work for the browser and doesn't seem necessary. Is it because you're trying to mitigate against default browser styles perhaps?
  • don't style on IDS. Add classes to those elements and style on those instead
  • check where you're using padding vs margin and units like em vs rem. Em should only be used very intentionally when you want it to inherit from parent font size
  • next time make mobile the default styles and use min width media query. Your code will be much shorter and more performant that way. As it stands with this desktop first approach you have to work harder to override the styles
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