Random Quote Machine - CodePen, AJAX, API, JSON stuck in craziness

1

I’m stuck, cannot get codepen to fetch the quote.
Setup Mashape account, got my api key
wrote some simple code using their guides and a walkthrough on jQuery Script.

It refuses to fetch the quote. Not sure where to go from here; need some help/guidance.

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <meta charset="utf-8">  

  <title>Mashape Andruxnet API Query</title>

  <script>
$(document).ready(function(){

  // buildIt: setup vars and 1st quote

  var quote = "";

  var author = "";

  createQuote();
  

 // buttons

   $("#btn2").on("click",function(){
    createQuote();
  });
  </script>
  
 <script> 
	function createQuote() { 

 var output = $.ajax({

    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/', // The URL to the API.

    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc

    data: {}, // Additional parameters here

    dataType: 'json',

    success: function(data) {
      quote = data.quote;

      author = data.author;

      $("#quoteItself").html("" + quote + "");

      $("#quoteAuthor").html("  " + author);

      console.dir((data.source)); 

        },

    error: function(err) { alert(err); },

    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "PoBjuQCKaxmshzrDvhuKJ0VQRTfrp1GvsNCjsn1NrWGuI1fyqH"); // My Mashape key
    }
});

}

</script>

</head>

<body>

<button id="btn2">New Quote</button>

<div>

  <div id="quoteItself"></div>

  <div id="quoteAuthor">author</div>

</div> 

</body>

</html>

this SHOULD run no problem, but it doesn’t.

2

Hi @EgoDominusVos

Can you provide the codepen link?

3

not sure why that’s necessary as I posted my entire code in the OP, BUT sure here it is:

http://codepen.io/EgoDominusVos/full/egdQjv/

4

I just wanted to see the code running so I could check the console.

Found the error, your missing closing parens/braces for the ready function:

$(document).ready(function(){

  // buildIt: setup vars and 1st quote

  var quote = "";

  var author = "";

  createQuote();
  

 // buttons

   $("#btn2").on("click",function(){
    createQuote();
  });

}) // These were missing
5

@joesmith100

My console isn’t throwing up anything??? Just blank … o.0

And THANK YOU … it’s always the little garbage missed, spaces, commas, brackets … aaarrrrgggghhhhhh

6

Lol, no worries dude.

It’s a syntax error, so codepen likely wouldn’t run the code in that scenario and so you wouldn’t see an error in the console.

As a side note, your probably better off moving all the javascript code into the JS tab, rather than having it sitting in the HTML tab. Codepen can also pick up on syntax errors (although not always helpfully) when the code is inside the JS tab, it didn’t seem to be doing that when it was inside the HTML.

7

thanks again, and now to figure out why I’m not passing data to my tweet function …

8

hlo ,hw are hope your are fine , i need some help pls i have no idea how to begin with the Random Quote machine ,can your work me thru because hate to just go and copy from some one.

9

Give this a try

2 Likes
10

thanks , this is really nice video i enjoyed it.

11

Hlo hw are u, I really need help , on signing up cloud after completing every thing and clicked on create account it return this i have no idea what pls help ! help ! this is what it shows to me ,

“Something went wrong while creating your account
The server returned an error: Invalid captcha code, please re-enter”

12

Although I am not sure what exactly you are trying to sign up for… captcha codes are annoying. You most likely incorrectly typed the pictured captcha code into the submission box. It is supposed to weed out automatic requests from a program rather than a human. I get them wrong occasionally as well.

13

signing up with cloud 9, can work me thru it gives me error i am taking about