Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove old guestbook script file

This commit is contained in:
Helen Chong 2024-05-26 11:37:40 +08:00
parent 509f422810
commit fd50a564da
1 changed files with 0 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/assets/js/guestbook.js
View File

@ -1,121 +0,0 @@
// Import Firebase
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js'
import { getDatabase, ref, push, onValue, update } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js'
// Set up Firebase database
const appSettings = {
databaseURL: 'https://leilukin-s-hub-guestbook-default-rtdb.asia-southeast1.firebasedatabase.app/'
};
const app = initializeApp(appSettings);
const database = getDatabase(app);
const guestbookInDB = ref(database, "guestbook");
// Get DOM elements
const formEl = document.querySelector('.gb__form');
const nameInputEl = document.querySelector('#name-input');
const emailInputEl = document.querySelector('#email-input');
const websiteInputEl = document.querySelector('#website-input');
const msgInputEl = document.querySelector('#message-input');
const messageListEl = document.querySelector('.gb__message--list');
// Initiate guestbook message object
let messageObj = {
name: '',
email: '',
website: '',
message: '',
timestamp: '',
};
// Form submission event
formEl.addEventListener('submit', (e) => {
e.preventDefault();
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);
};
// Clear input fields
const clearInputEl = () => {
nameInputEl.value = '';
emailInputEl.value = '';
websiteInputEl.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];
const newThreadDiv = document.createElement('div');
newThreadDiv.classList.add('gb__thread');
newThreadDiv.id = `thread-${itemID}`;
const newMessageDiv = document.createElement('div');
newMessageDiv.classList.add('gb__message');
newMessageDiv.id = `msg-${itemID}`;
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(newThreadDiv);
newThreadDiv.append(newMessageDiv);
newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
};