fetch(macroURL)
    .then(response => {
        return response.json();
    })
    .then(data => {
        let totalPosts = 0;
        const entriesDiv = document.getElementById("data");
        
        data.forEach(entry => {
            const entryDiv = document.createElement("div");
            entryDiv.className = "post";
            const dateTime = new Date(entry.datetime);

            let mins = dateTime.getMinutes();
            if (mins < 10) {
                mins = `0${mins}`;
            }

            const username = document.createElement("strong");
            const messg = document.createElement("p");
            const date = document.createElement("sub");

            username.innerText = entry.name;
            messg.innerText = entry.message;
            date.innerText = `${dateTime.toDateString()} @ ${dateTime.getHours()}:${mins}`

            let htmlContent = messg.innerHTML;

            htmlContent = htmlContent.replace(/&lt;(\/?(?:h1|h2|b|i|red|orange|yellow|green|blue|purple|rainbow))&gt;/g, (match, p1) => {return `<${p1}>`;});

            htmlContent = htmlContent.replace(/:fish:|:axo:|:axcket:|:approve:|:enby:|:woah:/g, matched => emoji[matched]);

            messg.innerHTML = htmlContent;
            
            entryDiv.appendChild(username);
            entryDiv.appendChild(messg);
            entryDiv.appendChild(date);

            entriesDiv.appendChild(entryDiv);

            totalPosts ++;
        });

        document.getElementById('loading').innerText = `Total posts: ${totalPosts}`;
    })
    .catch( err => {
        console.error('Error: ', err);
    });