diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..3a3aae8
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,14 @@
+
+
+
Make a comment
+
+
+
+
+
diff --git a/demo/soudan.js b/demo/soudan.js
new file mode 100644
index 0000000..d7bf2cc
--- /dev/null
+++ b/demo/soudan.js
@@ -0,0 +1,41 @@
+const form = document.getElementById("commentForm");
+const commentContainer = document.getElementById("comments");
+const commentContainerHeader = document.getElementById("commentsHeader");
+form.addEventListener("submit", e => {
+ let data = {};
+ new FormData(form).forEach((value, key) => {
+ data[key] = value === "" ? null : value;
+ });
+ var request = new XMLHttpRequest();
+ request.open("POST", "http:/127.0.0.1:8080");
+ request.send(JSON.stringify(data));
+ request.addEventListener("load", () => {
+ form.querySelector("textarea").value = "";
+ reloadComments()
+ });
+ request.addEventListener("error", () => alert("Comment posting failed!"));
+ e.preventDefault();
+});
+
+function reloadComments() {
+ fetch("http://127.0.0.1:8080")
+ .then(response => {
+ return response.json().then(json => {
+ return response.ok ? json : Promise.reject(json);
+ });
+ })
+ .then(comments => {
+ commentContainerHeader.innerHTML = `${comments.length} Comment${comments.length == 1 ? "" : "s"}`;
+ let html = "";
+ if (comments.length == 0) {
+ html = "No comments yet! Be the first to make one.
";
+ } else {
+ comments.forEach(comment => {
+ html += `${comment.author ? comment.author : "Anonymous"} commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:
${comment.text}
`;
+ });
+ }
+ commentContainer.innerHTML = html;
+ });
+}
+
+reloadComments();
diff --git a/demo/style.css b/demo/style.css
new file mode 100644
index 0000000..c248493
--- /dev/null
+++ b/demo/style.css
@@ -0,0 +1,10 @@
+#comments > div {
+ display: flex;
+ gap: 0.5em;
+}
+#comments .avatar {
+ border-radius: 100%;
+ width: 80px;
+ height: 80px;
+ background-color: gray;
+}