function fetchData() {
            const apiUrl = "https://api.example.com/data";
            return fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    processData(data);
                })
                .catch(error => {
                    handleError(error);
                });
        }
        
        function processData(data) {
            const formattedData = data.map(item => ({
                id: item.id,
                name: item.name.toUpperCase(),
                status: item.active ? "Active" : "Inactive"
            }));
            renderUI(formattedData);
        }
        
        function handleError(error) {
            console.error("Error fetching data:", error);
        }
        
        function renderUI(data) {
            const container = document.getElementById("data-container");
            container.innerHTML = "";
            data.forEach(item => {
                const div = document.createElement("div");
                div.classList.add("data-item");
                div.textContent = `${item.id}: ${item.name} - ${item.status}`;
                container.appendChild(div);
            });
        }
        
        setInterval(fetchData, 5000); // Auto-fetch every 5s
        
        class APIClient {
            constructor(baseUrl) {
                this.baseUrl = baseUrl;
            }
        
            async get(endpoint) {
                try {
                    const response = await fetch(this.baseUrl + endpoint);
                    return await response.json();
                } catch (error) {
                    console.error(error);
                }
            }
        }