# Random quote generator

**URL:** <https://forum.freecodecamp.org/t/random-quote-generator/18096>\
**Category:** General\
**Created:** [July 7, 2016, 3:50pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096 "2016-07-07T15:50:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kfc5135](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@kfc5135](https://forum.freecodecamp.org/u/kfc5135)\
**Post date:** [July 7, 2016, 3:50pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/1 "2016-07-07T15:50:54Z")

</div>

Hello wonderful campers, I hope you are having a great day.  
I am in desperate need of your help. I have almost completed my random quote generator, the problem that I am having is that I am unable to add the **fadeIn effect**. I want to transit slowly into another color instead of suddenly changing it (I hope I am making sense)  
I have added the code to do this on **line 17** of JS but for some reason, I am **failing** completely.  
Here is a link to my pen -

> **[KrvzxV](https://codepen.io/xamdate/pen/KrvzxV)**
>
> ...

Please Help \_ /\ \_

---

<div class="post-metadata">

**Author:** ![kfc5135](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@kfc5135](https://forum.freecodecamp.org/u/kfc5135)\
**Post date:** [July 7, 2016, 3:53pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/2 "2016-07-07T15:53:45Z")

</div>

Also for some reason, it won’t work here. I need to open it on codepen for it work correctly

---

<div class="post-metadata">

**Author:** ![tpleszcz](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@tpleszcz](https://forum.freecodecamp.org/u/tpleszcz)\
**Post date:** [July 7, 2016, 3:56pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/3 "2016-07-07T15:56:19Z")

</div>

Hi mate,  
I thing that all you have to do is to add “transition: all 1s;” to your body tag in CSS.  
regards  
Tomasz

---

<div class="post-metadata">

**Author:** ![kfc5135](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@kfc5135](https://forum.freecodecamp.org/u/kfc5135)\
**Post date:** [July 7, 2016, 3:59pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/4 "2016-07-07T15:59:18Z")

</div>

> [@tpleszcz](#):
>
> “transition: all 1s;”

Nope, no luck. Thanks for trying though

---

<div class="post-metadata">

**Author:** ![tpleszcz](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@tpleszcz](https://forum.freecodecamp.org/u/tpleszcz)\
**Post date:** [July 7, 2016, 4:03pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/5 "2016-07-07T16:03:17Z")

</div>

It is quite strange because I have edited your code and it worked form me. All I did was changing css body tag so it look like:

body{  
background-color: #eee;  
transition: all 1s;  
}

With this background color is changing over 1s period of time.

---

<div class="post-metadata">

**Author:** ![kfc5135](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@kfc5135](https://forum.freecodecamp.org/u/kfc5135)\
**Post date:** [July 7, 2016, 4:11pm UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/6 "2016-07-07T16:11:42Z")

</div>

It worked! I copied what you wrote, maybe there was some spelling mistake. Thanks for the help man. I did not know about the transition effect (so much to learn).

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 3:47am UTC](https://forum.freecodecamp.org/t/random-quote-generator/18096/7 "2021-01-16T03:47:52Z")

</div>