FreeCodeCamp : Random GOT Quote Machine

freecodecamp-random-got-quote-machine.markdown

FreeCodeCamp : Random GOT Quote Machine

Random quotes using Game of Thrones Quotes

A Pen by Paulo on CodePen.

License.

index.html

<div class="quote-box console">
  <div class="quote-text">
    <i class="fa fa-chevron-right"> </i><span id="text"></span>
  </div>
  <div class="quote-author">
    - <span id="author"></span>
  </div>
  <div class="buttons">
    <button class="button" id="new-quote">New quote</button>
    <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
  </div>
</div>

script.js

function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }

var currentQuote = '';
var currentAuthor = '';
function openURL(url){
  window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function getQuote() {
 $.getJSON("https://got-quotes.herokuapp.com/quotes",function(json) {
     currentQuote = json.quote;
     currentAuthor = json.character;
});
if(inIframe())
      {
   $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=GoT&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
      }
$(".quote-text").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#text').text(currentQuote);
        });
        $(".quote-author").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#author').html(currentAuthor);
        });
}

      
$(document).ready(function() {
  getQuote();
  $('#new-quote').on('click', getQuote);
  $('#tweet-quote').on('click', function() {
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=GoT&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

.console {
  margin: 5% 25% 0 25%;
  font-family:Courier;
  color: #FFF;
  background: #000000;
  border: 3px double #CCCCCC;
  padding: 10px;
  text-align: center;
}

.fa {
  color :#FFF;
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />