Initiate functions to add and render messages

_site/assets/js/guestbook.js

@@ -16,7 +16,6 @@ const nameInputEl = document.querySelector('#name-input');
 const emailInputEl = document.querySelector('#email-input');
 const websiteInputEl = document.querySelector('#website-input');
 const msgInputEl = document.querySelector('#message-input');
-const publishBtn = document.querySelector('.gb__form--submit');
 const messageListEl = document.querySelector('.gb__message--list');
 
 // Initiate guestbook message object
@@ -29,15 +28,55 @@ let messageObj = {
     replies: [],
 };
 
+// Form submission event
 formEl.addEventListener('submit', (e) => {
     e.preventDefault();
     clearInputEl();
-    console.log('Form submitted');
+    addMessage();
 });
 
+const addMessage = () => {
+    messageObj = {
+        ...messageObj,
+        name: nameInputEl.value,
+        email: emailInputEl.value,
+        website: websiteInputEl.value,
+        message: msgInputEl.value
+    }
+    push(guestbookInDB, messageObj);
+};
+
+// Clear input fields
 const clearInputEl = () => {
     nameInputEl.value = '';
     emailInputEl.value = '';
     websiteInputEl.value = '';
     msgInputEl.value = '';
+};
+
+// Load data from the Firebase database
+onValue(guestbookInDB, (snapshot) => {
+    if (snapshot.exists()) {
+        let messagesArr = Object.entries(snapshot.val()).reverse();
+
+        clearMessageListEl();
+
+        messagesArr.forEach((item) => {
+            renderMessage(item);
+        });
+    } else {
+        messageListEl.textContent = 'No messages here... yet. Be the first!';
+    }
+
+});
+
+// Prevent rendering any message more than once
+const clearMessageListEl = () => {
+    messageListEl.innerHTML = '';
+};
+
+// Render each message
+const renderMessage = (item) => {
+    const itemID = item[0];
+    const itemValue = item[1];
 };

_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:29:00Z</updated>
+    <updated>2024-05-19T06:46:51Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>

src/assets/js/guestbook.js

@@ -32,9 +32,20 @@ let messageObj = {
 formEl.addEventListener('submit', (e) => {
     e.preventDefault();
     clearInputEl();
-    console.log('Form submitted');
+    addMessage();
 });
 
+const addMessage = () => {
+    messageObj = {
+        ...messageObj,
+        name: nameInputEl.value,
+        email: emailInputEl.value,
+        website: websiteInputEl.value,
+        message: msgInputEl.value
+    }
+    push(guestbookInDB, messageObj);
+};
+
 // Clear input fields
 const clearInputEl = () => {
     nameInputEl.value = '';
@@ -44,7 +55,19 @@ const clearInputEl = () => {
 };
 
 // Load data from the Firebase database
-onValue(endorsementsInDB, (snapshot) => {});
+onValue(guestbookInDB, (snapshot) => {
+    if (snapshot.exists()) {
+        let messagesArr = Object.entries(snapshot.val()).reverse();
+
+        clearMessageListEl();
+
+        messagesArr.forEach((item) => {
+            renderMessage(item);
+        });
+    } else {
+        messageListEl.textContent = 'No messages here... yet. Be the first!';
+    }
+});
 
 // Prevent rendering any message more than once
 const clearMessageListEl = () => {