freeCodeCamp - Build a Random Quote Machine

freecodecamp-build-a-random-quote-machine.markdown

freeCodeCamp - Build a Random Quote Machine

A Pen by GILLES Annthomy on CodePen.

License.

index.html

<div class="container">
		<div class="row text-center">
			<h1>Random quote Machine</h1>
			<hr>
		</div>
		<div class="row text-center" id="divQuotes">
			<button id="getQuote" class="btn btn-primary"><i class="fa fa-quote-left" aria-hidden="true"> Quotes </i>
</button>
			<div id="quotes"></div>
			<div id="author"></div>
		</div>
	</div>

script.js

var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
$(document).ready(function() {
  $('#getQuote').on('click', function() {
    var color = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = color;
    $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.
        var quote = $('<p>' + post.content + '</p>');
        var author = $('<p> -' + post.title + '</p>');
        $('#quotes').html(quote);
        $('#author').html(author);

        // If the Source is available, use it. Otherwise hide it.
        if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
          $('#quote-source').html('Source:' + post.custom_meta.Source);
        } else {
          $('#quote-source').text('');
        }
      },
      cache: false
    });
  });
});

style.css

body {
	background-color: darkslategrey;
	color: aliceblue;
	vertical-align: middle;
}

#divQuotes {
	border-radius: 3px;
	position: relative;
	margin: 8% auto auto auto;
	width: 450px;
	padding: 40px 50px;
	display: table;
	background-color: #fff;
}

#quotes#author {
	text-align: center;
}

p {
	color: darkblue;
	font-size: 1.5em;
}