Initiate functions to add and render messages
This commit is contained in:
parent
89b08094f8
commit
605ca13940
|
@ -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];
|
||||||
|
};
|
|
@ -4,7 +4,7 @@
|
||||||
<subtitle>Leilukin's personal website.</subtitle>
|
<subtitle>Leilukin'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>
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Reference in New Issue