FCC Random Quote Generator

FCC Random Quote Generator.markdown

FCC Random Quote Generator

A random quote generator. In this app I used Jade, Sass, and CoffeeScript, and jQuery.

A Pen by Adam Recvlohe on CodePen.

License.

index.html

.container
  h1 Famous Quotes

  p This is a famous quote generator. Click the button below to generate a new famous quote.

  div#btn New Quote

  p#quote

  a.fa.fa-twitter.fa-4x#tweet
 
  

script.js

$(document).ready ->

  quote = ->
    url = 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous'
    API_KEY = 'NvBtBmdtSImshF8Ul6PZVcHM8rPtp1HIevIjsnu6b1nua1d11M'
    $.ajax
      url: url
      type: 'PUT'
      dataType: 'json'
      beforeSend: (xhr) ->
        xhr.setRequestHeader 'X-Mashape-Authorization', API_KEY
        return
      success: (data) ->
        document.getElementById('quote').innerHTML = data.quote + '<em id="author"> ' + data.author + '</em>'
        twitterLink = document.getElementById('tweet')
        twitterLink.href = 'https://twitter.com/intent/tweet?text=' + '"' + data.quote + '"' + ' --' + data.author
        twitterLink.target = '_blank'
        return
    return

  quote()

  document.getElementById('btn').onclick = ->
    quote()
    return

  return

# ---
# generated by js2coffee 2.1.0

scripts

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

style.css

$red: rgb(215,66,60)
$white: #f2f2f2
$twitter: rgb(64,153,255)

body
  font-family: Open Sans
  height: 100vh
  background-image: url('https://unsplash.com/photos/shy0cEi7h1o/download')
  background-size: cover
  background-position: center center
  background-repeat: no-repeat
  padding: 2.5em
  
  
  .container
    width: 60%
    margin: 0 auto
    text-align: center
    background-color: white
    padding: 2em 0em
    border-radius: 1.5em
    background-color: rgba(0,0,0,.5)
    box-sizing: border-box

    h1
      font:
        size: 3em 
        weight: 700
      margin: 0em 0em
      border-bottom: 2px solid $white
      display: inline
      color: $white
      
    p
      width: 60%
      margin: 1.5em auto
      font-size: 1.5em
      color: $white

      @media (max-width: 600px)
        width: 90%
    #btn
      font:
        size: 1.5em
        weight: 700
      border: 4px solid $white
      color: $white
      display: inline-block
      padding: 0.5em 1.5em
      transition: all ease-in-out .5s
      text-transform: uppercase
      border-radius: 2.5em

      &:hover
        cursor: pointer
        color: $white
        background-color: $red
        border: 4px solid $red


    #quote
      width: 70%
      margin: 0 auto
      padding: 1em 2em
      font-size: 2em
      border-radius: 1.5em
      
      #author
        display: block
        font-size: 0.9em
        margin: 0.5em 0
        
        &:before,
        &:after
          content: ' -- '
        
    #tweet
      color: white
      transition: color ease-in-out 0.3s
      text-decoration: none
    
      &:hover
        cursor: pointer
        color: $twitter
    
      

styles

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