website/js/customElements/commentsDisplay.js

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

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let comments = JSON.parse(xhr.responseText);
                    comments.forEach((element) => {
                        const h3 = document.createElement("h3");
                        h3.classList.add("commentTitle");
                        h3.innerText = element["name"];
                        this.appendChild(h3);

                        const commentDiv = document.createElement("div");
                        commentDiv.classList.add("comment");
                        this.appendChild(commentDiv);

                        const image = document.createElement("img");
                        image.src = element["gravatarURL"];
                        commentDiv.appendChild(image);

                        const article = document.createElement("article");
                        article.classList.add("commentArticle");
                        commentDiv.appendChild(article);

                        const commentText = document.createElement("p");
                        commentText.classList.add("commentText");
                        commentText.innerText = element["comment"];
                        article.appendChild(commentText);

                    });
                } 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);