Random Quote Machine - Animation

JavaScript
1

Hello, I’m currently doing the random quote machine for the front end development libraries projects. Everything test is passed, but I want to add a fadeout followed by a fadein animation for the text, the author and also the background color of the body element (similar to the fcc one : https://random-quote-machine.freecodecamp.rocks/)

I’m using React and jQuery to change the colors. I’ve tried to look at the jquery documentation but I didn’t get something that is suitable.

Here is my codepen : https://codepen.io/Mhm_Rs/pen/abKqVKa

Thanks for your help !

2

Have you tried looking into this using the googles? You mentioned you are using jQuery. I believe jQuery has some built-in fade effects. But I’m pretty sure this can be done with basic CSS as well.

3

I did. But the fadein and fadeout effects of jQuery make the entire body disappear and reappear. I would like to make only the #quote-box element persist and while the body fades in and out, and I didn’t find a way to do that
or maybe something similar with react

4

hello and welcome back to fcc forum :slight_smile:

looking at your css codes, i couldn’t find any “transitions” type animation rules in them

#new-quote{
  width:100px;
  height:25px;
  float:right;
  margin-right:18px;
  border:none;
  background-color:lightgrey;
  margin-top:8px;
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  color:linen;
}

perhaps you might want to look into that, currently it simply removes previous quotes and then shows new quote!! happy learning :slight_smile:

5

I don’t really know what you did here because you removed it from your code. The best way to get help is to try something and if it doesn’t work then leave it in there so we can see what you did and help you fix it.

6

The jQuery docs tell you why that happens.

The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none , so the element no longer affects the layout of the page.

You can use the animate method instead.

Although, you really do not need jQuery for this and just a transition property on a few of the selectors would do it.

1 Like
7

I figured something cool out with the animate method. I’m really not fond of animations with css, that’s why I did it with jQuery. Thank you for your help :smile:

8

sorry about that. I’ll make sure to follow this advice from now on !

9

Adding jQuery just to avoid writing a few lines of CSS is not ideal.

More to the point, I just noticed it is a React app and you really should avoid using jQuery and React together if possible.

I would wrap the app inside a full-width/height container for the background color and set the styles using inline styles on the elements. You can reference the variables directly in the JSX.

<div class="container" style={{ backgroundColor: colors[colorIndex] }}>
  <div id="quote-box" style={{ color: colors[colorIndex] }}>
   
  </div>
</div>

Write a few transitions for background color and color, or as it is a single page app with so few elements write it for every element using a single universal selector.

* {
  transition: color 1s ease, background-color 1s ease;
}

Or if you are really lazy use the all property (it should generally be avoided but for this page it isn’t too bad)

* {
  transition: all 0.5s ease-out;
}
1 Like
10

I’ve added this to my code and removed the jquery part. Thank you very much :smile:

11

Much better :+1:

I’d also suggest getting rid of absolute positioning and float.

For centering CSS grid is very nice.

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

For laying out child elements like the two buttons, flexbox is a good choice.

#clickable {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
1 Like
12

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