Random Quote Machine

Aug 06, 2017

A walkthrough on how I made a random quote machine



A few days ago, I completed my first FreeCodeCamp project, a random quote machine. It took me about eight hours to complete (I kept hitting speed bumps).

Random Quote Machine

So before you go on and do this, have a look at how I came to solve this.

(Please Note: this is just one way to solve this and I encourage you to try on your own to get the most out this).

First, you will need to get a Codepen account if you don’t already have one. Just name it Random Quote Machine (you can change it later).

Next, you need to find a Random Quote Api, I used the Famous Quotes API from Mashable.com. (Please note: you will have to register to use the api, but both the service and the api is completely free.)

Then you will need to set up your HTML. I did mine like so:

<div id = "quote-machine">
  <div class="quote">
     <div class="quote-full">
		<p class="full"></p>
	  </div>   
  </div>  
	<div class="buttons">
  <span id ="get-quote">New Quote</span>
	<span id="tweet">Tweet This</span>
	</div>		
</div>

This would setup the front-facing app. You want to make sure that the actual quote is inside its own div seperate from the buttons. It will save you so much pain later on in the tutorial.

Now you want to turn over to your javascript (I used jQuery).

You want to think about this in chuncks. So, the first thing you want to do is set up your variables, author and quote.

var quote = "";
var author = "";

Now that you have your variables, it’s time to get to the main function. Also, set up the document so you can see if your making any changes. We’ll be linking up to our #get-quote button to the getQuote function.

	function getQuote(){
	$.ajax({

	});
}

$(document).ready(function(){

	getQuote();
	$('#get-quote').on('click', getQuote);
});

Inside the getQuote function, we’ll add our $.ajax. So ajax, there’s a couple of things you need to know/input:

  • url
  • Accept
  • ContentType
  • type
  • data
  • dataType
  • success
  • error
  • beforeSend

Please note that this is an extremely brief explaination on jQuery AJAX. If you want to learn more, click here: jQuery AJAX.

The url is well, you guessed it, is the url that we will have to get from the Famous Quotes Api on Mashable.com.

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
	});
}

Accept points to type of application info that we will be (Although it depends on the object. We’ll be using json for this.).

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
	});
}

The ContentType just tells AJAX the type of content we’ll be using (default is: application/x-www-form-urlencoded).

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
	});
}

Type tells AJAX what type of data we’ll be doing with the data (we will use POST for this project).

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
		type: "POST",
	});
}

What you need to know about data for now is to just leave it as an empty object.

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
		type: "POST",
		data: {},
	});
}

dataType tells ajax what type of data we’ll be taking from (in this case) the api. We’re going to say json.

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
		type: "POST",
		data: {},
		dataType: 'json',
	});
}

Here comes the trick parts.

So for success we will have to write another function that would show the results. We need to start with function(data){}, data being the info from the api. Next, we need to set up an if statement to check if the info is a string or not.

	function getQuote(){
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
		type: "POST",
		data: {},
		dataType: 'json',
		success: function(data){
			if(data === 'string'){
			data = JSON.strigify(data);
		}
	  }
   });
}

After that we need to grab the author and quote variables that we made in the beginnning of our javascript venture and make them equal to data.author and data.quote. Then we add some animation when we want our quote and author to appear. So, we want to grab the .full class since that’s where we want them to appear. Next we call the animate function with .animate({}) and add our animation and append the quote and author to .full text. I did it like so:

	quote = data.quote;
	author = data.author;

	$(".full").animate(
		//this is the fade-in animation
		{
			opacity: 0
		},
		400,
		function() {
			$(this).animate(
				{
					opacity: 1
				},
				600
			);
			//this puts in the actual quote 
			//had to append because author wouldn't show
			$(".full").text(quote).append("<br/><br>" + " - " + author);
		}
	);
},

By now you should have:

function getQuote(){
$.ajax({
	url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
	Accept: "application/json",
	ContentType: "application/x-www-form-urlencoded",
	type: "POST",
	data: {},
	dataType: 'json',
	success: function(data){
		if(data === 'string'){
		data = JSON.strigify(data);
	}

	quote = data.quote;
		author = data.author;

		$(".full").animate(
			//this is the fade-in aniamtion
			{
				opacity: 0
			},
			400,
			function() {
				$(this).animate(
					{
						opacity: 1
					},
					600
				);
				//this puts in the actual quote 
				//had to append because author wouldn't show
				$(".full").text(quote).append("<br/><br>" + " - " + author);
			}
		);
	},
  }
});
}

Alright take a breather! That, my firends, was the longest part of the code, now onto the error message!

So we’re going to add an alert() for the web app, and we’re going to say, ‘Sorry, something went wrong!’ so:

	error: function(err) {
			alert("Sorry, something went wrong!");
		},

Finally, we need to add our Authentication or else it won’t work (you’ll get a console error), so the code will look like this:

	beforeSend: function(xhr) {
			//have to be authorized to get the info
			xhr.setRequestHeader(
				"X-Mashape-Authorization",
				{enter your API KEY here}
			);
		}

The final getQuote() will look like this:

	function getQuote() {
	//function for the get quote button to work
	$.ajax({
		url: "https://andruxnet-random-famous-quotes.p.mashape.com/",
		Accept: "application/json",
		ContentType: "application/x-www-form-urlencoded",
		type: "POST",
		data: {},
		dataType: "json",
		success: function(data) {
			//if successfull, get the info and format it
			if (typeof data === "string") {
				//checks to make sure json has quotes
				data = JSON.stringify(data);
			}
			quote = data.quote;
			author = data.author;

			$(".full").animate(
				//this is the fade-in aniamtion
				{
					opacity: 0
				},
				400,
				function() {
					$(this).animate(
						{
							opacity: 1
						},
						600
					);
					//this puts in the actual quote 
					//had to append because author wouldn't show
					$(".full").text(quote).append("<br/><br>" + " - " + author);
				}
			);
		},
		error: function(err) {
			alert("Sorry, something went wrong!");
		},
		beforeSend: function(xhr) {
			//have to be authorized to get the info
			xhr.setRequestHeader(
				"X-Mashape-Authorization",		
				{enter your API KEY here}
			);
		}
	});
	
}

Now we finished getQuote() we need to return to the $(document).ready(function(){}) to work the tweet button. We’re going to set it up similarly to getQuote(), but we will pass a blank function. The code will look something like this:

$(document).ready(function(){

	getQuote();
	$('#get-quote').on('click', getQuote);
		$("#tweet").on("click", function() {
		window.open(
			"https://twitter.com/intent/tweet?hashtags=100DaysOfCode" + " " +
				encodeURIComponent("'" + quote + "'" + " - " + author)
		);
	});
});

And there you have it. You can add any css that you would like and send me your final work @OgIke27. Thanks for reading!