Be inspired!

be-inspired.markdown

Be inspired!

I wanted to give the look and feel of looking at flash cards on a table.

• Foundation
• animate.css
• Font Awesome

A Pen by Charlotte Tan on CodePen.

License.

index.html

<div class="row text-center">
  <div class="small-9 small-centered columns">
    <button id="get-quote" class="button">Be Inspired!</button>
    <button id="tweet" class="button"><i class="fa fa-twitter"></i></button>
  </div>
</div>

<div class="row text-center">
  <div class="small-9 medium-7 large-5 small-centered columns">
    <div id="cardStack"></div>
  </div>
</div>

<div class="row">
  <div class="small-6 small-centered columns">
    <div id="credits">Quotes from: <a href="http://forismatic.com/en/api/">http://forismatic.com/en/api/</a></div>
  </div>
</div>

inspirational-cards.markdown

Inspirational cards

I wanted to give the look and feel of looking at flash cards on a table.

• Foundation
• animate.css
• Font Awesome

A Pen by Charlotte Tan on CodePen.

License.

script.js

$(function() {
  var quoteApi = 'http://api.forismatic.com/api/1.0/?jsonp=?';
  var twitterApi = 'https://twitter.com/intent/tweet';

  function getQuote() {
    $.getJSON(quoteApi, {
        method: "getQuote",
        format: "jsonp",
        lang: "en"
      },
      function(data) {
        var $quote = $("<div>", {
          class: "quote"
        }).text(data.quoteText.trim());
        var $author = $("<div>", {
          class: "author"
        }).text(data.quoteAuthor.trim());

        // -3 <= deg <= 3
        var deg = Math.floor(Math.random() * 7) - 3;

        var $card = $("<div>", {
          class: "card"
        }).append($quote).append($author).css("transform", "rotate(" + deg + "deg)").addClass("animated fadeIn");

        var $cardStack = $("#cardStack");
        var $cards = $cardStack.children();
        var cardsLen = $cards.length;
        var maxCards = 3;
        if (cardsLen >= maxCards) {
          var numberToRemove = cardsLen - maxCards;
          $cards.each(function(index, ele) {
            var $ele = $(ele);
            if (index <= numberToRemove) {
              $ele.addClass("animated fadeOut").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                $ele.remove();
              });
            }
          });
        }
        $cardStack.append($card);
      });
  }

  function tweet() {
    var quote = $(".quote").last().text();
    var author = $(".author").last().text() || 'Unknown';
    var tweetStr = quote + ' - ' + author;
    
    var tweetUrl = twitterApi + '?text=' + encodeURIComponent(tweetStr);
    window.open(tweetUrl, '_blank');
  }
  
  $("#get-quote").click(getQuote);
  $("#tweet").click(tweet);

  getQuote();
});

scripts

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

style.scss

.button {
  border-radius: 4px;
  margin-top: 15vh;
}

#cardStack {
  position: relative;
}

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
              0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #272727;
  border-radius: 2px;
  padding: 1.3rem;
  margin: 1.3rem 0;
  background-color: white;
  width: 100%;
  position: absolute;
  animation-duration: 0.5s;

  .quote {
    padding: 1.3rem;
    font-weight: 300;
    border-radius: 0 0 2px 2px;
  }
}

#credits {
  bottom: 0.5rem;
  position: fixed;
  right: 0.5rem;
  font-size: 0.85rem;
}

styles

<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />