blob: 5f3a0553432fd3bf5d68db79bf238cb3fe1d3558 (
plain)
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
|
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 GUESTBOOK_KEY = "guestbookEntries";
let currentCaptcha = "";
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 drawCaptcha(captcha) {
const ctx = captchaCanvas.getContext("2d");
ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(captcha, 10, 32);
}
function refreshCaptcha() {
currentCaptcha = generateCaptcha();
drawCaptcha(currentCaptcha);
}
function formatMessage(message) {
return message
.split("\n")
.map((line) => {
if (line.startsWith(">")) return `<span class="anonymous">${line}</span>`;
return line;
})
.join("<br>");
}
function loadEntries() {
const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
entriesContainer.innerHTML = "";
entries
.slice()
.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);
entriesContainer.appendChild(entryElement);
});
}
form.addEventListener("submit", function (event) {
event.preventDefault();
let name = document.getElementById("name").value.trim();
if (!name) name = "Anonymous";
const message = document.getElementById("message").value.trim();
const captchaValue = captchaInput.value.trim();
if (name && message && captchaValue === currentCaptcha) {
const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
entries.push({ name, message });
localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));
form.reset();
document.getElementById("name").value = "Anonymous";
loadEntries();
refreshCaptcha();
} else {
alert("CAPTCHA is incorrect. Please try again.");
}
});
refreshCaptcha();
refreshCaptchaButton.addEventListener("click", refreshCaptcha);
loadEntries();
});
|
