website/js/customElements/commentsDisplay.js

class commentsDisplay extends HTMLElement {
    constructor() {
        super();
        let path = window.location.pathname;
        let pageName = path.split("/").pop();
        pageName = pageName.split(".")[0]

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let comments = JSON.parse(xhr.responseText);
                    comments.forEach((element) => {
                        this.innerHTML += `
                        <h3 class="commentTitle">${element["name"]}</h3>
                        <div class="comment">
                            <img src="${element["gravatarURL"]}">
                            <article class="commentArticle">
                                <p class="commentText">${element["comment"]}</p>
                            </article>
                        </div>
                    `;
                    });
                } else {
                    let p = document.createElement("p");
                    p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück";
                    this.appendChild(p);

                }
            }
        }
        xhr.open("GET", "/API/projectComments.php?article=" + pageName);
        xhr.send();
    }
}

customElements.define("jl-comments_display", commentsDisplay);