<div class="container">
  
  <h1 id="title" class="text-center">Random Quotes</h1>
  
  <div id="main" class="well center-block row">
    <blockquote class="blockquote-reverse">
      <p id="quote">Enjoy a random quote by clicking on the button below.</p>
      <footer id="author">Rémy Beumier</footer>
	  </blockquote>
    
    <div class="btns">
      <div id="twitter" class="btn disabled"><a target="_blank">Tweet it !</a></div>
      <div id="newQuote" class="btn"><a>New quote</a></div>
    </div>
  </div>
</div>

<footer id="footer" class="text-center">
  <p>Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a> with <a href="https://forismatic.com/en/" target="_blank">Forismatic API</a></p>
</footer>

body {
  background: #23BB63;  
}

#title {
  color: white;
  padding: 10px;
  letter-spacing: 2px;
  text-align: center;
}

#main {
  margin-top: 20px;
  width: 60%;
  overflow: auto;
}

.btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn {
  background-color: #23BB63;
}

a {
  color: lightgrey;
}

a:hover, a:active, a:focus {
  color: white;
}

.disabled a {
  color: lightgrey;
  text-decoration: none;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  background: rgba(0,0,0,0.3);
}
#footer p {
  margin: 0;
  padding: 5px;
}

// review design

var $newQuote = $("#newQuote"),
    $quote = $("#quote"),
    $author = $("#author"),
    $twitter = $("#twitter"),
    $twitterA = $("#twitter a");

// clicking on new quote button -> get quote from forismatic through json
$newQuote.on("click", function() {
  $.getJSON(
    "https://api.forismatic.com/api/1.0/",
    "method=getQuote&format=jsonp&lang=en&jsonp=?",
    function(response) {
      // replace content with new quote
      $quote.html(response.quoteText);
      $author.html(response.quoteAuthor);
      // enable tweet button
      $twitter.removeClass("disabled");
      $twitterA.attr("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(response.quoteText + "\n - " + response.quoteAuthor + "\n #RandomQuote"));
    }
  )
});