Random Quotes Generator

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

Displays random Quotes.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quotes Generator</title>
   <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <div class="container">
  <div class="quote">
    <p>
    </p>
  </div>
  <div class="author">
    <span>&nbsp;</span>
    <p>
    </p>
  </div>
  <div class="button">
    <a href="javascript:void(0)" id="GetNewQuote">New Inspiration</a>
    <a href="" target="_blank" id="tweetThis">Tweet <span><img src="http://i1091.photobucket.com/albums/i384/velody/Buttons/Twit_Blk.png" width="30px" height="30px"></span></a>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/georgegkas/random-quotes-generator-KzrNPW */
p {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

.container {
  max-width: 500px;
  margin: 15% auto;
}

.quote p {
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.1em;
  font-size: 20px;
  line-height: 1.5em;
}

.author {
  text-align: center;
  padding-top: 10px;
}

.author span {
  border-top: 1px solid #ccc;
  max-width: 200px;
  display: block;
  margin: 0 auto;
}

.button {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.button a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 700;
  padding: 5px;
  -o-transition: .1s;
  -ms-transition: .1s;
  -moz-transition: .1s;
  -webkit-transition: .1s;
  transition: .1s;
  outline: none;
}

.button a:hover {
  color: rgba(0, 0, 0, 0.65);
}

@media screen and (max-width: 300px) {
  .button a {
    display: block;
  }
}

/*Downloaded from https://www.codeseek.co/georgegkas/random-quotes-generator-KzrNPW */
$(document).ready(function() {
  var Quotes = [{
      "id": 0,
      "text": "You've gotta dance like there's nobody watching, Love like you'll never be hurt, Sing like there's nobody listening, And live like it's heaven on earth.",
      "author": "William W. Purkey"
    }, {
      "id": 1,
      "text": "Everything you can imagine is real.",
      "author": "Pablo Picasso"
    }, {
      "id": 2,
      "text": "Life isn't about finding yourself. Life is about creating yourself.",
      "author": "George Bernard Shaw"
    }, {
      "id": 3,
      "text": "Life is like riding a bicycle. To keep your balance, you must keep moving.",
      "author": "Albert Einstein"
    }, {
      "id": 4,
      "text": "When someone loves you, the way they talk about you is different. You feel safe and comfortable.",
      "author": "Jess C. Scott, The Intern "
    }, {
      "id": 5,
      "text": "How wonderful it is that nobody need wait a single moment before starting to improve the world.",
      "author": "Anne Frank"
    }, {
      "id": 6,
      "text": "We're all human, aren't we? Every human life is worth the same, and worth saving.",
      "author": "J.K. Rowling"
    }, {
      "id": 7,
      "text": "You cannot find peace by avoiding life.",
      "author": "Virginia Woolf"
    }, {
      "id": 8,
      "text": "All the world is made of faith, and trust, and pixie dust.",
      "author": "J.M. Barrie"
    }, {
      "id": 9,
      "text": "A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.",
      "author": "George Bernard Shaw"
    }, {
      "id": 10,
      "text": "The most important thing is to enjoy your life—to be happy—it's all that matters.",
      "author": "Audrey Hepburn"
    }, {
      "id": 11,
      "text": "Life is a book and there are a thousand pages I have not yet read.",
      "author": "Cassandra Clare"
    }, {
      "id": 12,
      "text": "Two possibilities exist: either we are alone in the Universe or we are not. Both are equally terrifying.",
      "author": "Arthur C. Clarke"
    }, {
      "id": 13,
      "text": "Don't you think it's better to be extremely happy for a short while, even if you lose it, than to be just okay for your whole life?",
      "author": "Audrey Niffenegger"
    }, {
      "id": 14,
      "text": "If you ask me what I came to do in this world, I, an artist, will answer you: I am here to live out loud.",
      "author": "Émile Zola"
    }, {
      "id": 15,
      "text": "No one knows for certain how much impact they have on the lives of other people. Oftentimes, we have no clue. Yet we push it just the same.",
      "author": "Jay Ashe"
    }, {
      "id": 16,
      "text": "The saddest people I've ever met in life are the ones who don't care deeply about anything at all. Passion and satisfaction go hand in hand, and without them, any happiness is only temporary, because there's nothing to make it last.",
      "author": "Nicholas Sparks"
    }, {
      "id": 17,
      "text": "The past has no power over the present moment",
      "author": "Eckhart Tolle"
    }, {
      "id": 18,
      "text": "In a time of destruction, create something.",
      "author": "Maxine Hong Kingston"
    }, {
      "id": 19,
      "text": "Life is not a matter of holding good cards, but of playing a poor hand well.",
      "author": "Robert Louis Stevenson"
    }, {
      "id": 20,
      "text": "Dwell on the beauty of life. Watch the stars, and see yourself running with them.",
      "author": "Marcus Aurelius"
    }

  ];
  $("#GetNewQuote").click(function() {
    var id = Math.floor((Math.random() * 20) + 1);
    var link = "https://twitter.com/?status=" + Quotes[id].text + ' --' + Quotes[id].author;
    link = link.replace(/\s/g, "%20");
    document.getElementById('tweetThis').href = link;
    $('.quote p').text(Quotes[id].text);
    $('.author p').text(Quotes[id].author);
  });
});

window.onload = function() {
  $("#GetNewQuote").click();
}

Comments