website/js/customElements/blogFooter.js

class blogFooter extends HTMLElement {
    constructor(){
        super();
        this.getBlogEntries();
    }

    async getBlogEntries() {
        let ul = document.createElement("ul");
        this.appendChild(ul);
        var graphql = JSON.stringify({
            query: 'query($count: Int!) { blogPosts(count: $count) { title id }}',
            variables: {
                "count": 5
            }
            })
            var requestOptions = {
            method: 'POST',
            body: graphql,
            };
            let posts = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.blogPosts;
            posts.forEach((element) => {
                let li = document.createElement("li");
                let a = document.createElement("a");
                a.href = "/post.html?id=" + element["id"];
                a.innerText = element["title"];
                li.appendChild(a);
                ul.appendChild(li);
            });
    }
}

customElements.define("jl-footer_blog", blogFooter);