Random Quote

/*Downloaded from https://www.codeseek.co/0x1000/random-quote-aZvQMx */
body {
  background-color: #ffcece;
  transition-property: background-color;
  transition-duration: 1s;
  color: black;
  margin: 0;
  font-family: Roboto-Thin;
  font-weight: 100;
  display: flex;
  align-items: center;
}

div#quote-div {
    width: 50%;
    transition-property: background-color color;
    transition-duration: 1s;
    vertical-align: middle;
    margin-left: 24%;
    padding: 3%;
}

html, body {
    height: 100%;
}

@media (min-device-width: 320px) 
  and (max-device-width: 667px) { 

    div#quote-div {
      width: 80%;
      margin-left: 8.5%;
    }
}

@media (max-device-width: 320px) {
    html {
      height: 100%;
    }

    div#quote-div {
      width: 100%;
      margin-left: 0;
    }
  }

button {
  border-radius: 4em;
  cursor: pointer;
  margin: 1em;
  border: none;
  width: 3em;
  height: 3em;
  background-color: white;
  transition-property: background-color border;
  transition-duration: 200ms;
}

.fa-angle-right {
  font-size: 1.5em;
}

h3 {
  width: 100%;
  text-align: right;
  font-weight:100;
}

em {
    margin-right: 2em;
    text-decoration: none;
    font-family: Liberation;
    opacity: 0.5;
    font-size: 1.2em;
    font-weight: 100;
}

h1.quote {font-family: "Great Vibes";font-weight: 100;font-size: 3em;}

div#quote-div {
    margin-top: 2em;
    border-radius: 0.5em;
}

button:hover {;
  border: 0.2em solid;
  opacity: 0.5;
}

button:active {
  opacity: 0.2;
  visibility: 0.5;
}

.fa-quote-left, .fa-quote-right {
  font-size: 3em;
  opacity: 0.5;
  width: 100%;
  color: ;
}

.fa-quote-right {
  text-align: right;
}

.slider {
  width: 100%;
  height: 100%;
}

.buttons {
  display: flex;
}

/*Downloaded from https://www.codeseek.co/0x1000/random-quote-aZvQMx */
var x = 0;

var bodyColor = ["#ffbe00", "#a7ff00", "tomato", "orange", "yellow", "lightgreen", "#ff5de2", "#00ffd2", "gray"];

function changeColor() {
  var i = x++ % 9;
  $("body").css("background-color", bodyColor[i]);
}

// our classes will follow as
// main body class that will change color on every change of quote
var QuoteBox = React.createClass({
  displayName: "QuoteBox",

  render: function render() {
    return React.createElement(
      "div",
      { className: "quoteBox" },
      React.createElement(
        "h1",
        { className: "quote" },
        this.props.quote
      ),
      React.createElement("i", { className: "fa fa-quote-right" }),
      React.createElement(
        "h3",
        null,
        React.createElement(
          "em",
          null,
          this.props.author
        )
      )
    );
  }
});

var Button = React.createClass({
  displayName: "Button",

  render: function render() {
    return React.createElement(
      "button",
      { className: this.props.class, click: this.props.handler },
      React.createElement("i", { className: "fa " + this.props.icon })
    );
  }
});

var App = React.createClass({
  displayName: "App",


  getQuoteFromServer: function getQuoteFromServer() {
    var total = 10;
    $.ajax({
      url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous",
      headers: {
        'X-Mashape-Key': "WMS4J7XVpxmshY8miRkzLb9zCvUbp1lDyO4jsnWQWOjhyoDbFG"
      },
      success: function (da) {
        var d = JSON.parse(da);
        console.log(da);
        this.setState({ data: d, reload: false });
      }.bind(this),

      error: function () {
        var e = {
          quote: "Oh snap! try changing color by clicking refresh icon",
          author: ""
        };
        this.setState({ data: e, reload: true });
      }.bind(this)
    });
  },

  getInitialState: function getInitialState() {
    return {
      data: { quote: "Loading...", author: "Loading..." },
      reload: false
    };
  },

  componentDidMount: function componentDidMount() {
    this.getQuoteFromServer();
  },

  handleClick: function handleClick() {
    this.getQuoteFromServer();
  },

  handleTweet: function handleTweet() {
    var tweet_url = "https://twitter.com/share?&text=" + this.state.data.quote + "\n - " + this.state.data.author;
    window.open(tweet_url);
  },

  render: function render() {
    changeColor();

    return React.createElement(
      "div",
      { className: "quote-box" },
      React.createElement("i", { className: "fa fa-quote-left" }),
      React.createElement(QuoteBox, { quote: this.state.data.quote, author: this.state.data.author }),
      React.createElement(
        "div",
        { className: "buttons" },
        React.createElement(
          "button",
          { className: "change-button", onClick: this.handleClick },
          React.createElement("i", { className: "fa fa-angle-right" })
        ),
        React.createElement(
          "button",
          { className: "tweet", onClick: this.handleTweet },
          React.createElement("i", { className: "fa fa-twitter" })
        ),
        this.state.reload ? React.createElement(
          "button",
          { className: "reload", onClick: this.handleClick },
          React.createElement("i", { className: "fa fa-refresh" })
        ) : ""
      )
    );
  }
});

ReactDOM.render(React.createElement(App, null), document.getElementById('quote-div'));