Using HTTP API from HTTPS page

I'm a freecodecamp student using windows 10 home edittion. Codepen.io the editor that is a http site. the "local weather" lesson has me with an api from open weather map which is also an http. When I first:

$.document.ready(function() {
  var api = "http://api.openweathermap.org/data/2.5                   /weather?id=2172797&appid=(I have my api key)";        
  $.getJSON(api, function(data) {
    alert(api, data.coord.lon);  
  });
});

I have asked other coder and they said the code is correct. I have also tried AJAX:

function loadDoc() {
  var url = "http://api.openweathermap.org/data/2.5/weather?id=2172797& appid=(I have my api key)";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "url", true);
  xhttp.send();
}

I don't get the data, nor do I get an "alert" response. I then emailed Codepen.io response:

The first problem I see here is you’re visiting the Pen over HTTPS and requesting the Wikipedia API over HTTP. You’ll get mixed content warnings when this happens. The browser doesn’t allow you to request non secure URLs when you’re on a secure HTTPS URL.

I then tried the to manipulate the settings in chrome, mozilla, and I.E., and still no responses. I have talked to coders, emailed, called centurylink and have talked to their programmers, have called goDaddy for a certificate, and now I find myself still with no solution. I have been using Codepen's editor for assignments (with is the actual, http site that emailed me). I have reseached this problem since MAY 29th and I have no solution.

Can someone help. Thank you.

You can proxy it with one server : App AJAX =>your https server call in back-end (not a redirect)=>The http API