Tweet That Quote

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Tweet That Quote</title>
  <link href='https://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

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

  
</head>

<body>

  <body>
   <header>
      <h1 class="text-center ">Quote Generator</h1>
   </header>
   <div id="main-container" class="container text-center">
      <h1>Randon Quote Generator</h1>
      <h4>Click on the button below to get your random quote....</h4>
      <div class="quote-container">
         <button id="quote-button" class="btn btn-default">Generate Quote</button>
         <div id="quote-bubble">
            <div id="quote"></div>
            <div id="author"></div>
         </div>
      </div>
      <div id="twitter"></div>
   </div>
   <div class="fnbg">
      <h6>FNBG&copy; 2015</h6>
   </div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/forbesg/tweet-that-quote-QjJKav */
body {
   background-image: url(https://i.stack.imgur.com/IehB7.png);
   color: #fff;
   font-family: 'Raleway', sans-serif;
}
.quote-container {
   margin-top: 50px;
   font-size: 50px;
}
div#quote-bubble {
   font-family: 'Calligraffitti', cursive;
    padding: 10px;
    margin: 50px;
    border: 1px solid #000;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.4);
    color: #000;
}
div#quote {
    margin: 20px;
    padding: 50px;
   font-size: 50px;
   text-shadow: 1px 1px 2px #dadada;
}
div#author {
   text-align: right;
   padding:20px;
   font-size: 18px;
}
.fnbg {
   position: fixed;
   bottom: 0;
   right: 20px;
   color: #dadada;
}

/*Downloaded from https://www.codeseek.co/forbesg/tweet-that-quote-QjJKav */
var quotes = [
    {
        "quoteText": "When you have got an elephant by the hind legs and he is trying to run away, it's best to let him run.",
        "quoteAuthor": "Abraham Lincoln",
        "quoteLink": "https://forismatic.com/en/b7d4d84436/"
    },
    {
        "quoteText": "You've got a lot of choices.  If getting out of bed in the morning is a chore and you're not smiling on a regular basis, try another choice.",
        "quoteAuthor": "D. Woodhull",
        "quoteLink": "https://forismatic.com/en/ad669485ef/"
    },
    {
        "quoteText": "The greatest pleasure I know is to do a good action by stealth, and to have it found out by accident. ",
        "quoteAuthor": "Charles Lamb",
        "quoteLink": "https://forismatic.com/en/d6ead71e9c/"
    },
    {
        "quoteText": "Make the best use of what is in your power, and take the rest as it happens.  ",
        "quoteAuthor": "Epictetus ",
        "quoteLink": "https://forismatic.com/en/9ade8fcd77/"
    },
    {
        "quoteText": "The dogmas of the quiet past are inadequate to the stormy present. The occasion is piled high with difficulty, and we must rise with the occasion. As our case is new, so we must think anew and act anew. ",
        "quoteAuthor": "Abraham Lincoln",
        "quoteLink": "https://forismatic.com/en/d41179be79/"
    },
    {
        "quoteText": "How many cares one loses when one decides not to be something but to be someone. ",
        "quoteAuthor": "Coco Chanel",
        "quoteLink": "https://forismatic.com/en/75d194a5b6/"
    },
    {
        "quoteText": "If you want things to be different, perhaps the answer is to become different yourself. ",
        "quoteAuthor": "Norman Peale",
        "senderName": "",
        "senderLink": "",
        "quoteLink": "https://forismatic.com/en/4ce82da60b/"
    }
];

$(document).ready(function () {
	
	function getQuote () {
		var randomNumber = Math.floor(Math.random() * 6),
          tweetAnchor,
          quote;
      quote = quotes[randomNumber];
      tweetAnchor = "<a class=\"btn btn-primary twitter-share-button\" href=\"https://twitter.com/intent/tweet?text=" + quote.quoteText + " - " +quote.quoteAuthor + "\" data-size=\"large\">Tweet Quote</a>";
      $('#quote').html(quote.quoteText);               
      $('#author').html(quote.quoteAuthor);
      $('#twitter').html(tweetAnchor);
	}
	
	$('#quote-button').on('click', function () {
		getQuote();
	});
   getQuote();
});

Comments