A Random Quote Machine [freeCodeCamp [Intermediate Projects]] (Challenge)

A Random Quote Machine [freeCodeCamp [Intermediate Projects]] (Challenge) .markdown

A Random Quote Machine [freeCodeCamp [Intermediate Projects]] (Challenge)

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.

User Story: I can click a button to show me a new random quote.

User Story: I can press a button to tweet out a quote.

A Pen by Svetlana Linuxenko on CodePen.

License.

index.html

<div class="quotes-container">
  <div class="quote-thumb well">
    <div class="container">
    <p id="quote" class="quote animated">A Random Quote Machine. freeCodeCamp [Intermediate Projects] (Challenge) </p>
    <em id="author" class="author pull-right">Svetlana Linuxenko</em>
    </div>
    <div class="container">
     <a id="tweet-btn" target="_blank" href="#" class="btn btn-info"><i class="fa fa-twitter"></i></a>
    <button id="next-quote" class="btn btn-success pull-right"><i id="loading" style="display:none;" class="fa fa-circle-o-notch fa-spin"></i>
 Next quote &raquo;</button>
    </div>
  </div>
  
  <div class="copy"><a href="http://www.linuxenko.pro">&copy; Svetlana Linuxenko</a></div>
</div>

script.js

(function() {
  var nextQuoteURI = 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?';
  var tweetURI = 'https://twitter.com/intent/tweet?hashtags=freecodecam,quotes&related=freecodecamp&text=';
  
  function renderQuote(quote) {
     $('#author').addClass('flipOutY');

   
    $('#tweet-btn').attr('href', tweetURI + encodeURIComponent($('#quote').text()));
    
    setTimeout(function() {
          $('#quote').addClass('flipInX');
    $('#quote').html(quote[0].content);
       $('#author').html(quote[0].title);
    }, 400);
    setTimeout(function() {
      $('#quote').removeClass('flipInX');
      $('#author').removeClass('flipOutY');
      
      $('#loading').hide();
    }, 800);
  }
  
  function nextQuote() {
    $('#loading').show();
    $.ajax({
      dataType : 'jsonp',
      url : nextQuoteURI,
    }).then(renderQuote);
  }


  $(document).ready(function() {
    $('#tweet-btn').attr('href', tweetURI + encodeURIComponent($('#quote').text()));
    $('#next-quote').on('click', nextQuote);
  });
})();

scripts

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

style.css

body,html, .quotes-container {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}


.quotes-container {
  display: flex;
  flex-direction: column;
}

.quote-thumb {
  margin: auto;
}

.quotes-container .copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 0px;
}

.quote-thumb .container {
  max-width: 450px;
}

.quote-thumb .quote {
  font-size: 18px;
  min-height: 100px;
}
.quote-thumb .quote:before {
  content: '"';
  display: block;
  height: 50px;
  font-size: 58px;
  font-weight: bold;
  font-family: 'Passion One', cursive;
  color: #444;
}

.quote-thumb .author {
  color: #828282;
  margin: 10px;
}

.quote-thumb .author:before {
  content : '-';
  margin: 0px 10px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />