Initiate functions to add and render messages

This commit is contained in:
Helen Chong 2024-05-19 14:47:44 +08:00
parent 89b08094f8
commit 605ca13940
3 changed files with 67 additions and 5 deletions

View File

@ -16,7 +16,6 @@ const nameInputEl = document.querySelector('#name-input');
const emailInputEl = document.querySelector('#email-input'); const emailInputEl = document.querySelector('#email-input');
const websiteInputEl = document.querySelector('#website-input'); const websiteInputEl = document.querySelector('#website-input');
const msgInputEl = document.querySelector('#message-input'); const msgInputEl = document.querySelector('#message-input');
const publishBtn = document.querySelector('.gb__form--submit');
const messageListEl = document.querySelector('.gb__message--list'); const messageListEl = document.querySelector('.gb__message--list');
// Initiate guestbook message object // Initiate guestbook message object
@ -29,15 +28,55 @@ let messageObj = {
replies: [], replies: [],
}; };
// Form submission event
formEl.addEventListener('submit', (e) => { formEl.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
clearInputEl(); 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 = () => { const clearInputEl = () => {
nameInputEl.value = ''; nameInputEl.value = '';
emailInputEl.value = ''; emailInputEl.value = '';
websiteInputEl.value = ''; websiteInputEl.value = '';
msgInputEl.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];
};

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

View File

@ -32,9 +32,20 @@ let messageObj = {
formEl.addEventListener('submit', (e) => { formEl.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
clearInputEl(); 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 // Clear input fields
const clearInputEl = () => { const clearInputEl = () => {
nameInputEl.value = ''; nameInputEl.value = '';
@ -44,7 +55,19 @@ const clearInputEl = () => {
}; };
// Load data from the Firebase database // 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 // Prevent rendering any message more than once
const clearMessageListEl = () => { const clearMessageListEl = () => {