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 && 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>
                    `;
                });
            }
        }
        xhr.open("GET", "/API/projectComments.php?article=" + pageName);
        xhr.send();
    }
}

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