LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  


Random Quotes

CSS
body{
  background: lightblue
}

.container-fluid {
  max-width: 500px;
  background: #fff;
  height: 100%;
  padding: 20px 50px;
  margin-bottom: 1em;
  border: 2px #cde solid;
  border-radius: 10px;
}

#quote-box {
  min-height: 15em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#quote-block{
  position: relative;
}

#quote {
  font-size: 100%;
}

.centered
{
    text-align:center;
}

#tweet {
  margin-top:5px;
}
JS
function inIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    return true;
  }
}
var currentQuote = "",
  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() {
  $.ajax({
    headers: {
      "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V",
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: "https://andruxnet-random-famous-quotes.p.mashape.com/cat=",
    success: function(response) {
      var r = JSON.parse(response);
      currentQuote = r.quote;
      currentAuthor = r.author;
      if (inIframe()) {
        $("#tweet").attr(
          "href",
          "https://twitter.com/intent/tweet?text=" +
            encodeURIComponent(
              '"' + currentQuote + '" \n\n' + "- " + currentAuthor
            )
        );
      }
      $("#quote").animate(
        {
          opacity: 0
        },
        500,
        function() {
          $(this).animate(
            {
              opacity: 1
            },
            500
          );
          $("#quote").text(r.quote);
        }
      );

      $("#author").animate(
        {
          opacity: 0
        },
        500,
        function() {
          $(this).animate(
            {
              opacity: 1
            },
            500
          );
          $("#author").html(r.author);
        }
      );
    }
  });
}
$(document).ready(function() {
  getQuote();

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

Description

A FreeCodeCamp project that shows the user a random quote, and generates a new random quote when they press the "New Quote" button. Users can also Tweet the quote with the "Tweet" button.
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv