Submitted about 3 years ago

My First JavaScript Project

Fraser Watt• 1,790

@fraserwat

Preview site View code

This is a solution for...

Ping single column coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This was a tough one!! First time I'd worked JavaScript into a Solution on here, pleased with out that turned out! 😄

The bit that really stumped me wasn't the JS, but working with CSS elements when there are more than one class. Took me a while to figure that out and I'm still not 100% sure on it, but got there in the end...

There is still one bit that's a bit annoying, which is when the validation error message appears, because its not a hidden element anymore it pushes the image below down a tiny bit. Any ideas how to fix this?

Community feedback

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

Great work on this one, your layout seems fine and it resizes well in mobile state.

Regarding your issue, well, since you are making it appearing and not appearing right, instead of making this display: none then transitioning it to other display style. You could just made it opacity: 0 at first, then add opacity: 1 if the user clicks the submit button, that way your elements at the bottom will not be pushed down if the text appeared because of the display.

Hey, also adding a cursor: pointer to the submit button will be much great, since it will feel more natural right, since it is an interactive element.

Overall, your work is great^

Fraser Watt• 1,790

@fraserwat

Posted about 3 years ago

@pikamart ah yeah, cool! This works! My concern here is that as the text is still there (just not showing up), it would still show up on e.g. screen readers, or not?

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

@fraserwat Well, if we were to use what I suggested, then the screen reader will read it even if it is invisible, the trick is applying aria-hidden=true to the element when it is invisible and then when the error pop, we could just set the aria-hidden attribute to false in the listener, but it is quite long.

Instead another approach will be the visibility: hidden instead of opacity. But first, sorry for suggesting opacity, I did not think about screen readers. visibility styling will be your best choice in here, when no error, visibility: hidden if the error appears, visibility: visible

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hello, Fraser Watt! 👋

Well done on this challenge! 👍 It's a rather simple one, but like you, I sometimes find those to be especially tricky in places! 😂

As pikamart mentioned, using the visibility property to hide the error message seems like a good call for this scenario. Besides that, I think the rest of your code looks good! 👍

Of course, keep on coding (and happy coding, too)! 😁

Joran Minjon• 610

@DrKlonk

Posted about 3 years ago

And if you'd like to add a transition to the error message, you can use both! Then you can add the transition to the opacity and use the visibility to keep it off screen.

I did something similar here

Please log in to post a comment

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