Add functions to render guestbook messages

_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);
 };

_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>

_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>

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);
 };

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>