A few days ago I ran into a situation where I needed to update certain data based on the output of an API. It was a simple counter based on the data coming from an API which is a kind of timeout on a Line. So… I tried a lot of things with bubble and nothing worked, so I decided to try something with bubble and came up with this solution:
An HTML that loads a script and the scripts update the text every x seconds. It is really simple and works like this:
If you want to take a look or something, you can see it here:
This is the code I’m using:
<h2 class="bubble-element Text baTaRsaT" id="waiting-text" style="align-self: center; min-width: 0%; order: 8; min-height: 55px; height: max-content; flex-grow: 0; flex-shrink: 0; width: auto; margin: 0px 0px 10px; z-index: 5; white-space: pre-wrap; overflow: visible; font-family: var(--font_default); font-size: 18px; font-weight: 500; color: var(--color_text_default); text-align: center; line-height: 1.5; border-radius: 0px; opacity: 1;">Texto</h2>
<script>
function updateCurrentDateAndWaitingTime() {
fetch('https://api.chucknorris.io/jokes/random')
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch current date');
}
return response.json();
})
.then(data => {
var waitingTextElement = document.getElementById('waiting-text');
var image = document.getElementById('image');
console.log(image)
// Extract the number of minutes from the content
var content = waitingTextElement.textContent;
var newContent =data.value;
// Update the content of the h2 element
waitingTextElement.innerHTML = newContent;
})
.catch(error => {
console.error('Error fetching current date:', error);
});
};
// Call the function initially to fetch and display the current date and waiting time
updateCurrentDateAndWaitingTime();
// Update the current date and waiting time every second
setInterval(updateCurrentDateAndWaitingTime, 1000);
</script>
If I’m not doing something right or you think I’m doing something bad, let me know
But if didn’t find any information about something like this when I was looking so I hope this works for someone.