Random Quote Generator: What's Wrong With My Code?

1

Any help would be much appreciated!

https://codepen.io/sgittles/pen/OWVqzj/

HTML

<div>
  <h1 class="text">
    The Sagacity Machine
  </h1>
</div>

<div class="text">
  <p id="new">[quote]</p>
</div>

<div class="text">
  <button id="generator">
    Another quote, please!
  </button>
</div>
<div class="text">
  <p>by <a href="http://codepen.io/sgittles/">sgittles</p>
</div>

CSS

body {
  background-color: turquoise;
}

.text {
  color: black;
  text-align: center;
  font-family: garamond, serif;
}

JS

var quote = '';
var author = '';

$(document).ready(function() {
	$("#generator").on("click", function(){
		$.getJSON("http://quotes.rest/quote/random.json?api_key=nTm2Mrlz57lQzVc0ERNdygeF", function(data){
			var html = "";
			quote = JSON.parse(data.contents.quote);
			author = JSON.parse(data.contents.author);
			html += "<p id='new'>";
			html += quote;
			html += author;
			html += "</p>";
			$("#new").html(html);
		});
	});
});
2

There are three issues that I have found. 1) jquery hasn’t been loaded. You can do this by clicking on the gear on the JS pane and choose JQuery from the quick add dropdown at the bottom.

  1. the api has to do with a mix call. The easiest way to deal with this is to use http://codepen… for your url.

  2. How you are using the parseJSON function. The below code will print the author’s name. Note that the data is coming from

    $.getJSON(“http://quotes.rest/quote/random.json?api_key=nTm2Mrlz57lQzVc0ERNdygeF”, function(data) {

     var author = data.contents.author;

 $("#new").html(author);

    });

3

Thanks for tip#1 :slight_smile:

Still struggling with quote generator, decided to attempt this:

var $btn = $("#generator");
var $quote = $("#new");

$btn.click(function(){	
  $quote.load("http://api.forismatic.com/api/1.0/?method=getQuote&format=text&lang=en", function success(data){
    $quote.html("<p id='new'>" + data + "</p>");
  });
});

… and this:

$("#generator").on("click", function(){
	$.ajax({
		url: "http://api.forismatic.com/api/1.0/",
		data: {
			method: "getQuote",
			format: "jsonp",
			lang: "en"
		},
		success: function(data){
			$("#new").html(data.quoteText);
		},
		error: function(){
			$("#new").html("<p id='new'>error</p>");
		},
		type: "GET"
	});
}

Any thoughts?

4

I hate to tell you this, but I’m not sure if you’ll get that API working. I just finished the quote generator and for the life of me I couldn’t get it. Also found other campers complaining about that API not working. If you look at the dev tools (F12 key usually), you’ll see that there’s an error in the console.

The best working API I found is this. I know others used it, including the example.

5

Well, one thing that seems to be an issue is that you are assigning $quote to a jquery command on the element with id='new'. However, in your code, you are are telling jquery to create a <p> element with an id='new'.

This is a problem because if you don’t already have an element with an id='new', then jquery can’t alter it’s html, because it doesn’t exist.

If you do already have an element with an id='new', then you may be confusing jquery because are are telling it to create html that has an element with the same id as the element for which you are altering the html – id’s are should be unique.