Why does my site cert become insecure after a JQuery AJAX call?

I've got a website that uses JQuery to grab information from an API located at: https://api.lootbox.eu/. The website I'm making has a cert that's been created and installed with Let's Encrypts tools. (I followed a tutorial on DigitalOcean to set it up)

Now, when I click a button to make the API call and update the website contents, Google Chrome then deems the cert "Not Secure" (shown in the address bar).

Here's my code.

//when the page has fully loaded
$(document).ready(function(){
function parseResponse(data)
{
    //parsing JSON...
    //lets avoid the "data.data"
    response = data.data;

    //set the user's general profile details
    $("#user_avatar").attr("src", response.avatar);
    $("#comp_rank_img").attr("src", response.competitive.rank_img);
    $("#comp_rank").html(response.competitive.rank);
    $("#qp_level").html(response.level);

    $("#qp_playtime").html(response.playtime.quick);
    $("#comp_playtime").html(response.playtime.competitive);
    $("#qp_wins").html(response.games.quick.wins);

    $("#comp_total_games").html(response.games.competitive.played);
    $("#comp_wins").html(response.games.competitive.wins);
    $("#comp_losses").html(response.games.competitive.lost);
}
//goes to the Overwatch API and grabs the JSON data for processing.
function processAjax()
{
    $.ajax({
        url: "https://api.lootbox.eu/pc/us/JuicyBidet-1292/profile"
    }).then( function(response){
        parseResponse(response);
    });
}
//set up the button event listener
$("#submit").click(function(e){
    //prevent the button from reloading the page
    e.preventDefault();
    //run the ajax grabber/processor
    processAjax();
});
});

(I need to learn how to format code properly in SO questions...).

I don't get any other errors in my Chrome console (other than "favicon" 404ing - which is unrelated).

I've also tried the website in Microsoft Edge and I get the following in their Console: SCRIPT7002: XMLHttpRequest: Network Error 0x800c0019, Security certificate required to access this resource is invalid.

I'm thinking either the problem is with my code, or now that I've checked, the API website's cert is invalid in both Chrome and Edge.

Any help would be appreciated. Thanks.

(I'm aware the code is scrappy, I'm learning)

The insecure error is because if a site is loaded over https the browser expects all subsequent calls made by the page will be secure, but in your case you are calling a URL http://api.lootbox.eu/pc/us/JuicyBidet-1292/profile which uses http:// and is insecure thus making your website insecure.

Solution

Use https url's everywhere in your pages.