JSFiddle - React, Tailwind, and code Playground

by brigand

JavaScript

Promise
    .all(promises)
    .then(function(response) {
        let htmlPromises = [];
        for (let i = response.length - 1; i >= 0; i--) {
            htmlPromises.push(response[i].text());
        }
        return Promise.all(htmlPromises);
    })
    .then(function(html) {
        for (let i = html.length - 1; i >= 0; i--) {
            const parser = new DOMParser();
            const doc    = parser.parseFromString(html[i], "text/html"); 
            let newEle   = doc.querySelector("body").firstChild;
            
            // modify h2 element and maybe remove it
            const h2 = newEle.querySelector('h2');
            if(title === false) {
                if (h2 !== null)
                    h2.parentNode.removeChild(h2);
            } else {
                const id = newEle.querySelector('div[data-function]').id.split('_');
                h2.innerText = `q${id[1]}-${id[2]}-${id[3]} - ${h2.innerText.trim()}`;
            }
            
            // append to DOM
            document.querySelector('.drawn').appendChild(newEle);
        }
        
        // find all charts and load its data
        let els = document.getElementsByClassName("chart");
        let chart_function;
        [].forEach.call(els, function (el) {
            chart_function = new Function(el.getAttribute("data-function"));
            chart_function();
        });
        
        // un-collapse charts
        els = document.querySelectorAll("[id^=collapse_container_]");
        [].forEach.call(els, function (el) {
            el.classList.add("show");
        });
        
        // remove event listener on scroll
        window.onscroll = function() {};
    })
    .catch(function(err) {
        console.log("error: " + error);
    });