Can't run codepen.io pen on local computer

1

This is my drawing site for Random Quote machine challenge: https://codepen.io/evgmur/pen/WEzEya/ I exported the site completely, but on the local machine it stopped working, while on codepen everything works fine. What could be the problem? External scripts are loaded correctly. If I replace the code with a simple alert () call, everything works.

2

Codepen does a lot of work for you behind the scenes. Post your HTML file and Javascript file. If unsure how to do that, start a line with the key to the left of number 1 key, 3 times. Hit enter, paste your code, hit enter and put 3 `s again. Replace Xs with key next to the number one key.
xxx
your code
xxx

1 Like
3

It is just scratch, so for now it is very simple
index.html

<!DOCTYPE html>
   <html >
   <head>
   <meta charset="UTF-8">
   <title>A Pen by  EvgeniyMuravev</title>
   </head>
   <body>
    <p id="quote"></p>
    <i id="author"></i>
    <p id="link"></p>
    <br>
    <button id="getQuote" onclick="getQuote()">New Qoute</button>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

   <script src="js/index.js"></script>

</body>
</html>

index.js

$(function() {
    getQuote(); 
});
function getQuote(){
$.ajax({
      type: 'POST',
      url: '//api.forismatic.com/api/1.0/',
      async:true,
      dataType : 'jsonp',  
      crossDomain:true,
      data: { 
        'method':'getQuote',
        'format':'jsonp',
        'jsonp':'parseQuote'
      },
  });
  
};

 function parseQuote(response)
		{
			document.getElementById("quote").innerHTML = response.quoteText;
			document.getElementById("author").innerHTML = response.quoteAuthor;
      document.getElementById("link").innerHTML = "<a href='"+response.quoteLink+"'>"+response.quoteLink+"</a>";
      
		}
4

Check this out https://learn.jquery.com/using-jquery-core/document-ready/ and don’t forget script tags in the index.js file.

5

All files was generated by codepen.io, so all tags are ok, but it doesn’t work

6

Look in the console:
image

Your problem is that you are using the URL:

//api.forismatic.com/api/1.0/

This will not work on your local file system. When you have // and you load the file from your computer, the web browser will look on your computer for the file named "api.forismatic.com" (like it is an actual file named api.forismatic with a .com extension). You need to specify that you want the link to get data from an actual website:

http://api.forismatic.com/api/1.0/

If you put your code on a web server again, you will be fine with just the //

1 Like
8

What makes you think that? I downloaded it, changed the link, and it all worked fine opening up the file in my browser. AJAX is the browser making the request. You don’t need a server for the browser to make a request.

1 Like
9

Great! Everything’s works fine, thanks to you!

1 Like