<body>
	<h1>Random Quote Generator</h1>
	<div class="quote-box">
		<div class="quote-text">
			<blockquote>
				<p class="js-quoteBox" id="text"></p>
				<div class="author">
					<span id="quote-source"></span>
				</div>
			</blockquote>
			<div class="buttons">
				<a class="btn btn-default" id="tweet-quote" title="Tweet this quote!">
					<i class="fa fa-twitter"> </i>
				</a>
				<button class="btn btn-default" type="button" id="new-quote">Get Quote</button>
			</div>
		</div>
	</div>
	<div class="footer">
		<h5>Made with ❤️ in Pittsburgh, Pennsylvania by <a href="https://github.com/twhite96" target="_blank"> Tiffany White</a></h5>
	</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,500);
* {
  margin-left:auto;
  margin-right:auto;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

h1 {
  color: #fff;
  text-align: center;
}
div {
  position: relative;
  z-index: 2;
}
body {
  background-color: #06d7d9;
  color: #06d7d9;
  font-family: 'Droid+Sans', sans-serif;
  font-weight: 400;
}
.footer {
  width: 450px;
  text-align: center;
  display: block;
  margin: 15px auto 30px auto;
  font-size: 0.8em;
  color: #fff;
}
.footer a {
  font-weight: 500;
  text-decoration: none;
  color: #fff;
}
.quote-box {
  border-radius: 3px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .5);
  position: relative;
  margin: 8% auto auto auto;
  width: 450px;
  padding: 40px 50px;
  display: table;
  background-color: #fff;
}
.quote-box .quote-text {
  text-align: center;
  width: 450px;
  height: 100px;
  clear: both;
  font-weight: 500;
  font-size: 1.75em;
  transition: height 0.66s ease-out;
}
.quote-box .quote-text i {
  text-align: center;
  display: block;
  float: none;
  font-size: 20px;
}
.quote-box blockquote {
  background: #f9f9f9;
  border-left: 10px solid #06d7d9;
  margin: 1.5em 10px;
  padding: 2em 10px;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.quote-box blockquote:before {
  color: #06d7d9;
  font-size: 4em;
  content: open-quote;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.1em;
  float: left;
}
.quote-box .quote-source {
  width: 450px;
  height: auto;
  clear: both;
  padding-top: 20px;
  font-size: 1em;
  text-align: right;
}
.quote-box .buttons {
  width: 450px;
  margin: auto;
  display: block;
}
.quote-box .buttons .btn {
  height: 38px;
  border: none;
  border-radius: 7px;
  box-shadow: 0 5px #00a4a6;
  background-color: #06d7d9;
  color: #fff;
  outline: none;
  font-size: 0.85em;
  padding: 8px 18px 6px 18px;
  margin-top: 50px;
  opacity: 1;
  cursor: pointer;
  position: relative;
}
.quote-box .buttons .btn:active {
  box-shadow: 0 0 #00a4a6;
  transition: all 0.3s ease;
  transform: translateY(4px);
  top: 5px;
}
.quote-box .buttons .btn:hover {
  opacity: 0.9;
  box-shadow: 0 3px #00a4a6;
  top: 1px;
}
.quote-box .buttons .btn#tweet-quote {
  float: left;
  padding: 0px;
  padding-top: 5px;
  text-align: center;
  font-size: 1.2em;
  margin-right: 5px;
  height: 30px;
  width: 40px;
}
.quote-box .buttons .btn#new-quote {
  float: right;
  padding-top: 5px;
}
a:link {
  text-decoration: underline;
}

span {
	text-align: center;
  margin: 40px 20px;
	height: 0;
  transition: height 0.66s ease-out;
}
var quoteBox = '';

$(document).ready(function() {
	$('#new-quote').on('touchstart click', function(e) {
		e.preventDefault();
		var url = 'https://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en';

		// Give the paragraph for quotes a class name to be precise
		quoteBox = $('.js-quoteBox');
		// I chose to give it .js-quoteBox
		// Hide it in the DOM (You should do this in CSS instead)
		quoteBox.hide();
		// Make the request
		$.ajax({
			url: url,
			method: 'get',
			cache: false
		}).done(function(res) {
			// Use response here to modify the DOM
			var post = res.shift();
			quoteBox.html(post.content)[0].innerText;
			// Now you can fade the js-quoteBox back into the DOM
			quoteBox.fadeToggle(1000, function() {
				$(this).html(post.content);
				// Show source if available
				if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
					$('#quote-source').html('Source:' + post.custom_meta.Source);
				} else {
					$('#quote-source').text('');
				}
			})

		});
		$('#tweet-quote').on('click', function(e) {
			//We tell our browser not to follow that link
			e.preventDefault();
			//We get the URL of the link
			window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + quoteBox.text());
			console.log(quoteBox);
		});

	});
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js