KRON4 Table 4 All telethon: Live updates

/* Custom font for the widget */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap’);
.font-inter {
font-family: ‘Inter’, sans-serif;
}

// Configuration
const API_URL = ‘https://api.sboc.us/nexstar-kron-total’;
const displayElement = document.getElementById(‘donation-display’);
const statusElement = document.getElementById(‘status-message’);

// FIXED: Using arrays of class names instead of strings for DOMTokenList operations
// Updated: New color scheme for success state
const SUCCESS_CLASSES = [‘bg-[#E53927]’, ‘text-white’];
const ERROR_CLASSES = [‘bg-red-700’, ‘text-white’];

/**
* Fetches the XML data, parses it, and updates the display.
*/
async function fetchDonationTotal() {
// Apply loading state
displayElement.classList.add(‘animate-pulse’);
displayElement.textContent=”Loading…”;
// Remove error classes and apply success/loading classes
displayElement.classList.remove(…ERROR_CLASSES);
displayElement.classList.add(…SUCCESS_CLASSES);

try {
const response = await fetch(API_URL);

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, “text/xml”);

const totalNode = xmlDoc.getElementsByTagName(‘total’)[0];
let donationTotal = 0;

if (totalNode && totalNode.textContent) {
donationTotal = parseFloat(totalNode.textContent);
} else {
throw new Error(“Could not find a ‘total’ element in the XML response.”);
}

// Format the number as US Currency (whole dollars only)
const formattedTotal = new Intl.NumberFormat(‘en-US’, {
style: ‘currency’,
currency: ‘USD’,
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(donationTotal);

// Update the DOM for success
displayElement.textContent = formattedTotal;
statusElement.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;

// Ensure success colors
displayElement.classList.remove(…ERROR_CLASSES);
displayElement.classList.add(…SUCCESS_CLASSES);

} catch (error) {
console.error(“Error fetching donation total:”, error);

// Set error message
displayElement.textContent=”Data Error”;
statusElement.textContent=”Could not load total.”;

// Apply error colors
displayElement.classList.remove(…SUCCESS_CLASSES);
displayElement.classList.add(…ERROR_CLASSES);
} finally {
// Remove loading animation
displayElement.classList.remove(‘animate-pulse’);
}
}

// Run immediately and then every 30 seconds to keep the data fresh
fetchDonationTotal();
setInterval(fetchDonationTotal, 30000); // Update every 30 seconds