Preise

async function loadCalculatorFromAPI() { try { // Fetch the HTML content from the API const response = await fetch("https://api.gtltrophycalc.dk/CalculatorPage"); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } // Get the HTML text const htmlText = await response.text(); // Find the container to insert the content const container = document.getElementById("calculatordiv"); if (!container) { throw new Error(`Container with ID "${containerId}" not found.`); } // Create a temporary element to parse and load the content const tempDiv = document.createElement("div"); tempDiv.innerHTML = htmlText; // Collect all style and script load promises const loadPromises = []; // Extract and append styles const styles = tempDiv.querySelectorAll("style, link[rel='stylesheet']"); styles.forEach(style => { if (style.tagName.toLowerCase() === "link") { const newLink = document.createElement("link"); newLink.rel = "stylesheet"; newLink.href = style.href; document.head.appendChild(newLink); // Track when the stylesheet is loaded loadPromises.push( new Promise(resolve => { newLink.onload = resolve; newLink.onerror = resolve; // Resolve even on error to avoid blocking }) ); } else { document.head.appendChild(style.cloneNode(true)); } }); // Extract and append scripts const scripts = tempDiv.querySelectorAll("script"); scripts.forEach(script => { const newScript = document.createElement("script"); if (script.src) { newScript.src = script.src; newScript.async = false; // Preserve execution order document.body.appendChild(newScript); // Track when the script is loaded loadPromises.push( new Promise(resolve => { newScript.onload = resolve; newScript.onerror = resolve; // Resolve even on error to avoid blocking }) ); } else { newScript.textContent = script.textContent; document.body.appendChild(newScript); } }); // Append the remaining content to the container container.innerHTML = tempDiv.innerHTML; // Wait for all styles and scripts to finish loading await Promise.all(loadPromises); // Call the onComplete callback if provided startCalculator(); } catch (error) { console.error("Error loading HTML from API:", error); } } loadCalculatorFromAPI();