Skip to content
Submitted about 4 years ago

Ping coming soon page with accessible subscription form

Alex Kim•1,325
@alex-kim-dev
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

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

  1. add a class to hide the element
  2. change the text
  3. 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
    @mattstuddertPosted over 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.

    1
    Alex Kim•1,325
    @alex-kim-devPosted over 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.

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 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.

    1

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