incorporating a personalized API feed into a news ticker

Question

incorporating a personalized API feed into a news ticker

Looking for help with setting up a ticker on my website to display headlines from my custom news API. I'm a bit lost on where to start, so any guidance would be appreciated.

Here's the API link - API Link

Is there a simple solution for this? Currently, I'm using a manual ticker and would prefer an automated one.

Here's the CSS code:

.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 here's the HTML code:

<div class="slideText">
<div class="slidingtext">Lorem ipsum dolor sit amet.</div>
</div>

Any ideas on how to integrate the CSS and HTML for the ticker?

html css api ticker

Answer 1

Answer №1

It seems like the solution you need is to utilize fetch in JavaScript to retrieve the information you are seeking.

Below is a basic code snippet that demonstrates how to fetch data from an API and display all the headlines in the console. You can modify this code to populate your ticker with the retrieved information and even schedule periodic updates.

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(); // converting to JSON
}).then(info => {
  const data = info.data;
  for (let i = 0; i < data.length; i++) {
    console.log(data[i].headline);
  }
})

Answer 2

It seems like the solution you need is to utilize fetch in JavaScript to retrieve the information you are seeking.

Below is a basic code snippet that demonstrates how to fetch data from an API and display all the headlines in the console. You can modify this code to populate your ticker with the retrieved information and even schedule periodic updates.

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(); // converting to JSON
}).then(info => {
  const data = info.data;
  for (let i = 0; i < data.length; i++) {
    console.log(data[i].headline);
  }
})

Answer 3

Answer №2

It seems like the timing of the animation could use some adjustment, but if you incorporate your code with this provided solution (credited to @A Haworth), you may get closer to your desired outcome.

Check out the code snippet 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 class="slideText">
  <div id="headline" class="slidingtext">Lorem ipsum dolor sit amet.</div>
</div>

Answer 4

It seems like the timing of the animation could use some adjustment, but if you incorporate your code with this provided solution (credited to @A Haworth), you may get closer to your desired outcome.

Check out the code snippet 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 class="slideText">
  <div id="headline" class="slidingtext">Lorem ipsum dolor sit amet.</div>
</div>

incorporating a personalized API feed into a news ticker

Answer №1

Answer №2

Similar questions

Is there a way for me to remove an uploaded image from the system

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

Challenges arise when creating a complementary php script for a natural language form

The stickiness of elements causes scrollbars to disappear in Chrome 77 on OSX

How can I show a tooltip when hovering over a tab using uib-tab?

What is the best way to create pages that showcase 10 posts each?

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

if the input field is empty, eliminate the class

Dynamic Dropdown Validation During Form Submission

Activating the submit button only following confirmation that the image dimensions have been verified

How can I achieve a floating effect for a div element that is contained within another element?

There seems to be an issue with configuring placeholders in Tailwind CSS

Struggling to Fetch Data from REST API with ng-repeat in Angular JS

Would you like to store modified CSS properties in a cookie?

Extract the text content from an HTML file while ignoring the tags to get the substring

Developing web applications using a combination of PHP, MySQL, and

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Transform object into JSON format

What is the process for including a new column in a table created using the FixedTable jQuery plugin?

VueJS component fails to remain anchored at the bottom of the page while scrolling