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 = `
+ ${itemValue.name} 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 @@
Leilukin's personal website.
- 2024-05-19T06:46:51Z
+ 2024-05-19T08:29:29Z
https://leilukin.neocities.org
Leilukin
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 @@
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 = `
+ ${itemValue.name} 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:
\ No newline at end of file