Press "Enter" to skip to content

Random Quote Machine

The random quote machine

The random quote machine is a project created for the Free Code Camp challenges. The objectives are to fulfill the user stories below.

  • I can click a button to show me a new random quote.
  • I can press a button to tweet out a quote.

The site should also be functionally similar to this example.

A wrong header on request

Because this was my first project using GET requests to load JSON data there were some things I encountered that were unfamiliar and quite frustrating. Finishing this project took me around seven hours spread over three days. Most of this time was spent reading about CORS and in particular the following error:

‘XMLHttpRequest cannot load LINK. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.’

After some trial and error, I found out it was related to the browser I do the local testing in Chrome. There is a way to disable the built-in security in Chrome.

To disable Chrome’s web security:

open -a Google\ Chrome --args --disable-web-security --user-data-dir=""

Run the above line from Terminal, be sure to kill all instances of Chrome before you do so. Chrome will start with a warning message on top. Older versions of Chrome used different commands. If the above doesn’t work anymore check this Stack Overflow thread for help. It is still active and gets updated regularly.

The warning message that is shown by Chrome when internet security has been disabled. Do not forget to close this when you want to browse the web again.

Chrome Extension

There is an extension for Chrome that will put Access-Control-Allow-Origin’ headers on all ajax requests.
Allow-Control-Allow-Origin: *. I didn’t try it, after reading the comments I decided that I didn’t want to take the risk and break my Chrome setup.

Kyle Thielk:

 Does its job perfectly and as expected. A lifesaver when doing development.
I did however spend days trying to figure out why Chrome was constantly crashing and failing to load different pieces of a website. This extension will break almost everything in chrome when enabled. Use selectively.
Roman Senturov:

 It is good for me, because I create many service with https-http and http-https connections in my dev enviroment. Thanks!

But after deactivate this tool chrome can’t understand all CORS rules. Why? 🙁
I reset my chrome and return all config after login. But this bug must be fixed.

Beware of caching

Getting rid of the “No ‘Access-Control-Allow-Origin'” error was the most work. The second problem I had was the fact that I would get a quote but pressing the button wouldn’t refresh it. A look at the network tab in the Chrome dev tools shows that the GET request gets done (last two lines) and are successful (code 200) but the size tab tells us it is loaded from disk-cache. To prevent caching I added this line: $.ajaxSetup({ cache: false });

$('document').ready(function(){
     getJson();
     $.ajaxSetup({ cache: false });
     $('button').click(function(){
         getJson();
     });
});

function getJson(){
     $.getJSON("https://quotesondesign.com/wp-json/posts?filter
     [orderby]=rand&_json=mycallback", function(obj) {
     $('.quote').html(obj[0].content);
     $('.author').text(obj[0].title);
});
}

 

Notice the (from disk cache) notifications.

The final result

All finished projects for Free Code Camp are hosted on https://codepen.io, you can find the finished
Quote Machine here as well as the other projects.
For more info and projects be sure to also check my Github profile.

Thanks for reading and happy coding!

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *