Nearly Finalized Twitter

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
  <ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#array1">Single-Line Array</a></li>
  <li><a data-toggle="tab" href="#array3">API Array</a></li>
</ul>
  <div class="tab-content">
  <div id="home" class="tab-pane fade in active">
  <h1 class='header'> Donavin's Quote Generator</h1>
  
  <p class='desc'>I have decided to put both an "Array" based Random Quote, and an API(Forismatic) API into action! Check out the differences! Please provide feed-back, or input! Will be uploading more quotes to the array over time! We even built in Twitter to the API! History, and Current Quotes!</p>
    </div>
    <div id='array1' class='tab-pane fade'>
  <h2 class="TeoQuotes"> Teodoro's Quotes[One Block Arrays]</h2>
  
  <button class="jsButton">Quote Meh!</button>
  
  <div class="JSSection">
    <span class="quote"></span>
  </div>
    </div>
    
 
  <div id='array3' class='tab-pane fade'>
  <h2 class='apiEff'> API Efficiency </h2>
  
  <div id='wrapper'>
    <button id='quote'>Quote Me, Bro!</button>
  </div>
  
  <div id="currentQuoteContainer"> </div>
  <h1 class='prevQuote'>Previous Tweets</h1>
  <div id='prevQuoteContainer'></div>
    </div></div>
</div>

Nearly Finalized Twitter.markdown

Nearly Finalized Twitter

Bootstrap Based Tab Browser: Array based Twitter Query, and Forismatic API. Side-by-side comparison.

A Pen by Donavin Northrup on CodePen.

License.

script.js

$(document).ready(function() {
  /*-----Random Quote Generators---*/
  function randomQ() {
      /*Establish Random Quotes*/
      var mehQuotes3 = ["You wanna do somethin' sometime, big boi?!", "Well, I didn't say that exactly but it sounds just about as confusing as what I did say.", "A lot of people hate that which they don't understand. A lot of people don't understand that which they fear. A lot of people hate me.", "I'm probably a big deal, somewhere. I thought it was here, but it could have been somewhere else."]
      var Quotation = new Array()
        /* Alternate Array*/
      Quotation[0] = "I guess I can help. Let me just stop doing everything productive real quick.";
      Quotation[1] = "You see that fish over there? Yea, I'ma go kill it.";
      Quotation[2] = "I bought a new sword. Where? I dunno, some generic store. Let's say Amazon.";
      Quotation[3] = "This one time, at warrior camp...";
      Quotation[4] = "I'm hungry.";
      Quotation[5] = "Don't charge me, bro";
      Quotation[6] = "Yea, well I did that like at least a day before you. Or after you. Whichever is more impressive.";
      Quotation[7] = "Why can't we be friends? loljk I don't like you.";
      Quotation[8] = "Right, you do \"good\" DPS.";
      Quotation[9] = "Remember when warriors were good? No? Well, then...";
    var mehQuotes = mehQuotes3.concat(Quotation);
      randomQuote = mehQuotes[Math.floor(Math.random() * mehQuotes.length)];
      $('.quote').text(randomQuote);
    }
    /*Handles button function*/
  $(".jsButton").on("click", function() {
    randomQ();
  }); /*Closed randomQ*/

  // This is an alternate method to the one above
  // The code is very similar, but seems much easier
  // to read - There is little different in performance
  // 
  
  function moveTweetToPrev() {
    var thisTweet = $('#currentQuoteContainer').html();
    $("#prevQuoteContainer").prepend(thisTweet);
    $('#currentQuoteContainer').html('');  // Clear current contents
}
  
  /*Quote API Forismatic*/
  $('#quote').click(function() {
    $.ajax({
      url: "http://api.forismatic.com/api/1.0/",
      jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        method: "getQuote",
        lang: "en",
        format: "jsonp"
      },
      success: function(response) {  
    // This makes both my Quote, and the Tweet Button.
    
    var tweetURL = "https://twitter.com/intent/tweet?text=" + encodeURI(response.quoteText);
        var link = '<div class="textQuote">' + response.quoteText +'<a href="' + tweetURL + '" target="_blank"><br><button class="tweetMe"><i class="fa fa-twitter"></i>"Tweet Me!"</button></a></div><br/>';
        
        moveTweetToPrev();        $('#currentQuoteContainer').html(link);        // End Quote/Tweet Button
      }
    });
  });

  /*Close Forismatic Quote Finder*/
  /* Tweet Filter */
  tweet = quote;
  if (tweet.length > 140) {
    tweet = quote.substr(0, 136) + "...";
  }

  //Delete Me

  //
  //
  // These code snippets use an open-source library.
  /* $.ajax({
     url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=movies',
     headers: {
       'X-Mashape-Key': 'gC0zfVzZBwmshIU4M6wmhN0hyW43p1e7Z7hjsnzKk5cdVUGdKh',
       'Content-Type': 'application/x-www-form-urlencoded',
       'Accept': 'application/json'
     },
     method: 'POST',
     dataType: 'json',
     success: function(data) {
       $("#quote").html(data.quote);
       $("#movie").html(data.author);
       tweet = data.quote + " - " + data.author;
     }
   }); */

  /* End Tweet Filter */
  //$('#tweet').click(function() { window.location = "https://twitter.com/intent/tweet?text=" + tweet; });//
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//platform.twitter.com/widgets.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

body {
  color: #222;
  font-family: 'Open sans';
}
h1 {
  border-bottom: 2px solid #000;
}
h2 {
  color: #444;
}
.container {
  margin: 0 50px;
  text-align: center;
}
.desc {
  text-align: center;
  margin: 0 200px;
}

.textQuote {
  background: #eee;
  padding: 10px;
  border-radius: 6px;
}
#quote {
  margin-bottom: 10px;
}
.nav{
  text-align: center;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Update JS