Add functions to render guestbook messages
This commit is contained in:
parent
605ca13940
commit
b4fd0ab249
|
@ -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);
|
||||||
};
|
};
|
|
@ -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: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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
|
@ -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>
|
Loading…
Reference in New Issue