Build a Random Quote Machine help with Background

Build a Random Quote Machine help with Background
0

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

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.

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