Front End Libraries - Random Quote Machine

Hi!

Looking for feedback on my random quote project. https://codepen.io/ceptember/pen/jeBamj

It passed the tests, but I wanted to include a jQuery fade transition and it’s giving me some trouble. I thought I could use fadeOut() to get rid of the previous quote box, then set the React state to the new quote and box color, and bring the box back with fadeIn(). But it wants to set the new one first, and then fade it out and then back in. I thought I could use a callback function to make sure nothing happened until after it faded out, but it still doesn’t give a smooth transition:

getQuoteCallback(){
this.setState({randomNum : Math.floor(Math.random()*quotes.length)})
$("#quote-box").fadeIn(1000);
}

getQuote(){
$("#quote-box").fadeOut(1000);
this.getQuoteCallback();
}

I’m also looking for any other general feedback on this project.

I saw on this forum that a lot of people used a quote generator API, but I didn’t do that since it looks like that’s one of the topics of the next certificate, and it didn’t seem productive for me to spend time on it at this stage.

Thanks in advance!

1 Like

Text (content) isn’t an animatable property like styles are. You may have to fade out the opacity, then get a new quote, then fade back in in that order. I skipped learning jQuery because I won’t need it, so I can’t give you the specific solution you seek, but I did it in React that way without jQuery, if I recall correctly.

Other feeback:

  • Tweet button isn’t working. You may need “http://www.” prepended to the href attribute.

  • Sometimes you get the same quote from your randomizer. Since you have a “State” variable, it’s easy to reshuffle the deck until you get a different one.

  • when the color of the quote background changes, the quotation marks don’t mirror the transition - it’s jarring.

  • The core functionality is good.

This is more like a quick fix, but you can wrap the call to getQuoteCallback in a setTimeout.

getQuote(){
  $("#quote-box").fadeOut(1000);
    setTimeout( () => {
      this.getQuoteCallback();
    }, 1000);
}

I wouldn’t call learning about how to use an API, unproductive. I would suggest at least coming back to this later and using an API when you feel more ready.