Random Quote Machine codepen problem

Random Quote Machine codepen problem
0.0 0

#1

Hello! I have a skeleton for a random quote machine (sans css and tweet function) on
https://codepen.io/rhuss623/pen/deEyLo
I took the javascript and put it into the html portion of codepen so I could copy and paste it into a freecodecamp phone screen module, such as the JSON API’s and AJAX challenges. It works when copied and pasted into a freecodecamp editor, but it doesn’t work in codepen. Any ideas? Any help is hugely appreciated!


#2

The link doesn’t work.


#3

SpaniardDev you are awesome! Thanks for helping!!!

Does the link work, now?


#4

Yep.

Ok. First of all, the body tag can never be surrounded by any elements other than the HTML tags. The divs must be inside the body. In fact, when coding HTML in Codepen you can omit the use of the body element as it is included by default by the text editor.

That being said, you need to import the library into your document, otherwise it won’t recognize your code as standard Javascript. You can do this by importing it directly into your HTML code, like this:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Or you can use Codepen’s setting to import it. The latter method will require you to move your Javascript code into the editor labeled Javascript, so it can make use of jQuery.

Hope it helps.


#5

Thanks!

I’ve removed the body tags and included the library that you’ve supplied. Unfortunately, it still neither works when in the HTML editor w/ the jquery library added nor in the Javascript editor (without the script tags).


#6

I see the same code at Codepen. Please, update the code. I want to make sure you did it right.


#7

Forgot to save changes!

Here’s the updated first one, again: https://codepen.io/rhuss623/pen/deEyLo

Here’s a fork using the JS editor panel: https://codepen.io/rhuss623/pen/jxomWg


#8

In the above project, make sure you add jQuery or it will not do anything.


#9

I ended up forking someone else’s project, deleting their code, and inserting my own (unchanged) code. That worked! I’m beyond confused, but thanks for the tips SpaniardDev and randelldawson!!!


#10

My guess is the forked project already had the jQuery linked to it.


#11

How would you link jQuery to it? This sounds like something I’ll need to know in the future.


#12

Using Codepen, you click on the small gear on the JS Module and then click the Quick-add dropdown menu and select jQuery.


#13

Thanks!!! And you’re totally right! The fork I copied my code into had already added JQuery


#14

Hey friends!

Here’s my first draft at a random quote generator using my own quotes:

Feedback appreciated!

And here’s a buggy first draft using an API:

Nothing happens when I hit the button and I’d love a little advice!


#15

There are two issues with the one using the API.

  1. The following callback function code does not execute the function quoteTime. You are missing something important after quoteTime which will actually call the quoteTime function. You wrote it correctly in your non-API version.
  $(".btn").on("click", function() {
    quoteTime;
  });
  1. Fix the above issues and then you will see an error in the browser console (Ctrl+Shft+J in Chrome). You specified format=json, but since you really want to use jsonp (since you also used jsonp=?, then the format query parameter should also be jsonp.

#16
  1. I figured I’d made a silly mistake :wink:
    2)I hadn’t known how to check for errors in the browser console…that’s so useful!!

Merci beaucoup!!!

Updated code: https://codepen.io/rhuss623/pen/rvXmwa?editors=0010