Build a Random Quote Machine help with Background

Code Feedback
1

Hi people,

I am working on one of the front-end projects. I am building it with React. Here is my
Codepen.

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 . But it is not build with React.

Does anybody have any idea how to do it?

Thanks a lot!

Libor

1 Like
2

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

/* 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

<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.

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

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

3

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