From b4fd0ab2495368ce7e080ae4bb6b011b8e142ba9 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 19 May 2024 16:30:58 +0800
Subject: [PATCH] Add functions to render guestbook messages

---
 _site/assets/js/guestbook.js | 40 +++++++++++++++++++++++++++++++++---
 _site/feed.xml               |  2 +-
 _site/guestbook/index.html   | 22 +++++++++++++++++++-
 src/assets/js/guestbook.js   | 39 +++++++++++++++++++++++++++++++++--
 src/pages/guestbook.njk      | 22 +++++++++++++++++++-
 5 files changed, 117 insertions(+), 8 deletions(-)

diff --git a/_site/assets/js/guestbook.js b/_site/assets/js/guestbook.js
index 0da2d565..12b9202a 100644
--- a/_site/assets/js/guestbook.js
+++ b/_site/assets/js/guestbook.js
@@ -24,23 +24,34 @@ let messageObj = {
     email: '',
     website: '',
     message: '',
-    timestamp: '',
+    timestamp: {},
     replies: [],
 };
 
 // Form submission event
 formEl.addEventListener('submit', (e) => {
     e.preventDefault();
-    clearInputEl();
     addMessage();
+    clearInputEl();
 });
 
+const formatDate = () => {
+    const formatter = new Intl.DateTimeFormat("en-GB", {
+        dateStyle: "full",
+        timeStyle: "full",
+    });
+    const now = new Date();
+    const formattedDate = formatter.format(now);
+    return formattedDate;
+};
+
 const addMessage = () => {
     messageObj = {
         ...messageObj,
         name: nameInputEl.value,
         email: emailInputEl.value,
         website: websiteInputEl.value,
+        timestamp: formatDate(),
         message: msgInputEl.value
     }
     push(guestbookInDB, messageObj);
@@ -67,7 +78,6 @@ onValue(guestbookInDB, (snapshot) => {
     } else {
         messageListEl.textContent = 'No messages here... yet. Be the first!';
     }
-
 });
 
 // Prevent rendering any message more than once
@@ -79,4 +89,28 @@ const clearMessageListEl = () => {
 const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
+
+    const newMessageDiv = document.createElement('div');
+    newMessageDiv.classList.add('gb__message');
+
+    const newMessageName = document.createElement('p');
+    newMessageName.classList.add('gb__message--name');
+    newMessageName.textContent = `${itemValue.name} said:`;
+
+    if (itemValue.website !== null && itemValue.website !== '') {
+        newMessageName.innerHTML = `
+            <a href="${itemValue.website}">${itemValue.name}</a> said:
+        `;
+    }
+
+    const newMessageMsg = document.createElement('p');
+    newMessageMsg.classList.add('gb__message--msg');
+    newMessageMsg.textContent = itemValue.message;
+
+    const newMessageTime = document.createElement('time');
+    newMessageTime.classList.add('gb__message--time');
+    newMessageTime.textContent = itemValue.timestamp;
+
+    messageListEl.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
 };
\ No newline at end of file
diff --git a/_site/feed.xml b/_site/feed.xml
index cc108a4a..e7faca3c 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-05-19T06:46:51Z</updated>
+    <updated>2024-05-19T08:29:29Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html
index 7893b3ff..2a97d59c 100644
--- a/_site/guestbook/index.html
+++ b/_site/guestbook/index.html
@@ -409,7 +409,9 @@
 
 <style>
     .gb__form,
-    .gb__form--input {
+    .gb__form--input,
+    .gb__message--list,
+    .gb__message {
         display: grid;
     }
 
@@ -443,6 +445,24 @@
     .gb__form--input textarea:focus {
          outline: 0.15em solid var(--clr-link);
     }
+
+    .gb__message--list {
+        gap: 1em;
+    }
+
+    .gb__message {
+        gap: 0.5em;
+        padding: 1em 1.4em 1.4em;
+        background-color: var(--clr-quote-bg);
+    }
+
+    .gb__message--name {
+        font-size: 1.4rem;
+    }
+
+    .gb__message--time {
+        font-size: 1rem;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>
diff --git a/src/assets/js/guestbook.js b/src/assets/js/guestbook.js
index 10cde802..12b9202a 100644
--- a/src/assets/js/guestbook.js
+++ b/src/assets/js/guestbook.js
@@ -24,23 +24,34 @@ let messageObj = {
     email: '',
     website: '',
     message: '',
-    timestamp: '',
+    timestamp: {},
     replies: [],
 };
 
 // Form submission event
 formEl.addEventListener('submit', (e) => {
     e.preventDefault();
-    clearInputEl();
     addMessage();
+    clearInputEl();
 });
 
+const formatDate = () => {
+    const formatter = new Intl.DateTimeFormat("en-GB", {
+        dateStyle: "full",
+        timeStyle: "full",
+    });
+    const now = new Date();
+    const formattedDate = formatter.format(now);
+    return formattedDate;
+};
+
 const addMessage = () => {
     messageObj = {
         ...messageObj,
         name: nameInputEl.value,
         email: emailInputEl.value,
         website: websiteInputEl.value,
+        timestamp: formatDate(),
         message: msgInputEl.value
     }
     push(guestbookInDB, messageObj);
@@ -78,4 +89,28 @@ const clearMessageListEl = () => {
 const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
+
+    const newMessageDiv = document.createElement('div');
+    newMessageDiv.classList.add('gb__message');
+
+    const newMessageName = document.createElement('p');
+    newMessageName.classList.add('gb__message--name');
+    newMessageName.textContent = `${itemValue.name} said:`;
+
+    if (itemValue.website !== null && itemValue.website !== '') {
+        newMessageName.innerHTML = `
+            <a href="${itemValue.website}">${itemValue.name}</a> said:
+        `;
+    }
+
+    const newMessageMsg = document.createElement('p');
+    newMessageMsg.classList.add('gb__message--msg');
+    newMessageMsg.textContent = itemValue.message;
+
+    const newMessageTime = document.createElement('time');
+    newMessageTime.classList.add('gb__message--time');
+    newMessageTime.textContent = itemValue.timestamp;
+
+    messageListEl.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
 };
\ No newline at end of file
diff --git a/src/pages/guestbook.njk b/src/pages/guestbook.njk
index 160b47b0..7999fa10 100644
--- a/src/pages/guestbook.njk
+++ b/src/pages/guestbook.njk
@@ -46,7 +46,9 @@ eleventyNavigation:
 
 <style>
     .gb__form,
-    .gb__form--input {
+    .gb__form--input,
+    .gb__message--list,
+    .gb__message {
         display: grid;
     }
 
@@ -80,6 +82,24 @@ eleventyNavigation:
     .gb__form--input textarea:focus {
          outline: 0.15em solid var(--clr-link);
     }
+
+    .gb__message--list {
+        gap: 1em;
+    }
+
+    .gb__message {
+        gap: 0.5em;
+        padding: 1em 1.4em 1.4em;
+        background-color: var(--clr-quote-bg);
+    }
+
+    .gb__message--name {
+        font-size: 1.4rem;
+    }
+
+    .gb__message--time {
+        font-size: 1rem;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>
\ No newline at end of file