Set up guestbook form

This commit is contained in:
Helen Chong 2024-05-19 14:24:07 +08:00
parent 562e365e99
commit a67a870c42
5 changed files with 149 additions and 235 deletions

View File

@ -1 +1,32 @@
console.log("Guestbook script successfully loaded"); console.log("Guestbook script successfully loaded");
// 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 publishBtn = document.querySelector('.gb__form--submit');
const messageListEl = document.querySelector('.gb__message--list');
// Initiate guestbook message object
let messageObj = {
name: '',
email: '',
website: '',
message: '',
timestamp: '',
replies: [],
};

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-19T05:26:06Z</updated> <updated>2024-05-19T06:23:25Z</updated>
<id>https://leilukin.neocities.org</id> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

View File

@ -376,148 +376,74 @@
<p><a href="https://web.archive.org/web/20240510121252/https%3A%2F%2Fleilukin.123guestbook.com%2F">Archive of my previous guestbook hosted on 123Guestbook</a></p> <p><a href="https://web.archive.org/web/20240510121252/https%3A%2F%2Fleilukin.123guestbook.com%2F">Archive of my previous guestbook hosted on 123Guestbook</a></p>
<!-- customize labels of htmlcommentbox.com --> <h2>Leave A Message</h2>
<script>
/* This code goes ABOVE the main HTML Comment Box code!
replace the text in the single quotes below to customize labels.*/
hcb_user = {
/* L10N */
comments_header: 'Guestbook',
name_label: 'Name',
content_label: 'Enter your message here',
submit: 'Send Message',
logout_link: '<img title="log out" src="https://www.htmlcommentbox.com/static/images/door_out.svg" alt="[logout]" class="hcb-icon hcb-door-out"/>',
admin_link: '<img src="https://www.htmlcommentbox.com/static/images/door_in.svg" alt="[login]" class="hcb-icon hcb-door-in"/>',
no_comments_msg: 'No one has left any message yet. Be the first!',
add: 'Add your message',
again: 'Post another message',
rss: '<img src="https://www.htmlcommentbox.com/static/images/feed.svg" class="hcb-icon" alt="rss"/> ',
said: 'said:',
prev_page: '<img src="https://www.htmlcommentbox.com/static/images/arrow_left.png" class="hcb-icon" title="previous page" alt="[prev]"/>',
next_page: '<img src="https://www.htmlcommentbox.com/static/images/arrow_right.png" class="hcb-icon" title="next page" alt="[next]"/>',
showing: 'Showing',
to: 'to',
website_label: 'website (optional)',
email_label: 'email',
anonymous: 'Anonymous',
mod_label: '(mod)',
subscribe: 'Email Me Replies',
add_image: 'Add Image',
are_you_sure: 'Do you want to flag this comment as inappropriate?',
reply: 'Reply', <form class="gb__form">
flag: 'Flag', <div class="gb__form--input">
like: 'Like', <label for="name-input">Name:</label>
<input type="text" name="name" id="name-input" required>
</div>
/* dates */ <div class="gb__form--input">
days_ago: 'days ago', <label for="email-input">Email:</label>
hours_ago: 'hours ago', <input type="email" name="email" id="email-input" required>
minutes_ago: 'minutes ago', </div>
within_the_last_minute: 'within the last minute',
msg_thankyou: 'Thank you for your message!', <div class="gb__form--input">
msg_approval: 'NOTE: This message is not published until approved', <label for="website-input">Website (optional):</label>
msg_approval_required: 'Thank you for your message! Your message will appear once approved by Leilukin.', <input type="text" name="website" id="website-input">
</div>
err_bad_html: 'Your message contained bad html.', <div class="gb__form--input">
err_bad_email: 'Please enter a valid email address.', <label for="message-input">Message:</label>
err_too_frequent: 'You must wait a few seconds between posting messages.', <textarea type="text" rows="4" name="message" id="message-input" required></textarea>
err_comment_empty: 'Your message was not posted because it was empty!', </div>
err_denied: 'Your message was not accepted.',
err_unknown: 'Your message was blocked for unknown reasons, please report this.',
err_spam: 'Your message was detected as spam.',
err_blocked: 'Your message was blocked by site policy.',
/* SETTINGS */ <button type="submit" class="gb__form--submit">Publish</button>
MAX_CHARS: 4096, </form>
PAGE: '',
/* ID of the webpage to show comments for. defaults to the webpage the user is currently visiting. */
ON_COMMENT: function () {},
/* Function to call after commenting. */
RELATIVE_DATES: false /* show dates in the form "X hours ago." etc. */
};
</script>
<!-- done customizing labels of htmlcommentbox.com -->
<!-- begin wwww.htmlcommentbox.com --> <section class="gb__messages">
<section id="HCB_comment_box"> <h2>Messages</h2>
<a href="http://www.htmlcommentbox.com">Widget</a> is loading messages... <div class="gb__message--list"></div>
</section> </section>
<link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0"/>
<script type="text/javascript" id="hcb" defer>
/* <!-- */
if (!window.hcb_user) {
hcb_user = {};
}
(function () {
const s = document.createElement("script"),
l = hcb_user.PAGE || ("" + window.location).replace(/'/g, "%27"),
h = "https://www.htmlcommentbox.com";
s.setAttribute("type", "text/javascript");
s.setAttribute("src", h + "/jread?page=" + encodeURIComponent(l).replace("+", "%2B") + "&mod=%241%24wq1rdBcg%24IRFneco1bcPmYKq.t1Oae." + "&opts=16798&num=10&ts=1715702516205");
if (typeof s != "undefined")
document
.getElementsByTagName("head")[0]
.appendChild(s);
}
)();/* --> */
</script>
<style> <style>
#HCB_comment_box { .gb__form,
height: auto; .gb__form--input {
font-family: inherit;
font-size: 1.2rem;
}
#HCB_comment_box form {
display: grid; display: grid;
gap: 0.3em;
margin: 1rem 0 1.3rem;
} }
#HCB_comment_box #hcb_form textarea, .gb__form {
#HCB_comment_box #hcb_form #hcb_form_name { gap: 0.6em;
width: 100%; margin-bottom: 2em;
font-family: inherit;
font-size: 1.2rem;
} }
#HCB_comment_box #hcb_form #replying_to_container, .gb__form--input {
#HCB_comment_box .date { gap: 0.2em;
font-size: 0.9rem;
color: var(--clr-body-txt);
} }
#HCB_comment_box #hcb_form textarea:focus, .gb__form--submit {
#HCB_comment_box #hcb_form #hcb_form_name:focus { border: none;
outline: 0.25em solid var(--clr-link);
}
#HCB_comment_box #hcb_form .btn,
#HCB_comment_box #HCB_comment_form_box .btn {
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
font-size: 1.2rem; padding: 0.3em;
} }
#HCB_comment_box #hcb_form .btn:focus, .gb__form--input input,
#HCB_comment_box #HCB_comment_form_box .btn:focus { .gb__form--input textarea,
outline: 0.15em solid var(--clr-link-btn-txt); .gb__form--submit {
border-radius: 0.2em;
} }
#HCB_comment_box #hcb_form .home-desc a, .gb__form--input textarea {
#HCB_comment_box .home-desc a:visited, resize: vertical;
#HCB_comment_box .hcb-comment-tb button {
color: var(--clr-link);
} }
#HCB_comment_box #hcb_form .home-desc a, .gb__form--input input:focus,
#HCB_comment_box .home-desc a:visited { .gb__form--input textarea:focus {
text-decoration: underline; outline: 0.15em solid var(--clr-link);
} }
</style> </style>
<!-- end www.htmlcommentbox.com -->
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>
</div> </div>

View File

@ -1 +1,32 @@
console.log("Guestbook script successfully loaded"); console.log("Guestbook script successfully loaded");
// 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 publishBtn = document.querySelector('.gb__form--submit');
const messageListEl = document.querySelector('.gb__message--list');
// Initiate guestbook message object
let messageObj = {
name: '',
email: '',
website: '',
message: '',
timestamp: '',
replies: [],
};

View File

@ -13,147 +13,73 @@ eleventyNavigation:
<p><a href="https://web.archive.org/web/20240510121252/https%3A%2F%2Fleilukin.123guestbook.com%2F">Archive of my previous guestbook hosted on 123Guestbook</a></p> <p><a href="https://web.archive.org/web/20240510121252/https%3A%2F%2Fleilukin.123guestbook.com%2F">Archive of my previous guestbook hosted on 123Guestbook</a></p>
<!-- customize labels of htmlcommentbox.com --> <h2>Leave A Message</h2>
<script>
/* This code goes ABOVE the main HTML Comment Box code!
replace the text in the single quotes below to customize labels.*/
hcb_user = {
/* L10N */
comments_header: 'Guestbook',
name_label: 'Name',
content_label: 'Enter your message here',
submit: 'Send Message',
logout_link: '<img title="log out" src="https://www.htmlcommentbox.com/static/images/door_out.svg" alt="[logout]" class="hcb-icon hcb-door-out"/>',
admin_link: '<img src="https://www.htmlcommentbox.com/static/images/door_in.svg" alt="[login]" class="hcb-icon hcb-door-in"/>',
no_comments_msg: 'No one has left any message yet. Be the first!',
add: 'Add your message',
again: 'Post another message',
rss: '<img src="https://www.htmlcommentbox.com/static/images/feed.svg" class="hcb-icon" alt="rss"/> ',
said: 'said:',
prev_page: '<img src="https://www.htmlcommentbox.com/static/images/arrow_left.png" class="hcb-icon" title="previous page" alt="[prev]"/>',
next_page: '<img src="https://www.htmlcommentbox.com/static/images/arrow_right.png" class="hcb-icon" title="next page" alt="[next]"/>',
showing: 'Showing',
to: 'to',
website_label: 'website (optional)',
email_label: 'email',
anonymous: 'Anonymous',
mod_label: '(mod)',
subscribe: 'Email Me Replies',
add_image: 'Add Image',
are_you_sure: 'Do you want to flag this comment as inappropriate?',
reply: 'Reply', <form class="gb__form">
flag: 'Flag', <div class="gb__form--input">
like: 'Like', <label for="name-input">Name:</label>
<input type="text" name="name" id="name-input" required>
</div>
/* dates */ <div class="gb__form--input">
days_ago: 'days ago', <label for="email-input">Email:</label>
hours_ago: 'hours ago', <input type="email" name="email" id="email-input" required>
minutes_ago: 'minutes ago', </div>
within_the_last_minute: 'within the last minute',
msg_thankyou: 'Thank you for your message!', <div class="gb__form--input">
msg_approval: 'NOTE: This message is not published until approved', <label for="website-input">Website (optional):</label>
msg_approval_required: 'Thank you for your message! Your message will appear once approved by Leilukin.', <input type="text" name="website" id="website-input">
</div>
err_bad_html: 'Your message contained bad html.', <div class="gb__form--input">
err_bad_email: 'Please enter a valid email address.', <label for="message-input">Message:</label>
err_too_frequent: 'You must wait a few seconds between posting messages.', <textarea type="text" rows="4" name="message" id="message-input" required></textarea>
err_comment_empty: 'Your message was not posted because it was empty!', </div>
err_denied: 'Your message was not accepted.',
err_unknown: 'Your message was blocked for unknown reasons, please report this.',
err_spam: 'Your message was detected as spam.',
err_blocked: 'Your message was blocked by site policy.',
/* SETTINGS */ <button type="submit" class="gb__form--submit">Publish</button>
MAX_CHARS: 4096, </form>
PAGE: '',
/* ID of the webpage to show comments for. defaults to the webpage the user is currently visiting. */
ON_COMMENT: function () {},
/* Function to call after commenting. */
RELATIVE_DATES: false /* show dates in the form "X hours ago." etc. */
};
</script>
<!-- done customizing labels of htmlcommentbox.com -->
<!-- begin wwww.htmlcommentbox.com --> <section class="gb__messages">
<section id="HCB_comment_box"> <h2>Messages</h2>
<a href="http://www.htmlcommentbox.com">Widget</a> is loading messages... <div class="gb__message--list"></div>
</section> </section>
<link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0"/>
<script type="text/javascript" id="hcb" defer>
/* <!-- */
if (!window.hcb_user) {
hcb_user = {};
}
(function () {
const s = document.createElement("script"),
l = hcb_user.PAGE || ("" + window.location).replace(/'/g, "%27"),
h = "https://www.htmlcommentbox.com";
s.setAttribute("type", "text/javascript");
s.setAttribute("src", h + "/jread?page=" + encodeURIComponent(l).replace("+", "%2B") + "&mod=%241%24wq1rdBcg%24IRFneco1bcPmYKq.t1Oae." + "&opts=16798&num=10&ts=1715702516205");
if (typeof s != "undefined")
document
.getElementsByTagName("head")[0]
.appendChild(s);
}
)();/* --> */
</script>
<style> <style>
#HCB_comment_box { .gb__form,
height: auto; .gb__form--input {
font-family: inherit;
font-size: 1.2rem;
}
#HCB_comment_box form {
display: grid; display: grid;
gap: 0.3em;
margin: 1rem 0 1.3rem;
} }
#HCB_comment_box #hcb_form textarea, .gb__form {
#HCB_comment_box #hcb_form #hcb_form_name { gap: 0.6em;
width: 100%; margin-bottom: 2em;
font-family: inherit;
font-size: 1.2rem;
} }
#HCB_comment_box #hcb_form #replying_to_container, .gb__form--input {
#HCB_comment_box .date { gap: 0.2em;
font-size: 0.9rem;
color: var(--clr-body-txt);
} }
#HCB_comment_box #hcb_form textarea:focus, .gb__form--submit {
#HCB_comment_box #hcb_form #hcb_form_name:focus { border: none;
outline: 0.25em solid var(--clr-link);
}
#HCB_comment_box #hcb_form .btn,
#HCB_comment_box #HCB_comment_form_box .btn {
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
font-size: 1.2rem; padding: 0.3em;
} }
#HCB_comment_box #hcb_form .btn:focus, .gb__form--input input,
#HCB_comment_box #HCB_comment_form_box .btn:focus { .gb__form--input textarea,
outline: 0.15em solid var(--clr-link-btn-txt); .gb__form--submit {
border-radius: 0.2em;
} }
#HCB_comment_box #hcb_form .home-desc a, .gb__form--input textarea {
#HCB_comment_box .home-desc a:visited, resize: vertical;
#HCB_comment_box .hcb-comment-tb button {
color: var(--clr-link);
} }
#HCB_comment_box #hcb_form .home-desc a, .gb__form--input input:focus,
#HCB_comment_box .home-desc a:visited { .gb__form--input textarea:focus {
text-decoration: underline; outline: 0.15em solid var(--clr-link);
} }
</style> </style>
<!-- end www.htmlcommentbox.com -->
<script type="module" src="/assets/js/guestbook.js" defer></script> <script type="module" src="/assets/js/guestbook.js" defer></script>