freeCodeCamp : Random Quote Machine

freecodecamp-random-quote-machine.markdown

freeCodeCamp : Random Quote Machine

A Pen by Jubin Ayoob N V on CodePen.

License.

index.html

<div class="quote-box">
  <div class="quote-text">
    <i class="fa fa-quote-left"> </i><span id="text"></span>
  </div>
  <div class="quote-author">
    - <span id="author"></span>
  </div>
  <div class="buttons">
    <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
     <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
      <i class="fa fa-tumblr"></i>
    </a>
    <button class="button" id="new-quote">New quote</button>
  </div>
</div>
<div class="footer"> by <a href="http://codepen.io/jubinayoob/">JuBin</a></div>

script.js

/*
  Code by Gabriel Nunes
*/

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

var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
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": "3KHPzrhnbTmshNVSfNVpFPhYAWavp1RY9Jcjsnku5YMMqdlDZd",
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous',
    success: function(r) {
      if (typeof r === 'string') {
       r = JSON.parse(r); 
      }
      currentQuote = r.quote;
      currentAuthor = r.author;
      if(inIframe())
      {
        $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
        $('#tumblr-quote').attr('href', 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(currentAuthor)+'&content=' + encodeURIComponent(currentQuote)+'&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button');
      }
      $(".quote-text").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          //$(".quote-text").();
          $('#text').text(r.quote);
        });

      $(".quote-author").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#author').html(r.author);
        });

      var color = Math.floor(Math.random() * colors.length);
      $(".quote-text").css('color', colors[color]);
      /*$("html body").animate({
        backgroundColor: colors[color],
        color: colors[color]
      }, 1000);*/
      $(".button").animate({
        backgroundColor: colors[color]
      }, 1000);
    }
  });
}
$(document).ready(function() {
  getQuote();
  $('#new-quote').on('click', getQuote);
  $('#tweet-quote').on('click', function() {
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  });
  $('#tumblr-quote').on('click', function() {
    if(!inIframe()) {
      openURL('https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(currentAuthor)+'&content=' + encodeURIComponent(currentQuote)+'&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button');
    }
  });
});

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.scss

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500);
* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}
div {
  position:relative;
  z-index: 2;
}
html { 
background: url("https://lh3.googleusercontent.com/w2KCgwmXmj6M1BX4qN7vikxmYU_XTweBWgxfFV_ETTefLl7rNSXd62aG2NbvCJgWW9sl6Um22ZkAhsK2U7kCzPMzRQ9CVFdxHZoQahelBceAKc-R4XGz_O6cVLNb284s9n10hQkQ77Cw8uzU6RnvmvfUla0y_E2YtUqk3iKhzg3dAIU8c4qqCgW8dXbQVvcqhgBaZKCavuKRkEVXR7yYrbGyk9ldncXKd6DJb_DkqaqXHsecR0LoNnU_kOaxrbdAYrll2_IXW7BlyAU5R4leQbnqYhYf-6BuzWKPEwF9uwO7EyCeiI2zRMYKuT40GoBrJ6JNvfG7bsnZtD3lgssnVP42Sjp511J3Hn-poR6iaiNnexfngzSW9Ud5xxe6mYEAMWyPTikDJKS7g6-C3zoi1JXt2z46baXo_lmCIEE2wpkW3cXB78fF59ZFm8E9eKMgaIbwyCDBTl8gx0LAONQ0CVq1iLAT7XrnA_ptorJAAGUF-2yhGl-ThdhCmFCn4jkDzWrGf5EBF5yTDBqllXapwk2_3pkxaE0u35kpMQTlPPAq5opcDNwGUFH-0SuYVG-4LhqFNX-G_274ub1nvPU49nUGyuf8SABGf4MIx4GR=w1366-h663-no") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight:400;
}
.footer {
  width:450px;
  text-align:center;
  display:block;
  margin:15px auto 30px auto;
  font-size:0.8em;
  color:#fff;
  a {
    font-weight:500;
    text-decoration:none;
    color:#fff;
  }
}
.quote-box {
  border-radius:3px;
  position:relative;
  margin:20% auto auto auto;
  width:450px;
  padding:70px 50px;
  display:table;
  .quote-text {
    i{
      font-size:1.8em;
      margin-right: 0.4em;
    }
    color: #00ced1;
    text-align:center;
    text-shadow: -1px 0 #ffff00, 0 1px #ffff00, 1px 0 #ffff00, 0 -1px #ffff00;
    width:450px;
    height:auto;
    clear:both;
    font-weight:550;
    font-size:1.75em;
  }
  .quote-author {
    color: #3df04b;
    width:450px;
    height:auto;
    clear:both;
    padding-top:20px;
    font-size:1em; 
    text-align:right;
  }
  .buttons {
    width:450px;
    margin:auto;
    display:block;
    .button {
      height:38px;
      border:none;
      border-radius:3px;
      color:#fff;
      background-color:#333;
      outline:none;
      font-size:0.85em;
      padding: 8px 18px 6px 18px;
      margin-top:30px;
      opacity:1;
      cursor:pointer;
      &:hover {
        opacity:0.9;
      }
      &#tweet-quote, &#tumblr-quote {
        float:left;
        padding:0px;
        padding-top:8px;
        text-align:center;
        font-size:1.2em;
        margin-right:5px;
        height:30px;
        width:40px;
      }
      &#new-quote {
        float:right;
      }
    }
  }
  
}

styles

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