Hi everyone, I’ve just finished my random Quote Generator and I’m trying to transfer it from codepen to sublime text editor. My code is identical to how it is in my codepen and everything works in the browser except it doesn’t generate quotes. Can anyone tell me what I’m missing? Thanks!
It looks like your using jquery. Did you remember to link it in on your sublime version?
Thanks for responding. I have this line
my /body tag> and between two script tags. Is that what you mean?
As the other guy said, you might not have linked jquery. Instead of copying and pasting the code from codepen, click the export button at the bottom of the page, which will download the html, css, and js files with things like jquery properly linked.
Yeah, I’ve just tried exporting like you said and it’s I’m still running into the same issue. Everything else on the page works outside of the quote generator… But it works fine on codepen for some reason
You can export your pen as a .zip file (with all the dependencies intact). There’s an Export button at the bottom right of the codepen editor.
Ok I found the problem. I downloaded it and opened up the browser console to find this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=15&callback=. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://s.codepen.io’).
I just tried that and had no luck sadly…
Ok thanks, so what can I do to fix this?
Not quite sure to be honest, but I’ll try and figure it out.
Thanks really appreciate it
Try linking your bootstrap.min.css file in the head tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
…then link the jquery.min.js and the bootstrap.min.js right before the closing body tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Tried it, no luck sadly… Thanks anyway though
Can you upload your code to dropbox or google drive and post the link here so i can take a look at it, because i was having the same problem and it was all about linking the files.
here’s my github. Really appreciate any help! https://github.com/heenslice/Design-Quote-Generator
Hey man I haven’t had much luck so far. I’ll keep working on it, but you might want to do some reading on the Same Origin Policy, as that’s what the problem is here. If all else fails, you might want to use a different source for your quotes. One that is commonly recommended, and also the one I used, is Forismatic. It doesn’t need an API key, and you (likely) won’t be running into this problem.
Cool. I’ll look into it a little myself. Thanks for the effort though
hey, i found the problem with your code; since you are working locally with your project, you just need to specify the folders in which the designQuote.css and the designQuote.js are located.
For example, the way i work with my projects is like this:
1-First create the main project folder like randomquotemachine.
2-Inside, i create a “public” folder.
3-Then create my index.html inside and also a folder for my “images”.
4-Then create on folder called scripts for my .js file and one called css for my .css files.
5-Then on my index.html i reference the .css and the .js file by putting the name of the folder in which that file is located and a forward slash /
Long story short : index.html, css, images and scripts folder go inside de public folder, than move your .css and .js to scripts and css folders. and reference them in your index.html.
if you can’t solve it, let me know and i can do pull request…
Hey, thanks for the help. I’ve just tried to solve the issue and I’m still running into problems. I would like to take you up on the pull request offer