Random Quote Machine: 2 questions

JavaScript
1

Hi everyone,
Here’s my random quote machine so far: https://codepen.io/virginiab/pen/rvaYLv
So ignore the ugliness of my project so far, I just have two questions about it before I move on with the CSS:

1 - Why does it seem to be doing the random picking live? What I mean is, if you click the “get quote” button, you see all the different quotes “passing by” before picking one. This might be a very silly question, but I’m just clueless as how to fix it.
2 - Why doesn’t my locally stored version of it work? It’s the exact same code, with the “stuff for head” that is added by CodePen added to it manually, so I don’t see why doesn’t work. console isn’t showing any errors either.

Thanks in advance!

2

You may structure your js code like this:

var url =
    "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?&lang=en";

$(document).ready(function() {
  getQuote();
});

function getQuote() {
  $.getJSON(url, function(data) {
    $(".quote").html(data.quoteText);
    $(".author").html(data.quoteAuthor);
  });
}

$("#newQuote").on("click", function() {
  getQuote();
});

In codepen->settings->behavior just disable auto updating because each time you change even a letter in code the app runs again and again retrieving new quotes

1 Like
3

I tried your modifications but it doesn’t solve the issue, it keeps showing me tons of quotes before choosing one.

4

Have you disabled the auto updating in codepen settings?

5

Yes, I have. I don’t get why it would show every single quote. :thinking:

6

Do you see the same behavior at this forked pen ?

1 Like
7

No! That one works perfectly. However if I copy-paste you JS into mine it keeps doing the same thing. What else could be wrong? And why wouldn’t my local version work?

8

When you disabled the auto updating you need to hit the run button in order to rerun the pen, otherwise will maintain the previous behavior.

9

Now it works with your code, not mine. Could you explain why you made those modifications? I’d really like to understand this before moving on :slight_smile: thanks!

10

I solved it. For some reason, you code worked in codepen but not in my local file, whereas my local file works with my original code (once I fixed a silly mistake I made). Why it’s different for codepen and local files, I have no idea, but I’m happy that I wasn’t so off with my first attempt. Thanks!!

11

I don’t know what was your local working code but the main diff between local development and codepen is the sandbox environment in case of codepen. You can read more on sandboxing here

1 Like