website/js/customElements/blogIndex.js
2021-11-09 12:44:09 +00:00

49 lines
2 KiB
JavaScript

class BlogIndex extends HTMLElement {
constructor() {
super();
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let blog = JSON.parse(xhr.responseText);
blog.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);
});
} 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/getBlogElements.php?position=index");
xhr.send();
}
}
customElements.define("jl-blog_index", BlogIndex);