My API URL is Correct and the HTTP(S) is Correct, but Console.log() Comes up Blank? Why?

Question

I can't get any API urls to work! All of my JavaScript code is correct, so I don't know what the problem is.

My CodePen console and Google Chrome developer console is blank! See screenshot here:https://s25.postimg.org/k5ds4p1xb/Console_Test.jpg (Screenshot of consoles)

Here is my CodePen: https://codepen.io/IDCoder/full/KZqNdr/

Here is my JavaScript code:

$(document).ready(function(){

  var quote;

  function getNewQuote() {
    $.ajax({
      url: 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      success: function(response) {
        //quote = response.quoteText;
        console.log(response.quoteText);


      }
    });
  }
  //getNewQuote();
});

 //getNewQuote();

 // $('.get-quote').on('click', function(e) {
  //  e.preventDefault();
   // getNewQuote();
  //});

  //$('#quote').text(response.quoteText);
        //if (response.quoteAuthor) {
          //$('#author').text('said by ' + response.quoteAuthor);
        //} else {
         // $('#author').text('- unknown');
        //}

A commenter recommended I use an ajax error call and I implemented that and got the Google Chrome developer console to log this "Failed to load https://codepen.io/boomerang/iFrameKey-a33d8144-0d32-5d95-7476-4d00493149e7/wrongfile.txt: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404." ....I'm confused!

Answer 1

Changed the protocol to https on the codepen and uncommented getNewQuote();