Random qouote works on codepen but not when I export it to local machine

my other exports from codepen work fine but not this one. I thing get json method is not getting data so when i click on the get quote button it does not generate a quote on my local machine but it works fine on codepen.
Here is the link to my codepen Random Machine project

The HTML in codepen doesn’t show the whole code.

the typical format:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simon</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
</body>
<script src='script.js' type="text/javascript"></script>
</html>

my other exports from codepen work fine but not this one. I thing get json method is not getting data so when i click on the get quote button it does not generate a quote on my local machine but it works fine on codepen.

Check your browser’s console for any error messages.

it gave the following error:

Failed to load https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=&_=1518820780984: The ‘Access-Control-Allow-Origin’ header has a value ‘http://null’ that is not equal to the supplied origin. Origin ‘null’ is therefore not allowed access.

here is the exported files:-1:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator By Bindu</title>  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

      <link rel="stylesheet" href="css/style.css">
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
</head> 

  <body>
    <div class="container" >
      <h1> Tweet Quote Generator </h1>
       <!--end of container div -->
        <div class="jumbotron text-center message">          
          <p>Click on the "Quote of the day button" to get a quote here.</p>
        </div>         
       
        <div class="text-center">
          <button id="getQuote" type="button" class="btn btn-primary">Quote of the day !!</button>    
        </div><!-- end of button div -->
         </div><!-- end of buttonBasic div -->
      
      <div id="tweet" class="text-center">          
        
        <a href="http://twitter.com/share" class="twitter-share-button"
         data-text="This is what we want to change dynamically"       
         data-count="none" data-via="bindu_verma">Tweet</a>        
      </div> <!-- end of container div-->    
 
  
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

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

</html>


      
      $.ajaxSetup({cache:false});
      $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data){
      $(".message").html(data[0].content + " - " + data[0].title);    
        });
});      
$('a[data-text]').each(function(){
      $(this).attr('data-text', "");   
});
   $.getScript('https://platform.twitter.com/widgets.js');

When I export your files using Codepen’s export feature, the index.html file looks like:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator By Bindu</title>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <body class="body">
    <div class="container" >
      <h1> Tweet Quote Generator </h1>
       <!--end of container div -->
        <div class="jumbotron text-center message">          
          <p>Click on the "Quote of the day button" to get a quote here.</p>
        </div>         
        <div class="text-center">
          <button id="getQuote" type="button" class="btn btn-primary">Quote of the day !!</button>    
        </div><!-- end of button div -->        
      <div id="tweet" class="text-center">       
        <a href="http://twitter.com/share" class="twitter-share-button"
        data-text="This is what we want to change dynamically"       
        data-count="none" data-via="bindu_verma">Tweet</a>        
      </div>
   </div> <!-- end of container div-->    
  </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script  src="js/index.js"></script>
</body>
</html>

You need to get rid of that extra JavaScript code at the bottom of your index.html file. Also, when you check your browser’s console for errors, I was referring to the local version and not the one on Codepen. The local version will have an error you need to resolve.

Local machine has this error
Failed to load https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=&_=1518820780984: The ‘Access-Control-Allow-Origin’ header has a value ‘http://null’ that is not equal to the supplied origin. Origin ‘null’ is therefore not allowed access.

It is because you are viewing it from file:// and not an actual web server (http or https). You can install a simple web server like http-server and start it up in the same directory as your index.html file and your code works fine with no error.

Ok i have other projects but i used ajax and they are working fine.
Should i have used ajax? in other projects i used other APIs like weather projects but for them i did not have start any server.

It would depend on the API honestly.

Ok , thankyou so much for all of your help !! I will try some other api for this project.