From eaa94811fcc6929325293352affc75a043328937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sun, 24 Jan 2021 23:15:11 +0300 Subject: [PATCH] updated handlechange, clicking button changes background, text, and author --- .eslintcache | 2 +- src/App.css | 3 ++ src/App.js | 29 +++++++++++++++---- .../quote-box/quote-box-styles.scss | 5 +--- src/components/quote-box/quote-box.jsx | 24 +++++++++++++-- 5 files changed, 49 insertions(+), 14 deletions(-) diff --git a/.eslintcache b/.eslintcache index b29acc2..6068f6d 100644 --- a/.eslintcache +++ b/.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"] \ No newline at end of file +[{"/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"] \ No newline at end of file diff --git a/src/App.css b/src/App.css index e69de29..ce5c1ca 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,3 @@ +/* .App { + background-color: #ffadad; +} */ diff --git a/src/App.js b/src/App.js index eddf220..b15ad98 100644 --- a/src/App.js +++ b/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 ( -
- -
- ); +class App extends Component { + constructor() { + super(); + this.state = { + backG: null, + }; + } + + // getting the background from quote-box + bgChange = (e) => { + this.setState({ + backG: e, + }); + }; + + render() { + return ( +
+ +
+ ); + } } export default App; diff --git a/src/components/quote-box/quote-box-styles.scss b/src/components/quote-box/quote-box-styles.scss index ee4f53a..5dd579c 100644 --- a/src/components/quote-box/quote-box-styles.scss +++ b/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; } } diff --git a/src/components/quote-box/quote-box.jsx b/src/components/quote-box/quote-box.jsx index fefc0e8..f8bc96e 100644 --- a/src/components/quote-box/quote-box.jsx +++ b/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 (
-
+

{this.state.displayQuote}

{this.state.displayAuthor}