From ba4521554327afee2c4f660ef8ee83e4abaf03c9 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Tue, 9 Nov 2021 13:00:08 +0100
Subject: [PATCH] cleaner solution for creating blog posts
---
js/customElements/blogIndex.js | 35 ++++++++++++++++++++++++----------
1 file changed, 25 insertions(+), 10 deletions(-)
diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
index d6f11a7..665cb34 100644
--- a/js/customElements/blogIndex.js
+++ b/js/customElements/blogIndex.js
@@ -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);
\ No newline at end of file
+customElements.define("jl-blog_index", BlogIndex);
--
GitLab