From 605ca13940a94f329617ee0573463b05d455af40 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 19 May 2024 14:47:44 +0800
Subject: [PATCH] Initiate functions to add and render messages
---
_site/assets/js/guestbook.js | 43 ++++++++++++++++++++++++++++++++++--
_site/feed.xml | 2 +-
src/assets/js/guestbook.js | 27 ++++++++++++++++++++--
3 files changed, 67 insertions(+), 5 deletions(-)
diff --git a/_site/assets/js/guestbook.js b/_site/assets/js/guestbook.js
index a8617949..0da2d565 100644
--- a/_site/assets/js/guestbook.js
+++ b/_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];
};
\ No newline at end of file
diff --git a/_site/feed.xml b/_site/feed.xml
index 9ebad38c..cc108a4a 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
Leilukin's personal website.
- 2024-05-19T06:29:00Z
+ 2024-05-19T06:46:51Z
https://leilukin.neocities.org
Leilukin
diff --git a/src/assets/js/guestbook.js b/src/assets/js/guestbook.js
index 53a32f40..10cde802 100644
--- a/src/assets/js/guestbook.js
+++ b/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 = () => {