Random Quote Machine

index.html

<h1 class="text-center pt-5 hidden-sm-down" id="tittle">Random Quote Machine</h1>
<div style="mh-100" class="fullheight container d-flex justify-content-center align-items-center">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-block">
          <p><i class="fa fa-quote-left fa-lg fa-pull-left fa-border" aria-hidden="true"></i><span></span></p>
        </div>
        <div class="card-footer text-right">
          <p></p>
        </div>
      </div>
    </div>
    <div class="col-6 d-flex justify-content-center mt-5">
      <a class="btn" id="tweet-btn" target="_blank">
        <span class="fa-stack fa-2x">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa fa-twitter fa-stack-1x fa-inverse"></i>
            </span></a>
    </div>
    <div class="col-6 d-flex justify-content-center mt-5">
      <a class="btn" id="next-btn">
        <span class="fa-stack fa-2x">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
              </span></a>
    </div>
  </div>
</div>
<footer class="text-center">
  <p>By <a href="https://github.com/ValentinTapiaTorti" target="_blank">Valentín TT</a>.</p>
</footer>

random-quote-machine.markdown

Random Quote Machine

First Intermediate Fron End Development Project at Free Code Camp, Build a Random Quote Machine: https://www.freecodecamp.org/challenges/build-a-random-quote-machine

A Pen by Valentin on CodePen.

License.

script.js

$(document).ready(function() {
	var nextIsClicked = false;
	$('#next-btn').on('click', function() {
		if (nextIsClicked)
			return;
		else
			nextIsClicked = true;

		$('.row').fadeTo("fast", 0.01, function() {
			var url1 = "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
			$.getJSON(url1, function(json) {
				$('.card-block p span').html(json["quoteText"]);
				if (json["quoteAuthor"] !== "")
					var quoteAuthor = json["quoteAuthor"]
				else
					var quoteAuthor = "Anonymous";
				$('.card-footer p').html(quoteAuthor);
				$('#tweet-btn')
					.attr('href', 'https://twitter.com/intent/tweet?hashtags=Quotes%2CFrases&text='
					+ encodeURIComponent('"' + json["quoteText"].trim() 
					+ '" -' + quoteAuthor));
				setTimeout(function() {
					$('.row').fadeTo("slow", 1);
				}, 200);
				nextIsClicked = false;
			});

		});
		var cardContent = $('.card-block p span').html();

		$('body').css("background-color", getRandomColor());
		setTimeout(function() {
			if (cardContent == $('.card-block p span').html()) {
				$('#next-btn').click();
			}

		}, 3000);
	});
	$('#next-btn').click();
});

function getRandomColor() {
	var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b"];
	return colors[Math.floor(Math.random() * colors.length)]
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css?family=Merienda+One");

html, body {
	height: 100vh;
	background-color: #ffcdd2;
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	-khtml-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}
* {
	font-family: "Merienda One";
}
#tittle {
	font-family: "Merienda One" !important;
}
.fullheight {
	height: 80vh;
	background-color: transparent;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />