How to make an API connection to my Javascript project?

1

Hi guys,

I have a Javascript news feed that automatically scrolls. I want to know if this is possible to connect this with Google Calendar via its API key so that the Google events can show up on the Javascript news feed?

Here’s the code for your reference, and you can test-run it.

Thanks for your help.


<!DOCTYPE html>
<html>
<head>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="/resources/msite/css/style.css" rel="stylesheet">
    
<script type="text/javascript" src="https://rawcdn.githack.com/vaakash/jquery-easy-ticker/23d091886c2536ff7d158149d3e6d815ce2c9923/dist/jquery.easy-ticker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

</head>
<body>

    <h3>Demo 1 - Direction: Up</h3>
    
    <!------------------------------- DEMO 1 --------------------------->
    
    <div class="demo4 demof">
        <ul>
            <li><img src="images/img1.jpg" alt="Sample image" /><a href="#">The world of Gilbert and George</a><p>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</p></li>
            
            <li class="odd"><img src="images/img2.jpg" alt="Sample image" /><a href="#">From propaganda to pop artist</a><p>Song Byeok had every reason to be pleased with his success. A gift for drawing led to a prestigious career as a propaganda artist and full membership in North Korea's communist party.</p></li>
            
            <li><img src="images/img3.jpg" alt="Sample image" /><a href="#">Japan's inspirational footballer</a><p>CNN's Kyung Lah sits down with Japan's World Cup-winning captain to reflect on their win amid tragedy.</p></li>
            
        </ul>
    </div>
    
    
<style>

.demof{
    border: 1px solid #ccc;
    margin: 25px 0;
}
.demof ul{
    padding: 0;
    list-style: none;
}
.demof li{
    padding: 20px;
    border-bottom: 1px dashed #ccc;
}
.demof li.odd{
    background: #fafafa;
}
.demof li:after {
    content: '';
    display: block;
    clear: both;
}
.demof img{
    float: left;
    width: 100px;
    margin: 5px 15px 0 0;
}
.demof a{
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #06f;
}
.demof p {
    margin: 15px 0 0;
    font-size: 14px;
}

.demo3 {
    font-family: Arial, sans-serif;
    border: 1px solid #C20;
    margin: 50px 0;
    font-style: italic;
    position: relative;
    padding: 0 0 0 80px;
    box-shadow: 0 2px 5px -3px #000;
    border-radius: 3px;
}
.demo3:before {
    content: "Latest News";
    display: inline-block;
    font-style: normal;
    background: #C20;
    padding: 10px;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}
.demo3:after {
    content: '';
    display: block;
    top: 0;
    left: 80px;
    background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
    height: 20px;
}
.demo3 ul li {
    list-style: none;
    padding: 10px 0;
}


.demo4{
    border: 2px solid #cecece;
    margin-top: 10px;
    border-radius: 6px;
}

.demo5{
    border: 2px solid #FF3333;
    margin-top: 10px;
    border-radius: 10px;
    width: 500px;
    -webkit-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
}
.demo5 ul{
    padding: 0;
}
.demo5 ul li{
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #FF3333;
    border-radius: 10px;
    list-type: none;
    margin: 0;
}
.et-run{
    background-color: #0cf;
    color: white;
    border: 1px solid black;
}
</style>

<script>
$(function(){
    $('.demo1').easyTicker({
        direction: 'up'
    });
    
    
    $('.demo2').easyTicker({
        direction: 'down',
    });
    
    $('.demo3').easyTicker({
        visible: 1,
        interval: 4000
    });
    
    $('.demo4').easyTicker({
        direction: 'up',
        interval: 2500
    });
    
    $('.demo5').easyTicker({
        direction: 'up',
        visible: 3,
        easing: 'easeInBack',
        controls: {
            up: '.btnUp',
            down: '.btnDown',
            toggle: '.btnToggle'
        }
    });
});
</script>


</body>
</html>
2

Have you looked into using Promises?

fetch('your-api-link-here')
      .then(response => response.json())
      .then(json => {
        // whatever you want to do with the returned data here
      })