Random Quote Machine

index.html

<div class="container">
  <div class="row no-gutter">
    <div class="col-md-10 offset-md-1">
      <div id="quote-wrapper">
        <div class="row">
          <div class="col">
            <blockquote>
              <p>{{ quote.text }}</p>
              <footer>— {{quote.author}}</footer>
            </blockquote>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <button class="btn" type="button" v-on:click="tweetQuote"><i class="fa fa-twitter" aria-hidden="true"></i></button>
          </div>
          <div class="col text-right">
            <button class="btn btn-primary" v-on:click="newQuote">New Quote</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

random-quote-machine.markdown

Random Quote Machine

A Pen by Gil Sousa on CodePen.

License.

script.js

var quotes = [{"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": "Two roads diverged in a wood, and I\u2014I took the one less traveled by, And that has made all the difference.", "author": "Robert Frost"}, {"quote": "I attribute my success to this: I never gave or took any excuse.", "author": "Florence Nightingale"}, {"quote": "You miss 100% of the shots you don\u2019t take.", "author": "Wayne Gretzky"}, {"quote": "I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed.", "author": "Michael Jordan"}, {"quote": "The most difficult thing is the decision to act, the rest is merely tenacity.", "author": "Amelia Earhart"}, {"quote": "Every strike brings me closer to the next home run.", "author": "Babe Ruth"}, {"quote": "Definiteness of purpose is the starting point of all achievement.", "author": "W. Clement Stone"}, {"quote": "Life isn't about getting and having, it's about giving and being.", "author": "Kevin Kruse"}, {"quote": "Life is what happens to you while you\u2019re busy making other plans.", "author": "John Lennon"}, {"quote": "We become what we think about.", "author": "Earl Nightingale"}, {"quote": "The most common way people give up their power is by thinking they don\u2019t have any.", "author": "Alice Walker"}, {"quote": "The mind is everything. What you think you become.", "author": "Buddha"}, {"quote": "The best time to plant a tree was 20 years ago. The second best time is now.", "author": "Chinese Proverb"}, {"quote": "An unexamined life is not worth living.", "author": "Socrates"}, {"quote": "Eighty percent of success is showing up.", "author": "Woody Allen"}, {"quote": "Your time is limited, so don\u2019t waste it living someone else\u2019s life.", "author": "Steve Jobs"}, {"quote": "Winning isn\u2019t everything, but wanting to win is.", "author": "Vince Lombardi"}, {"quote": "I am not a product of my circumstances. I am a product of my decisions.", "author": "Stephen Covey"}, {"quote": "Every child is an artist.\u00a0 The problem is how to remain an artist once he grows up.", "author": "Pablo Picasso"}, {"quote": "You can never cross the ocean until you have the courage to lose sight of the shore.", "author": "Christopher Columbus"}, {"quote": "I\u2019ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.", "author": "Maya Angelou"}, {"quote": "Either you run the day, or the day runs you.", "author": "Jim Rohn"}, {"quote": "Whether you think you can or you think you can\u2019t, you\u2019re right.", "author": "Henry Ford"}, {"quote": "The two most important days in your life are the day you are born and the day you find out why.", "author": "Mark Twain"}, {"quote": "Whatever you can do, or dream you can, begin it.\u00a0 Boldness has genius, power and magic in it.", "author": "Johann Wolfgang von Goethe"}, {"quote": "The best revenge is massive success.", "author": "Frank Sinatra"}, {"quote": "People often say that motivation doesn\u2019t last. Well, neither does bathing.\u00a0 That\u2019s why we recommend it daily.", "author": "Zig Ziglar"}, {"quote": "Life shrinks or expands in proportion to one's courage.", "author": "Anais Nin"}];

function getRandomQuote(){
  var index = Math.floor( Math.random() * quotes.length );
  return quotes[index];
}

var myApp = new Vue({
  el: "#quote-wrapper",
  data : {
    quote: {
      text : '',
      author: ''
    }
  },
  methods : {
    newQuote : function() {
      var n = getRandomQuote();
      this.quote.text = n["quote"];
      this.quote.author = n["author"];
    },
    tweetQuote: function() {
      var text = this.quote.text + ' -' + this.quote.author;
      var twLink = 'http://twitter.com/home?status=' + encodeURIComponent(text);
      window.open(twLink, '_blank');
      
    }
  },
  created: function() {
      var n = getRandomQuote();
      this.quote.text = n["quote"];
      this.quote.author = n["author"];
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

style.css

body {
  background: #1d1d1d;
}

#quote-wrapper {
  background: white;
  padding: 20px;
  margin: 20px;
  width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />