Frontend Mentor | Ping coming soon page with accessible subscription form coding challenge solution

Solution retrospective

I want to add fade out & fade in effect on .subscribeForm_feedback element when it's text is changed. To do this i can:

add a class to hide the element
change the text
remove the class to show the element So steps 2 and 3 should be delayed until the element fades out. I did just that in one of the challenges (code). The question is, is there a way to achieve the same effect without hardcoding the delay value in js?

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

Hey Alex, awesome work on this challenge! Your solution to the delay is absolutely fine. You could tie your CSS and JS values together inlining the transition time in your HTML using a Custom Property and then accessing it in your CSS and JS. But, I wouldn't say that's a better solution than just hardcoding the delay value in this instance.

Alex Kim• 1,325

@alex-kim-dev

Posted about 4 years ago

Thank you, Matt! I'm pretty much enjoying Frontend Mentor, thanks for all the challenges! I had no idea i can pull out ccs variables in JS. That's awesome! Will update this solution in a bit.

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

@Alex-K1m you're welcome! Yeah, you can set it in your HTML like this: <div style="--transition-duration: 0.2s;"> and then access it in both your CSS and JS to tie them both to that single declaration. That can get a bit messy though. Another way is detailed in this How to get CSS values in JavaScript article, which would be a good approach.

Ping coming soon page with accessible subscription form

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community