added main.ts, and recent loading for Articles - early state

2022-02-02 20:48:36 +01:00
parent 026bf1c3bc
commit df4f4da3d3
5 changed files with 112 additions and 3 deletions
--- a/js/main.js
+++ b/js/main.js
@@ -0,0 +1,43 @@
+let articleParent = document.getElementById("articles");
+window.onload = function () {
+    recent(5).then(function (data) {
+        data.forEach(function (article) {
+            let articleA = document.createElement("a");
+            articleA.setAttribute("href", article.link);
+            let articleDiv = document.createElement("div");
+            articleDiv.setAttribute("class", "article");
+            let articleHeader = document.createElement("div");
+            articleHeader.setAttribute("class", "article-header");
+            let articleHeaderTitle = document.createElement("h3");
+            articleHeaderTitle.innerHTML = article.title;
+            articleHeader.appendChild(articleHeaderTitle);
+            articleDiv.appendChild(articleHeader);
+            let articleDescription = document.createElement("div");
+            articleDescription.setAttribute("class", "article-description");
+            let articleDescriptionP = document.createElement("p");
+            let articleDescriptionTopics = document.createElement("i");
+            articleDescriptionTopics.innerHTML = article.tags.join(", ");
+            let articleDescriptionAuthors = document.createElement("i");
+            articleDescriptionAuthors.innerHTML = article.authors[0].name;
+            let articleDescriptionDate = document.createElement("i");
+            articleDescriptionDate.innerHTML = article.modified.toString();
+            articleDescriptionP.appendChild(articleDescriptionTopics);
+            articleDescriptionP.appendChild(articleDescriptionAuthors);
+            articleDescriptionP.appendChild(articleDescriptionDate);
+            articleDescription.appendChild(articleDescriptionP);
+            articleDiv.appendChild(articleDescription);
+            let articleBody = document.createElement("div");
+            articleBody.setAttribute("class", "article-body");
+            let articleBodyP = document.createElement("p");
+            articleBodyP.innerHTML = article.summary;
+            articleBody.appendChild(articleBodyP);
+            articleDiv.appendChild(articleBody);
+            articleA.appendChild(articleDiv);
+            articleParent.appendChild(articleA);
+            let divider = document.createElement("div");
+            divider.setAttribute("class", "divider");
+            articleParent.appendChild(divider);
+        });
+    });
+};
+//# sourceMappingURL=main.js.map