updated handlechange, clicking button changes background, text, and author

src/App.css

@@ -0,0 +1,3 @@
+/* .App {
+  background-color: #ffadad;
+} */

src/App.js

@@ -1,12 +1,29 @@
+import { Component } from "react";
 import "./App.css";
 import QuoteBox from "./components/quote-box/quote-box";
 
-function App() {
-  return (
-    <div className="App">
-      <QuoteBox id="quote" />
-    </div>
-  );
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      backG: null,
+    };
+  }
+
+  // getting the background from quote-box
+  bgChange = (e) => {
+    this.setState({
+      backG: e,
+    });
+  };
+
+  render() {
+    return (
+      <div className="App" style={{ backgroundColor: this.state.backG }}>
+        <QuoteBox id="quote" handler={this.bgChange} />
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/quote-box/quote-box-styles.scss

@@ -10,7 +10,7 @@
     color: white;
     width: 800px;
     height: 400px;
-    background-color: black;
+    // background-color: #0077b6;
     border: 1px solid grey;
     border-radius: 5px;
     padding: 10px;
@@ -23,8 +23,5 @@
 
   #button {
     float: right;
-    bottom: 400px;
-    right: 95px;
-    position: fixed;
   }
 }

src/components/quote-box/quote-box.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, QuoteButton } from "../button/button";
+import { QuoteButton } from "../button/button";
 import "./quote-box-styles.scss";
 
 class QuoteBox extends React.Component {
@@ -7,8 +7,17 @@ class QuoteBox extends React.Component {
     super(props);
     this.state = {
       quotes: null,
-      displayQuote: "null",
+      displayQuote: null,
       displayAuthor: null,
+      color: ["#264653", "#2a9d8f", "#e76f51", "#e63946", "#bc6c25"],
+      backGroundApp: [
+        "#ffadad",
+        "#ffd6a5",
+        "#caffbf",
+        "#9bf6ff",
+        "#a0c4ff",
+        "#ffc6ff",
+      ],
     };
   }
 
@@ -17,6 +26,11 @@ class QuoteBox extends React.Component {
     return Math.floor(Math.random() * 1600);
   };
 
+  // creating random number for background
+  random2 = () => {
+    return Math.floor(Math.random() * 4);
+  };
+
   //   fetching the quotes and assigning it to displayquote/author states
   async componentDidMount() {
     const response = await fetch("https://type.fit/api/quotes");
@@ -35,6 +49,7 @@ class QuoteBox extends React.Component {
       displayQuote: this.state.quotes[randomNum].text,
       displayAuthor: this.state.quotes[randomNum].author,
     });
+    this.props.handler(this.state.backGroundApp[this.random2()]);
   };
 
   render() {
@@ -48,7 +63,10 @@ class QuoteBox extends React.Component {
 
     return (
       <div className="wrapper">
-        <div id="quote-box">
+        <div
+          id="quote-box"
+          style={{ backgroundColor: this.state.color[this.random2()] }}
+        >
           <div className="writing">
             <h3 id="text">{this.state.displayQuote}</h3>
             <p id="author">{this.state.displayAuthor}</p>