Random Quote

In this example below you will see how to do a Random Quote with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0x1000, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x1000 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Quote</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div class="slider">
    <div id="quote-div">
      <!-- here goes the react content -->
    </div>
  </div>
  <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*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'));

Comments