API новостей Google перестал работать. Не знаю почему

Question

Я строю проект, в котором новости Google представлены на одной из страниц. Мой код ранее работал, но по какой-то причине он остановился, и я не уверен в причине. Я не помню, чтобы какие-либо изменения в нем, но я, возможно, неосознанно сделал это. Я мог бы действительно использовать кого-то помощь в просмотре этого.

Мой код ajax выглядит следующим образом (js / ajax_googlenews.js)

(Прошу прощения за встроенный стиль. Это временная мера.)

$(document).ready(function () {
    $.ajax(
        {
            type: "GET",
            dataType: "json",
            cache: false,
            url: "https://newsapi.org/v2/everything?q=bitcoin&apiKey=API-KEY-HERE",
            success: function (data) {
                for (var i = 0; i < 40; i++) {
                    var rTitle = data.articles[i].title;
                    var rAuthor = data.articles[i].author;
                    var rDes = data.articles[i].description;
                    var rUrl = data.articles[i].url;
                    var rImg = data.articles[i].urlToImage;
                    var rDate = data.articles[i].publishedAt;

                    $("#articles").append(

                    "<style>"

                  + ".flip-card {background-color: white; width: 300px;height: 350px; perspective: 1000px; float:left; padding: 14px;}"
                  + ".flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;}"
                  + ".flip-card:hover .flip-card-inner {transform: rotateY(180deg);}"
                  + ".flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;  border-radius:5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center;}"
                  + ".flip-card-front {background: rgb(217, 155, 53); background: rgba(217, 155, 53, 1); color: black;z-index: 2;}"
                  + ".flip-card-front-header {overflow-x: visible;}"
                  + ".flip-card-front-body {text-align: center;}"
                  + ".flip-card-front-footer {overflow-x: visible; text-align: center;}"
                  + ".flip-card-front-title {overflow-x: visible; text-align: center; padding-top:8px;}"
                  + ".flip-card-front {background: rgb(217, 155, 53); background: rgba(217, 155, 53, 1); color: black;z-index: 2;}"
                  + ".flip-card-author-front {color: black; padding: 8px;}"
                  + ".flip-card-author-back {color: black; padding: 8px;}"
                  + ".flip-card-content-back {color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); padding: 8px;}"
                  + ".flip-card-content-back-description {color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); padding: 8px; text-align:center;}"
                  + ".flip-card-back {background: black; color: rgb(217, 155, 53); color: rgba(217, 155, 53, 1); transform: rotateY(180deg);z-index: 1;}"

                  +  "</style>"

              + "<a href='"+ rUrl +"'>"
                  + "<div class='flip-card'>"
                     + "<div class='flip-card-inner'>"
                        + "<div class='flip-card-front'>"
                           +"<div class='flip-card-front-header'>"
                              +"<h2 class='flip-card-author-front'>" + rAuthor + "</h2>"
                           +"</div>"
                           +"<div class='flip-card-front-body'>"
                              + "<img src='"+ rImg +"' alt='Image' style='height:150px; width:270px; max-height:150px; max-width: 270px; overflow: hidden; bottom:0px;'>"
                           +"</div>"
                           +"<div class='flip-card-front-footer'>"
                              +  "<h4 class='flip-card-front-title'>" + rTitle + "</h4>"
                           +"</div>"
                        + "</div>"
                        + "<div class='flip-card-back'>"
                              +  "<h2>" + rAuthor + "</h2>"
                              +  "<p class='flip-card-content-back'><small>Date :" + rDate + "</small></p>"
                              +  "<p class='flip-card-content-back-description'>" + rDes + "</p>"
                              +  "<p class='flip-card-content-back'>(Article Sample)</p>"
                        + "</div>"
                     + "</div>"
                  + "</div> "
              + "</a>"

                    );
                }
                console.log(data);
            }
        })
});

HTML-код выглядит следующим образом (index.php)

 <div class="scrollfeed" style="height:455px;">
    <div class="responsive">
       <script src="js/ajax_googlenews.js"></script>
       <div id="articles"></div>
    </div>
 </div>