# Build a Random Quote Machine help with Background

**URL:** <https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333>\
**Category:** I Built This\
**Created:** [October 12, 2019, 6:09pm UTC](https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333 "2019-10-12T18:09:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![libormarko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/libormarko/32/112785_2.png) [@libormarko](https://forum.freecodecamp.org/u/libormarko)\
**Post date:** [October 12, 2019, 6:09pm UTC](https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333/1 "2019-10-12T18:09:34Z")

</div>

Hi people,

I am working on one of the front-end projects. I am building it with React. Here is my  
[Codepen](https://codepen.io/libormarko/pen/rNNxwpd).

I’d like to do:

1. Have a background color for the full screen.
2. The background color changes always by clicking the new quote button.

It does the same in this [project](https://codepen.io/freeCodeCamp/full/qRZeGZ) . But it is not build with React.

Does anybody have any idea how to do it?

Thanks a lot!

Libor

---

<div class="post-metadata">

**Author:** ![Ethanefung](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ethanefung/32/34417_2.png) [@Ethanefung](https://forum.freecodecamp.org/u/Ethanefung)\
**Post date:** [October 12, 2019, 9:29pm UTC](https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333/2 "2019-10-12T21:29:33Z")

</div>

There’s many different ways you can go about doing it, but it’s not too different from your css styles that you’ve written in your initial Random Quote Machine project. The way I would go about it is the following

```auto
/* css */
/* reset the body DOM element box model */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

```

if you were to inspect the DOM tree using chrome devtools you’d see something like this

```auto
<body>
  <div id="quote-box">
    <section>
    /* a bunch of logic here */
    </section>
  </div>
</body>

```

That is because what ReactDOM is doing behind the scenes is appending your React component on the `div` with an `id=quote-box`.  
So you can just expand the direct child of `#quote-box` to take up the entire height of the screen.

```auto
/* css */
#quote-box > section {
  min-height: 100vh;
}

```

As for changing the background-color, you can call the `setState` method in your `ajax` success callback.

---

<div class="post-metadata">

**Author:** ![libormarko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/libormarko/32/112785_2.png) [@libormarko](https://forum.freecodecamp.org/u/libormarko)\
**Post date:** [October 12, 2019, 10:02pm UTC](https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333/3 "2019-10-12T22:02:15Z")

</div>

OMG, that is super easy. I was definitely looking into it too much. Anyway thanks a lot! You are amazing.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 1:29pm UTC](https://forum.freecodecamp.org/t/build-a-random-quote-machine-help-with-background/321333/4 "2021-02-06T13:29:30Z")

</div>