Issue with API quote generator

1

I have 3 issues as far as I can see.

  1. My tweet icon font awesome is not showing.

  2. My tweet button is bringing me to twitter but not actually tweeting the quote.

  3. My quotes are showing up semi-coded as if they are still in JSON.

2
  1. Check your settings under “Stuff for <head>”

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

The issue with this is that you’re using a generic path as if it was hosted on your own server. Instead, go to http://fontawesome.io/get-started/ and type your email, then click “Send my Font Awesome Embed Code!” and replace the href= portion with what you received. You can also add the link to the External CSS portion under the CSS tab.

  1. You’re basically turning the retrieved quote in to a string using JSON.stringify(json);. The problem with this is that you’re also getting the object data, like {"quote": and the the like. The URL for twitter probably isn’t too friendly to that. I would suggest creating 2 global variables for quote and author, writing the object and corresponding property to those variables, then concatenating them in the URL for twitter. This is only my suggestion, and one path of many.

  2. See #2: try something like json.author or json.quote to select those particular properties of the received json data.

3

Ok, the first issue is resolved.

As for the second and third I’m not sure how I can pull the target data I want from the object.

should I JSON.getOwnPropertyNames();

?

4

You are putting the entire JSON on the screen, with the format of a JSON. You are outputting this:

{quote: "′Classic′ - a book which people praise and don't read.", author: "Mark Twain (1871-1835)"}

That is an object so you can extract the properties. Once it’s loaded in you can treat it like a JS object - because it is. Like meatballx says, I might do it like:

var quoteStr = json.quote + " - " + json.author;

Or you can just build it in your jquery text write.

You have some other problems. Your jQuery selectors should be $("#quote").text - the quotes are needed and the # because you are selecting by id.

Additionally, you are writing to the tweet with $("#quote").text that is a reference the function text, but you want the return value. So, you want $("#quote").text().

Additionally in the browser console you are getting a mixed content warning on your background image because it is being loaded over http and codepen is https.

Also in the browser console there is an error saying that Boostrap JavaScript needs jQuery - you have to load jQuery before you load Bootstrap.

If you learn how to read the browser console (ctrl-shft-J) you will catch more errors and get more info.

5

I’m sorry… I’m just not understanding.

The id tag # has been added, I forgot that.
As far as when you guys are saying json.quote it’s not doing anything when I try that.
I tried replacing JSON.stringify with JSON.quote or author and nothing changes.

I added global variables like the first camper suggested and I just wasn’t sure what to do with them.

Finally I added an if statement that would keep someone from tweeting out my default " click new quote for a random famous quote! " string.

6

Put ("#quote").html(json.quote) instead of $("#quote").html(JSON.stringify(json));

7

Not JSON.quote, json is param of the function

8

Awesome, that worked thank you

9

I didn’t know that about mixed content. Just read about what that was online so thank you.

The console is now 100% error free.