Hi everyone,
I have been on this for almost two weeks now - I have completed the project using react-app on vscode.
My problem remains how to separate it into html, css(scss) and js on codepen. I need assistance please.
I also wish to ask FCC to help newbies like me on relevant materials for further studies. I am completely new to this field.
Thank you in advance.
import React from "https://cdn.skypack.dev/react";
import {FaTwitter} from "https://cdn.skypack.dev/react-icons/fa";
class QuoteMachine extends React.Component{
constructor(props) {
super(props);
this.state = {
quoted: "Leadership is all about an imperfect being perfecting other imperfect beings.",
quoter: "Mazi Chiadi Mbibi",
tweet: ""
}
}
clickHandler () {
const myQuotes = {
"quotes": [
{
"quote":"Life isn’t about getting and having, it’s about giving and being.","author":"Kevin Kruse"},
{
"quote":"Whatever the mind of man can conceive and believe, it can achieve.","author":"Napoleon Hill"},
{
"quote": "Strive not to be a success, but rather to be of value.", "author": "Albert Einstein"},
{
"quote":"When you make mistake in the choice of a wife, you've equally made mistakes in the choice of children.","author":"Ijeghoahia Romanus Mbibi"}
]
}
const arrLength = myQuotes.quotes.length;
const quoteObj = myQuotes.quotes[Math.floor(Math.random() * arrLength)];
this.setState({
quoted: quoteObj.quote,
quoter: quoteObj.author,
})
}
tweetHandler() {
this.setState({
tweet: this.state.quoted + "\n - " + this.state.quoter
})
}
render() {
return (
<div id="quote-box" className="container-fluid">
<div id="quote-area">
<div id="text">
<p>{this.state.quoted}</p>
</div><br />
<div id="author">
<p>- {this.state.quoter}</p>
</div><br />
</div>
<div className="row-cover">
<div className="row">
<div className="col-xs-5">
<button id="new-quote" onClick={this.clickHandler.bind(this)} className="btn btn-success">
<span class="text-center">New quote?</span>
</button></div>
<div className="col-xs-2"></div>
<div className="col-xs-5">
<a id="tweet-quote" onClick={this.tweetHandler.bind(this)}
href={`https://twitter.com/intent/tweet?text=${this.state.tweet}`} target="_blank" rel="noopener noreferrer">
<FaTwitter fontSize="2em"/>
tweet
</a>
</div>
</div>
</div>
</div>)
}
};
ReactDOM.render(<QuoteMachine />, document.getElementById("quote-box"))
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36
Challenge: Build a Random Quote Machine
Link to the challenge:
