website/js/customElements/blogIndex.js

50 lines
1.6 KiB
JavaScript
Raw Normal View History

2021-04-12 19:45:30 +02:00
class BlogIndex extends HTMLElement {
constructor() {
super();
this.getBlogPosts();
}
async getBlogPosts() {
var graphql = JSON.stringify({
query: 'query($count: Int! $contentLength: Int!) { blogPosts(count: $count contentLength: $contentLength) { content title id }}',
variables: {
"count": 3,
"contentLength": 300
2021-04-12 19:45:30 +02:00
}
})
var requestOptions = {
method: 'POST',
body: graphql,
};
let posts = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.blogPosts;
posts.forEach((element) => {
const article = document.createElement("article");
article.classList.add("breakWord");
this.appendChild(article);
const h2 = document.createElement("h2");
h2.innerText = element["title"];
article.appendChild(h2);
const content = document.createElement("p");
content.classList.add("breakWord");
content.innerHTML = element["content"];
article.appendChild(content);
const moreP = document.createElement("p");
moreP.classList.add("center");
article.appendChild(moreP);
const moreLink = document.createElement("a");
moreLink.href = "/post.html?id=" + element["id"];
moreP.appendChild(moreLink);
const moreButton = document.createElement("button");
moreButton.innerText = "Mehr lesen";
moreLink.appendChild(moreButton);
});
2021-04-12 19:45:30 +02:00
}
}
customElements.define("jl-blog_index", BlogIndex);