Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 
<link href="https://fonts.googleapis.com/css?family=Gelasio|Yanone+Kaffeesatz&display=swap" rel="stylesheet">

  
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  
</head>

<body id="background-color">
  
  <div id="react-redux-component"></div>
      
</body>
  
</html>
              
            
!

CSS

              
                $quote-box-background-color: brown;
$text-color: yellow;
$new-quote-hover-color: lightgreen;
$tweet-hover-color: lightblue;
$text-and-quotes-font-size-regular: 30px;
$text-and-quotes-font-size-small: 20px;
$twitter-and-new-quote-buttons-font-size: 40px;

#quote-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  #quote-box {
    display: flex;
    flex-direction: column;
    background: $quote-box-background-color;  
    padding: 25px;
    width: 50vw;
    border-radius: 5px;
  
    #quote-section {
      display: flex;
      justify-content: space-between;

      #text {
        color: $text-color;
        text-align: center;
        font-family: 'Gelasio', serif;
        font-size: $text-and-quotes-font-size-regular;
      }
      
      .fa-quote-left, .fa-quote-right {
        color: $text-color;
        font-size: $text-and-quotes-font-size-regular;
      }

      #right-quote-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
    }
      
    #author-section-container {
      display: flex;
      justify-content: flex-end;
            
      #author-section {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin: 20px 0;
      
        #author-section-link {
          text-decoration: none;
          
          img {
            height: 100px;
          }

          #author {
            color: $text-color;
            font-family: 'Yanone Kaffeesatz', sans-serif;
            font-size: 20px;
          }
        }
      }
    }

    #all-buttons-container {
      display: flex;
      justify-content: space-between;
      
      #new-quote {
        order: 2;
      }

      #new-quote:hover {
        color: $new-quote-hover-color;
        cursor: pointer;
      }
      
      #tweet-quote {
        order: 1;
        text-decoration: none;
      }

      #tweet-button:hover {
        color: $tweet-hover-color;
        cursor: pointer;
      }

      .fa-twitter, .fa-redo-alt {
        color: $text-color;
        font-size: $twitter-and-new-quote-buttons-font-size;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  #quote-box-container {
    #quote-box {
      width: 70vw;
    
      #quote-section {
        #text, .fa-quote-left, .fa-quote-right {
          font-size: $text-and-quotes-font-size-small;
        }
      }
    }
  }
}
              
            
!

JS

              
                // !! 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'));
              
            
!
999px

Console