Random Quote Machine

index.html

<div class="container_quote">
  <div class="quote">
    <i class="fa fa-quote-left"></i>
    <span>
    </span>
    <i class="fa fa-quote-right"></i>
  </div>
  <div class="author">
    <span></span>
  </div>
  <div class="content_buttons">
    <div class="social">
      <a href="#" target="_blank" title="Share On Twitter">
        <i class="fa fa-twitter-square"></i>
      </a>
    </div>
    <div class="new">
      <button type="button" id="newQuote">New quote</button>
    </div>
  </div>
</div>

<footer>
by <a href="http://dmsanchez86.github.io/#about" target="_blank">Daniel M. Sanchez</a>
</footer>

Random Quote Machine.markdown

Random Quote Machine

Made With SASS, JavaScript and HTML

A Pen by Daniel Mauricio Sánchez on CodePen.

License.

script.js

$().ready(function(){
  
  getQuote();
  
  $('.social a').click(function(e){
      e.preventDefault();
      window.open($(this).attr('href'));
  });
  
  newQuote.onclick = function(e){
    e.preventDefault();
    
    $('.container_quote').addClass("load");
    
    getQuote();
    
    setTimeout(function(){
        $('.container_quote').removeClass("load");
    },1500);
  }
  
  function getQuote(){
    $.ajax({
      url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
      headers: {
        "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V",
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function(dataResponse) {
        var data = JSON.parse(dataResponse);
        
        var quote = data.quote;
        var author = data.author;
        
        $('.quote span').text(quote);
        $('.author span').text(author);
          
        $('.social a').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + quote + '" ' + author + " - @dmsanchez86 - "));
      }
    });
  }
});

scripts

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

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300italic,300);
@import 'http://dmsanchez86.github.io/sass/functions.scss';

/* Variables */
$primary: #6a1b9a;
$backgroundPrimary: #2196f3;

*{ @include reset; }

body,html{ @include init; }

body{
  overflow: hidden;
  font-size: 100%;
  font-family: 'Roboto Condensed';
  @include gradient(radial, (center, #bbdefb, #90caf9));
}

.container_quote{
  @include center-absolute(absolute);
  padding: 1rem 1rem 0;
  background: white;
  max-width: 100%;
  width: 500px;
  max-height: 200px;
  @include border-radius(5px);
  @include transition(transform .25s linear);
  @include box-shadow(0 0 30px rgba(0,0,0,.3));
  
  &:hover{
    @include transform(perspective(800px) scale(1.05) translatez(-100px));
  }
  
  &.load{
    .quote,.author,.content_buttons{
      opacity: 0;
      @include transform(translatey(-20%));
    }
  }
  
  .quote{
    @include transition((opacity .45s ease, transform .25s ease));
    padding: 1rem 1.5rem;
    @include flex(flex);
    @include justify-content(center);
    
    span{
      text-align: justify;  
      display: block;
      font-weight: bold;
      padding: 0 .5rem .5rem;
      min-height: 50px;
      @include transition(all .5s ease-in);
    }
    
    i{
      font-size: 40px;
      color: $backgroundPrimary;
      @include text-shadow(0 0 2px #000);
      
      &:first-child{
        margin-right: 1rem;
        margin-top: -1rem;
      }
      
      &:last-child{
        margin-left: 1rem;
        margin-top: .5rem;
      }
    }
  }
  
  .content_buttons{
    padding: 1rem 1.5rem 0rem;
    @include transition((opacity .45s .4s ease, transform .25s .4s ease));
    
    i{
      font-size: 30px;
      background: trasnparent;
      color: $backgroundPrimary;
      @include transition(all .5s ease);
      
      &:hover{
        color: #1976d2;
      }
    }
    
    .social{
      float: left;
    }
    
    .new{
      float: right;
      
      button{
        padding: .5rem 1rem;
        @include border-radius(5px);
        background: $backgroundPrimary;
        color: white;
        @include transition(all .5s ease);
        @include box-shadow(1px 1px 3px rgba(0,0,0,1));
        
        &:focus{
          outline: 0;
        }
        
        &:hover{
          background: #1976d2;
          @include box-shadow(1px 1px 5px rgba(0,0,0,1));
        }
        
        &:active{
          @include transform(scale(.7));
        }
      }
    }
  }
  
  .author{
    text-align: right;
    margin-right: 1.5rem;
    @include transition((opacity .45s .2s ease, transform .25s .2s ease));
    
    &:before{
      content: '- ';
    }
  }
}

footer{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 12px;
  font-weight: bold;
  
  a{
    text-decoration: none;
    color: $backgroundPrimary;
  }
}

@media (max-width: 540px){
  .container_quote{
    padding: .5rem 1rem 0;
    max-height: 200px;
    max-width: 95%;
    box-sizing: border-box;

    .quote{
      padding: 1rem .5rem 0;

      i{
        font-size: 30px;

        &:first-child{
          margin-top: -.5rem;
        }

        &:last-child{
          margin-top: 0rem;
        }
      }
    }

    .content_buttons{
      padding: .7rem .5rem 0rem;
    }

    .author{
      margin-right: .5rem;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://dmsanchez86.github.io/sass/functions.scss" rel="stylesheet" />