1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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();
});
|
