diff options
Diffstat (limited to 'guestbook.js')
| -rw-r--r-- | guestbook.js | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/guestbook.js b/guestbook.js new file mode 100644 index 0000000..e13a614 --- /dev/null +++ b/guestbook.js @@ -0,0 +1,127 @@ +document.addEventListener("DOMContentLoaded", function() {
+ const form = document.getElementById('guestbook-form');
+ const entriesContainer = document.getElementById('guestbook-entries');
+ const captchaCanvas = document.getElementById('captcha-canvas');
+ const refreshCaptchaButton = document.getElementById('refresh-captcha');
+ const captchaInput = document.getElementById('captcha-input');
+ const imageInput = document.getElementById('image');
+ const GUESTBOOK_KEY = 'guestbookEntries';
+
+ let currentCaptcha = '';
+
+ // Function to generate a random CAPTCHA string
+ function generateCaptcha() {
+ const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ let captcha = '';
+ for (let i = 0; i < 6; i++) {
+ captcha += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return captcha;
+ }
+
+ // Function to draw CAPTCHA on canvas
+ function drawCaptcha(captcha) {
+ const ctx = captchaCanvas.getContext('2d');
+ ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
+ ctx.font = '20px Arial';
+ ctx.fillStyle = '#000';
+ ctx.fillText(captcha, 10, 30);
+ }
+
+ // Function to refresh the CAPTCHA image
+ function refreshCaptcha() {
+ currentCaptcha = generateCaptcha();
+ drawCaptcha(currentCaptcha);
+ }
+
+ // Load and display existing entries
+ function loadEntries() {
+ const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
+ entriesContainer.innerHTML = '';
+
+ entries.reverse().forEach((entry) => {
+ const entryElement = document.createElement('div');
+ entryElement.className = 'entry';
+
+ const nameElement = document.createElement('h4');
+ if (entry.name === 'Anonymous') {
+ nameElement.className = 'anonymous';
+ }
+ nameElement.textContent = entry.name;
+ entryElement.appendChild(nameElement);
+
+ const messageElement = document.createElement('p');
+ messageElement.innerHTML = formatMessage(entry.message);
+ entryElement.appendChild(messageElement);
+
+ if (entry.image) {
+ const imageElement = document.createElement('img');
+ imageElement.src = entry.image;
+ entryElement.appendChild(imageElement);
+ }
+
+ entriesContainer.appendChild(entryElement);
+ });
+ }
+
+ // Format message: add green text for lines starting with '>'
+ function formatMessage(message) {
+ return message.split('\n').map(line => {
+ if (line.startsWith('>')) {
+ return `<span class="anonymous">${line}</span>`;
+ }
+ return line;
+ }).join('<br>');
+ }
+
+ // Handle form submission
+ form.addEventListener('submit', function(event) {
+ event.preventDefault();
+
+ // Set default name to "Anonymous" if the name field is empty
+ let name = document.getElementById('name').value.trim();
+ if (!name) {
+ name = 'Anonymous';
+ }
+
+ const message = document.getElementById('message').value.trim();
+ const captchaValue = captchaInput.value.trim();
+ const imageFile = imageInput.files[0];
+
+ if (name && message && captchaValue === currentCaptcha) {
+ const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
+
+ if (imageFile) {
+ const reader = new FileReader();
+ reader.onload = function() {
+ const image = reader.result;
+ entries.unshift({ name, message, image });
+ localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));
+
+ form.reset(); // Clear the form fields
+ document.getElementById('name').value = 'Anonymous'; // Reset the name field to "Anonymous"
+ loadEntries(); // Refresh the entries display
+ refreshCaptcha(); // Generate a new CAPTCHA after successful submission
+ };
+ reader.readAsDataURL(imageFile);
+ } else {
+ entries.unshift({ name, message, image: null });
+ localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));
+
+ form.reset(); // Clear the form fields
+ document.getElementById('name').value = 'Anonymous'; // Reset the name field to "Anonymous"
+ loadEntries(); // Refresh the entries display
+ refreshCaptcha(); // Generate a new CAPTCHA after successful submission
+ }
+ } else {
+ alert('CAPTCHA is incorrect. Please try again.');
+ }
+ });
+
+ // Refresh CAPTCHA on page load and on refresh button click
+ refreshCaptcha();
+ refreshCaptchaButton.addEventListener('click', refreshCaptcha);
+
+ // Initial load
+ loadEntries();
+});
\ No newline at end of file |