Add functions to render guestbook messages

This commit is contained in:
Helen Chong 2024-05-19 16:30:58 +08:00
parent 605ca13940
commit b4fd0ab249
5 changed files with 117 additions and 8 deletions

View File

@ -24,23 +24,34 @@ let messageObj = {
email: '', email: '',
website: '', website: '',
message: '', message: '',
timestamp: '', timestamp: {},
replies: [], replies: [],
}; };
// Form submission event // Form submission event
formEl.addEventListener('submit', (e) => { formEl.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
clearInputEl();
addMessage(); 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 = () => { const addMessage = () => {
messageObj = { messageObj = {
...messageObj, ...messageObj,
name: nameInputEl.value, name: nameInputEl.value,
email: emailInputEl.value, email: emailInputEl.value,
website: websiteInputEl.value, website: websiteInputEl.value,
timestamp: formatDate(),
message: msgInputEl.value message: msgInputEl.value
} }
push(guestbookInDB, messageObj); push(guestbookInDB, messageObj);
@ -67,7 +78,6 @@ onValue(guestbookInDB, (snapshot) => {
} else { } else {
messageListEl.textContent = 'No messages here... yet. Be the first!'; messageListEl.textContent = 'No messages here... yet. Be the first!';
} }
}); });
// Prevent rendering any message more than once // Prevent rendering any message more than once
@ -79,4 +89,28 @@ const clearMessageListEl = () => {
const renderMessage = (item) => { const renderMessage = (item) => {
const itemID = item[0]; const itemID = item[0];
const itemValue = item[1]; 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);
}; };

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <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> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

View File

@ -409,7 +409,9 @@
<style> <style>
.gb__form, .gb__form,
.gb__form--input { .gb__form--input,
.gb__message--list,
.gb__message {
display: grid; display: grid;
} }
@ -443,6 +445,24 @@
.gb__form--input textarea:focus { .gb__form--input textarea:focus {
outline: 0.15em solid var(--clr-link); 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> </style>
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>

View File

@ -24,23 +24,34 @@ let messageObj = {
email: '', email: '',
website: '', website: '',
message: '', message: '',
timestamp: '', timestamp: {},
replies: [], replies: [],
}; };
// Form submission event // Form submission event
formEl.addEventListener('submit', (e) => { formEl.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
clearInputEl();
addMessage(); 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 = () => { const addMessage = () => {
messageObj = { messageObj = {
...messageObj, ...messageObj,
name: nameInputEl.value, name: nameInputEl.value,
email: emailInputEl.value, email: emailInputEl.value,
website: websiteInputEl.value, website: websiteInputEl.value,
timestamp: formatDate(),
message: msgInputEl.value message: msgInputEl.value
} }
push(guestbookInDB, messageObj); push(guestbookInDB, messageObj);
@ -78,4 +89,28 @@ const clearMessageListEl = () => {
const renderMessage = (item) => { const renderMessage = (item) => {
const itemID = item[0]; const itemID = item[0];
const itemValue = item[1]; 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);
}; };

View File

@ -46,7 +46,9 @@ eleventyNavigation:
<style> <style>
.gb__form, .gb__form,
.gb__form--input { .gb__form--input,
.gb__message--list,
.gb__message {
display: grid; display: grid;
} }
@ -80,6 +82,24 @@ eleventyNavigation:
.gb__form--input textarea:focus { .gb__form--input textarea:focus {
outline: 0.15em solid var(--clr-link); 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> </style>
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>