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

.eslintcache

@@ -1 +1 @@
-[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":201,"mtime":1611492929577,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":1631,"mtime":1611514654596,"results":"10","hashOfConfig":"7"},{"size":243,"mtime":1611512231156,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1h1r0ga",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],["23","24"],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",["25"],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[],{"ruleId":"26","replacedBy":"27"},{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","severity":1,"message":"31","line":2,"column":10,"nodeType":"32","messageId":"33","endLine":2,"endColumn":16},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],"no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":542,"mtime":1611519261709,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":2105,"mtime":1611519235196,"results":"10","hashOfConfig":"7"},{"size":243,"mtime":1611512231156,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1h1r0ga",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],["23","24"],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

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() {
+class App extends Component {
-  return (
+  constructor() {
-    <div className="App">
+    super();
-      <QuoteBox id="quote" />
+    this.state = {
-    </div>
+      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>