Random Quote Machine - Twitter link and animation

JavaScript
1

Hello!

I’ve recently finished the Random Quote Machine project. It’s passing all tests but there are some things missing.

The twitter icon throws an error when clicked. What’s weird is that if I open the browser’s Dev console and click on the ‘href’ value of the ‘anchor’ tag; it works perfectly.

I also wanted to add some animation to the project. The idea is that every quote should play a “fade in” animation (I’m currently using animate.css, but I’ve also tried making my own css animations). So what I’m trying to do is removing and then adding the class that triggers said animation, but it doesn’t seem to work. I tried using React’s lifecycle functions and some jQuery tricks but I just can’t figure it out.

Any help will be appreciated! Thanks in advance!

2

Hi,
Welcome.

About the twitter links, I think it has to do with CORS. I didn’t know how to solve it.
About the animation, the basic steps is like this:

  1. fadeIn on start
  2. when user click new quote, fadeOut,
  3. fill the thext,
  4. fadeIn again.

So you can create a toggle state for this, like fadeToggle: true

In you div with id = quote-text, give the className:

className={`animate__animated animate__slower ${this.state.toggleFade ? 'animate__fadeInUp' : 'animate__fadeOutUp'}`}

This will toggle the classname

Note: in React JSX, you must use className instead of class

Then in your handleQuote:

  1. set the toggle to false
  2. give new text.
  3. set the toggle to true again.

But since this code will going fast, you can’t see it.
So you can add setTimeout when setState the new quote.
Don’t forget to clearTimeout on componentWillUnmount.

Hope this helps
Note: you can use just 1 framework at a time, React and jQuery is too much for this. But your app looks cool :+1:

1 Like
3

Hi! Thanks for your answer.

That’s too bad about the Twitter thing. I really want it to work but I’m just clueless.

I can’t believe I didn’t think of using a fadeOut animation! To be honest, initially I wanted the quotes to just fade In each time they changed with no fadeOut inbetween. Do you think that could be possible?

You’re right about className vs class. I’m not sure why that didn’t throw an error before.

Then in your handleQuote:

  1. set the toggle to false
  2. give new text.
  3. set the toggle to true again.

But since this code will going fast, you can’t see it.
So you can add setTimeout when setState the new quote.
Don’t forget to clearTimeout on componentWillUnmount.

I’m not exactly sure how to do this. Could you elaborate? They way I see it, ‘toggleFade’ should start as ‘true’ in the constructor, then I’d need to ‘setState’ in ‘handleQuote’ to change ‘toggleFade’ to ‘false’ and then update the state once again somewhere changing only the ‘toggleFade’ value. But where/when exactly?

Also thanks for the nice comment. I’m glad you like it :smiley:. I know I didn’t need to use both frameworks but I think it would be nice going the extra mile to make it look better.

EDIT:

Here’s what I came up with:

The state property ‘toggleFade’ switches between the ‘fadeInUp’ class and a ‘hide’ class which add the “visibility: hidden” CSS property to the quote-text div.

The handleQuote function first toggles the ‘toggleFade’ property and updates the text. That way, the update text is now hidden. Then, within a ‘setTimeout’ function, the ‘toggleFade’ property changes again, triggering the animation once again with the new quote.

This kinda works, but I’ve noticed that if you try click on the ‘New Quote’ button before the animation is done playing, the moving div sometimes blocks the button a bit.

EDIT 2:

Animations appear to be working, but somehow it breaks every now and then if you click on the button before the animations are done. Not really sure why.

4

it doesn’t work from codepen, it is a new limitation of the twitter api, it’s because codepen display the site in an embed and twitter doesn’t allow tweets from embeds

the tests pass anyway, the only solution is to have the project live somewhere else

2 Likes
5

Good to know! Thanks!

6

If you want to check that the button works as expected you can use the Debug mode view (Change View > Debug mode).

Here are the docs that talk about the iframe limitation (all Codepen views are inside an iframe except the debug view).

Web Intents

Web Intents cannot be loaded inside an iframe. A Twitter author must view the full webpage before deciding to author a new Tweet or Tweet action pre-populated by your specified Web Intent or follow a specified Twitter account.

1 Like
7

Thanks! I’m curious, though; the Example given for the project seems to work outside Debug mode. How come?

8

The example project is using target="_top" on the link, target="_parent" should work as well.

2 Likes
9

The Design looks Beautiful and neat :+1: just a little note, the new quote button doesn’t have a good contrast with the background, so it is hard to see

1 Like
10

Thanks and noted! Maybe I’ll change it to a full button instead of just the outline.

11

Hi

I fork your pen here:
FCC Random Quote Machine (codepen.io)
I put comment on it.

If you don’t understand, you can ask me anytime. :smiley:

1 Like
12

Amazing! Thanks a lot.

I really liked your idea of setting a ‘min-height’ to the ‘quote-txt’ so that it doesn’t change size. I’ll try to use some relative unit so it looks better in different screen sizes.

Thanks again!

EDIT: I almost forgot. I noticed you “cleartimeout” within the “componentWillUnmount” function. Why do you do that there? I understand that function executes when the component is removed from the DOM, but as far as I understand that never happens. We just update its content.

13

i think just changing the outline to white instead of gray will do the job probably…

1 Like
14

About componentWillUnmount from React docs:

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount() .

I used it to prevent memory leaks.

1 Like
15

Great! I thought it played some role in the overall animation process.

So far it’s working!
I noticed that if I remove the “disabled={!this.state.toggleFade}”, even though the button doesn’t really have time to disable in the current state of my app, somehow it messes the animation up.

It’s not that important, but I’d like to understand why does that happen.

16

How does it mess up?
I didn’t think it has to do with the animation.

But if you continuously clicked the button than yes, it will messed it up.

17

I appears to disrupt the animation. It stops working for a few clicks and then it goes back to working properly. I can’t really explain why.

18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.