I have a custom news api which I own and I want to have a ticker on my site that will display the headlines from this API. I have absolutely no idea where to start so any help would be greatly appreciated.

The API is here - https://script.googleusercontent.com/macros/echo?user_content_key=KvzaGPMZrJGUEWaEDrntwDsJB4ebk6cMKYQanyYZfDZYTacpxJM1uqcFLZlt7gRijBZ3J7FHj19AO45LNHwc-5mGOgupfNium5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnHo4zSljUNFhSoLskb1EQanQchoZ0NK0UbXpeUuc4BiuTzRrejx-uuzJ3Cy4pYPEhqLnfkWl2vSqJU1x8zviIhBUyyBe7Vdo1A&lib=MiQfzcgZEeK-gt9DdQ9yMvEauh1FhrIJO

Does anyone have a relatively simple solution? I am currently using the below ticker (but updating it manually) and I really want an automated solution?

style.css:

.slideText {
display: block;
width: 500px;
height: 30px;
background: red;
color: #fff;
overflow: hidden;
}
.slidingtext {
padding: 5px;
  animation-name: example;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  transition: all 300ms ease;
}

@keyframes example {
  from {transform: matrix(1, 0, 0, 1, 500, 5)}
  to {transform: matrix(1, 0, 0, 1, -344, 5)}
}

and then the html file:

<div >
<div >Lorem ipsum dolor sit amet.</div>
</div>

I really have no idea how to integrate the two...

CodePudding user response：

I think you are looking for fetch in JS to get your info.

Here's a simple snippet which gets info from your API and console logs all the headlines that it finds. You can instead of course use that text to populate your ticker and perhaps set a timeout to call for an update every so often.

const url =
  `https://script.googleusercontent.com/macros/echo?user_content_key=-WAEswRhz-A0GFJ7kVMHCtmEgGi3q5az_Vgw-M8X1TvM8Jer2UKhnDLhmiDCtGSKYwduFtp29EKPSP2NctqT6tB5DiSoHoStm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnHo4zSljUNFhSoLskb1EQanQchoZ0NK0UbXpeUuc4BiuTzRrejx-uuzJ3Cy4pYPEhqLnfkWl2vSqJU1x8zviIhBUyyBe7Vdo1A&lib=MiQfzcgZEeK-gt9DdQ9yMvEauh1FhrIJO`;

fetch(url).then((response) => {
  return response.json(); // convert to json
}).then(info => {
  const data = info.data;
  for (let i = 0; i < data.length; i  ) {
    console.log(data[i].headline);
  }
})

CodePudding user response：

I think the timing of the animation is a bit off but combining your code with this answer above (by @A Haworth) should get you close to what you are looking for.

see code below

$(function() {
  const url =
    `https://script.googleusercontent.com/macros/echo?user_content_key=-WAEswRhz-A0GFJ7kVMHCtmEgGi3q5az_Vgw-M8X1TvM8Jer2UKhnDLhmiDCtGSKYwduFtp29EKPSP2NctqT6tB5DiSoHoStm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnHo4zSljUNFhSoLskb1EQanQchoZ0NK0UbXpeUuc4BiuTzRrejx-uuzJ3Cy4pYPEhqLnfkWl2vSqJU1x8zviIhBUyyBe7Vdo1A&lib=MiQfzcgZEeK-gt9DdQ9yMvEauh1FhrIJO`;

  fetch(url).then((response) => {
    return response.json(); // convert to json
  }).then(info => {
    const data = info.data;
    var idx = 0;

    const interval = setInterval(function() {
      $("#headline").html(data[idx].headline);
      
      console.log(data[idx].headline);  
      idx  ;

      if (idx >= data.length) {
        idx = 0;
      }
    }, 8000);

    /*
    for (let i = 0; i < data.length; i  ) {
      console.log(data[i].headline);  
    }
    */
  });
});

.slideText {
  display: block;
  width: 500px;
  height: 30px;
  background: red;
  color: #fff;
  overflow: hidden;
}

.slidingtext {
  padding: 5px;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  transition: all 300ms ease;
}

@keyframes example {
  from {
    transform: matrix(1, 0, 0, 1, 500, 5)
  }
  to {
    transform: matrix(1, 0, 0, 1, -344, 5)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="headline" >Lorem ipsum dolor sit amet.</div>
</div>