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

1

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

2

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>
3

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.

5

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.

6

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');
8

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.

10

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.

12

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