jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

cleaner solution for creating blog posts

Browse source
This commit is contained in:
Jonas Leder 2021-11-09 13:00:08 +01:00
parent 71aea24d02
commit ba45215543
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
js/customElements/blogIndex.js
View file

@ -2,21 +2,36 @@ class BlogIndex extends HTMLElement {
constructor() {
super();
let xhr = new XMLHttpRequest();
let ul = document.createElement("ul");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let blog = JSON.parse(xhr.responseText);
blog.forEach((element) => {
this.innerHTML += `
<article class="breakWord">
<h2>${element["title"]}</h2>
<p breakWord>${element["content"]}</p>
<p class="center"><a href="/post.html?id=${element["id"]}"><button>Mehr lesen</button></a></p>
</article>
`;
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.appendChild("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);
});
this.appendChild(ul);
} else {
let p = document.createElement("p");
@ -31,4 +46,4 @@ class BlogIndex extends HTMLElement {
}
}
customElements.define("jl-blog_index", BlogIndex);
customElements.define("jl-blog_index", BlogIndex);