yusufipek/quote-machine
1
0
Fork 0
mirror of https://github.com/yusufipk/quote-machine.git synced 2026-09-11 10:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fetch quote api and display

Browse Source
This commit is contained in:
Yusuf İpek
2021-01-24 16:48:15 +03:00
parent 3c9c75f668
commit 85d6f7575a
2 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintcache
+1 -1
View File
@@ -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"},{"size":500,"mtime":1611491491707,"results":"5","hashOfConfig":"6"},{"size":201,"mtime":1611492929577,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611491491707,"results":"8","hashOfConfig":"6"},{"size":287,"mtime":1611492997507,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/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/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"},{"size":500,"mtime":1611491491707,"results":"5","hashOfConfig":"6"},{"size":201,"mtime":1611492929577,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611491491707,"results":"8","hashOfConfig":"6"},{"size":1061,"mtime":1611496041983,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/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",[]]
src/components/quote-box/quote-box.jsx
+40 -10
View File
@@ -1,15 +1,45 @@
import React from "react";
import "./quote-box-styles.scss";
const QuoteBox = () => {
return (
<div className="wrapper">
<div id="quote-box">
<h3 id="text">Deneme</h3>
<p id="author">Deneme</p>
{/* new quote button */}
class QuoteBox extends React.Component {
constructor(props) {
super(props);
this.state = {
quotes: null,
displayQuote: "null",
displayAuthor: null,
};
}
random = () => {
return Math.floor(Math.random() * 1600);
};
async componentDidMount() {
const response = await fetch("https://type.fit/api/quotes");
const json = await response.json();
await this.setState({ quotes: json });
const randomNum = this.random();
await this.setState({
displayQuote: this.state.quotes[randomNum].text,
displayAuthor: this.state.quotes[randomNum].author,
});
}
render() {
if (!this.state.quotes) {
return <div>Loading...</div>;
}
return (
<div className="wrapper">
<div id="quote-box">
<h3 id="text">{this.state.displayQuote}</h3>
<p id="author"> {this.state.displayAuthor} </p>
{/* new quote button */}
</div>
</div>
</div>
);
};
);
}
}
export default QuoteBox;