// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
//This array contains all of the quotes, the links to the images of the quotes' authors, the links to the Wikipedia articles of the quotes' authors, and the name of the authors, in this particular order in each array element.
const allQuotesArray = [["Lost time is never found again.", "https://github.com/TazExprez/Logos/blob/master/Benjamin-Franklin-PNG.png?raw=true", "https://en.wikipedia.org/wiki/Benjamin_Franklin", "Benjamin Franklin"],
["Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.", "https://github.com/TazExprez/Logos/blob/master/Arnold-Schwarzenegger-PNG.png?raw=true", "https://en.wikipedia.org/wiki/Arnold_Schwarzenegger", "Arnold Schwarzenegger"],
["They did not know it was impossible, so they did it.", "https://github.com/TazExprez/Logos/blob/master/Mark-Twain-PNG.png?raw=true", "https://en.wikipedia.org/wiki/Mark_Twain", "Mark Twain"],
["Folks are usually about as happy as they make their minds up to be.", "https://github.com/TazExprez/Logos/blob/master/Abraham-Lincoln-PNG.png?raw=true", "https://en.wikipedia.org/wiki/Abraham_Lincoln", "Abraham Lincoln"],
["Look up at the stars and not down at your feet. Try to make sense of what you see, and wonder about what makes the universe exist. Be curious.", "https://github.com/TazExprez/Logos/blob/master/Stephen-Hawking-PNG.png?raw=true", "https://en.wikipedia.org/wiki/Stephen_Hawking", "Stephen Hawking"]];
//Redux:
const RANDOM_QUOTE = 'RANDOM_QUOTE';
//This action creator function returns an action object.
const randomQuoteActionCreator = (singleRandomReduxQuote) => ({
type: RANDOM_QUOTE,
quoteDisplay: singleRandomReduxQuote[0],
imageDisplay: singleRandomReduxQuote[1],
authorLink: singleRandomReduxQuote[2],
authorDisplay: singleRandomReduxQuote[3]
});
//This reducer function returns the current state.
const randomQuoteReducer = (state = allQuotesArray[Math.floor(Math.random() * allQuotesArray.length)], action) => {
switch(action.type) {
case RANDOM_QUOTE:
return([
action.quoteDisplay,
action.imageDisplay,
action.authorLink,
action.authorDisplay
]);
default:
return state;
}
}
//Here you are creating the Redux store that will hold the state.
const store = Redux.createStore(randomQuoteReducer);
//React:
class Presentational extends React.Component {
constructor(props) {
super(props);
//This is the local state object.
this.state = {
singleQuoteArray: allQuotesArray[Math.floor(Math.random() * allQuotesArray.length)],
randomHover: false,
tweetHover: false
}
//Here this is getting binded with the three following methods so that these methods can use the properties of the Presentational component in their definitions.
this.getRandomQuote = this.getRandomQuote.bind(this);
this.onRandomHover = this.onRandomHover.bind(this);
this.onTweetHover = this.onTweetHover.bind(this);
}
//This method randomly selects an element from the allQuotesArray array, which contains a quote, the link to an image of the quote's author, the link to the Wikipedia article of the quote's author, and the author's name.
getRandomQuote() {
const oldSingleQuoteArray = [...this.state.singleQuoteArray];
let tempSingleQuoteArray = allQuotesArray[Math.floor(Math.random() * allQuotesArray.length)];
let repeatedSingleQuoteElement = false;
//This do-while loop checks whether the new quote being generated is the same as the current one. If it is the same, a new quote is generated until the new one is different from the current one.
do {
if(oldSingleQuoteArray[0] === tempSingleQuoteArray[0]) {
repeatedSingleQuoteElement = true;
tempSingleQuoteArray = allQuotesArray[Math.floor(Math.random() * allQuotesArray.length)];
}
else {
repeatedSingleQuoteElement = false;
}
} while(repeatedSingleQuoteElement);
//The state is only updated when a quote different from the current one is generated.
this.setState({
singleQuoteArray: tempSingleQuoteArray
});
//Since part of the state is managed with Redux, the populateNewQuote method is passed in as props.
this.props.populateNewQuote(this.state.singleQuoteArray);
}
//When the button to generate a new quote is hovered over, the value of the local state property randomHover is changed from false to true. After it is no longer being hovered over, the property is changed back to false.
onRandomHover() {
this.setState({
//The value of this property is changed to the opposite of what it currently is.
randomHover: !this.state.randomHover
});
}
//When the button to tweet the current quote is hovered over, the value of the local state property tweetHover is changed from false to true. After it is no longer being hovered over, the property is changed back to false.
onTweetHover() {
this.setState({
//The value of this property is changed to the opposite of what it currently is.
tweetHover: !this.state.tweetHover
});
}
render() {
//This is the constant that contains the Twitter link that will allow you to tweet something. It also has the quote, the quote's author, and the hashtag #quotes, all of which we will tweet.
const twitterLink = "https://twitter.com/intent/tweet?text=%22" + this.props.singleRandomQuoteReactReduxArray[0] + "%22 " + this.props.singleRandomQuoteReactReduxArray[3] + " %23quotes";
//These two constants, leftQuote and rightQuote, are each an HTMLCollection. An HTMLCollection is an array-like object containing elements. This is the reason I had to use the Array.from() later on.
const leftQuote = document.getElementsByClassName("fas fa-quote-left");
const rightQuote = document.getElementsByClassName("fas fa-quote-right");
//These three constants color the text, buttons, and body background when either the random quote button or the tweet button is hovered over, and also when this is not happening.
const randomHoverColor = "lightgreen";
const tweetHoverColor = "lightblue";
const defaultColor = "yellow"
//This if-else statement will handle what happens when the random quote button and the tweet button are hovered over, and what happens when they are not.
if(this.state.randomHover) {
document.body.style.backgroundColor = randomHoverColor;
document.getElementById("text").style.color = randomHoverColor;
document.getElementById("author").style.color = randomHoverColor;
//The Array.from() generates an array from the leftQuote and rightQuote HTMLCollection array-like objects. This allows me to use the map().
Array.from(leftQuote).map(i => i.style.color = randomHoverColor);
Array.from(rightQuote).map(i => i.style.color = randomHoverColor);
}
else if(this.state.tweetHover) {
document.body.style.backgroundColor = tweetHoverColor;
document.getElementById("text").style.color = tweetHoverColor;
document.getElementById("author").style.color = tweetHoverColor;
Array.from(leftQuote).map(i => i.style.color = tweetHoverColor);
Array.from(rightQuote).map(i => i.style.color = tweetHoverColor);
}
else {
document.body.style.backgroundColor = defaultColor;
//The following four if statements were needed because the JavaScript would be executed before the page finished loading and it would cause problems because the elements and HTMLCollection array-like objects did not exist yet.
if(document.getElementById("text")) {
document.getElementById("text").style.color = defaultColor;
}
if(document.getElementById("author")) {
document.getElementById("author").style.color = defaultColor;
}
if(leftQuote.length > 0) {
Array.from(leftQuote).map(i => i.style.color = defaultColor);
}
if(leftQuote.length > 0) {
Array.from(rightQuote).map(i => i.style.color = defaultColor);
}
}
//The JSX here will render part of a webpage inside of a div element.
return(
<div id="quote-box-container">
<div id="quote-box">
<div id="quote-section">
<div id="left-quote-container"><i class="fas fa-quote-left"></i></div>
<div id="text">{this.props.singleRandomQuoteReactReduxArray[0]}</div>
<div id="right-quote-container"><i class="fas fa-quote-right"></i></div>
</div>
<div id="author-section-container">
<div id="author-section">
<a id="author-section-link" href={this.props.singleRandomQuoteReactReduxArray[2]} target="_blank">
<div id="author-image"><img src={this.props.singleRandomQuoteReactReduxArray[1]}/></div>
<div id="author">-{this.props.singleRandomQuoteReactReduxArray[3]}</div>
</a>
</div>
</div>
<div id="all-buttons-container">
<i class="fas fa-redo-alt" id="new-quote" onClick={this.getRandomQuote} onMouseEnter={this.onRandomHover} onMouseLeave={this.onRandomHover}></i>
<a id="tweet-quote" target="_blank" href={twitterLink}><i id="tweet-button" onMouseEnter={this.onTweetHover} onMouseLeave={this.onTweetHover} class="fab fa-twitter"></i></a>
</div>
</div>
</div>
);
}
};
//React Redux:
//This Provider component will provide access to the Redux store.
const Provider = ReactRedux.Provider;
//This connect() will connect your React Presentational component with the Redux store.
const connect = ReactRedux.connect;
//This will map the Redux state that you want to pass as props to the Presentational component.
const mapStateToProps = (reduxState) => ({
singleRandomQuoteReactReduxArray: reduxState
});
//This will map the dispatch function with specific action objects that you want to pass as props to the Presentational component.
const mapDispatchToProps = (dispatch) => ({populateNewQuote: (singleRandomReduxQuote) => dispatch(randomQuoteActionCreator(singleRandomReduxQuote))});
//This is where your React Presentational component will be connected to the Redux store with the Container wrapper component.
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
//This AppWrapper class component will render your Container component.
class AppWrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
//The two props of the Provider component are the Redux store object and the component inside of the Container component.
<Provider store={store}>
<Container/>
</Provider>
);
}
}
//This ReactDOM.render() will render your React component to a div with an id of 'react-redux-component' in the HTML body element.
ReactDOM.render(<AppWrapper/>, document.getElementById('react-redux-component'));
!
