-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
148 lines (131 loc) · 4.64 KB
/
form.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inspiration Form</title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<form id="form">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Brief summary of entry" required>
</div>
<div class="form-group">
<label for="inscriber">Inscriber</label>
<input type="text" id="inscriber" name="inscriber" placeholder="Your name/pen name">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="recent-inspiration">Recent Inspiration (max 280 characters)</label>
<textarea id="recent-inspiration" name="recent-inspiration" placeholder="What inspired you in the last 24 hours that made a difference or impact on you" required maxlength="280"></textarea>
<div id="inspiration-counter"></div>
</div>
<button type="submit">Generate</button>
</form>
<div class="json-container" id="json-container">
<button class="copy-button" id="copy-button" disabled>Copy JSON to Clipboard</button>
<div class="json-display" id="json-display"></div>
</div>
<script src="form.js"></script>
</body>
</html>
<style>
.form-group {
margin-bottom: 10px;
}
#inspiration-counter {
font-size: 12px;
margin-top: 5px;
}
.json-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.copy-button {
margin-bottom: 10px;
}
.json-display {
width: 100%;
max-width: 600px;
overflow: auto;
padding: 10px;
background-color: #f0f0f0;
white-space: pre-wrap;
word-break: break-all;
}
</style>
<head>
<script>
const form = document.getElementById("form");
const jsonContainer = document.getElementById("json-container");
const copyButton = document.createElement("button");
copyButton.setAttribute("id", "copy-button");
copyButton.setAttribute("disabled", "");
copyButton.textContent = "Copy JSON to Clipboard";
const inspirationTextarea = document.getElementById("recent-inspiration");
const inspirationCounter = document.getElementById("inspiration-counter");
const maxInspirationLength = inspirationTextarea.getAttribute("maxlength");
const colors = {
blue: "rgb(0, 128, 255)",
yellow: "orange",
red: "rgb(255, 0, 0)"
};
inspirationTextarea.addEventListener("input", () => {
const currentLength = inspirationTextarea.value.length;
inspirationCounter.textContent = `${currentLength}/${maxInspirationLength} characters`;
if (currentLength <= 200) {
inspirationCounter.style.color = colors.blue;
} else if (currentLength <= 250) {
inspirationCounter.style.color = colors.yellow;
} else {
inspirationCounter.style.color = colors.red;
}
});
form.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const submission = Object.fromEntries(formData.entries());
const jsonCode = JSON.stringify(submission, null, 2);
const codeDisplay = document.createElement("pre");
codeDisplay.textContent = jsonCode;
jsonContainer.innerHTML = '';
jsonContainer.appendChild(codeDisplay);
copyButton.removeAttribute("disabled");
form.reset();
});
copyButton.addEventListener("click", () => {
const range = document.createRange();
range.selectNodeContents(jsonContainer.querySelector("pre"));
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
copyButton.textContent = "JSON Copied!";
});
function generateWordOfTheDay() {
const words = ["serendipity", "euphoria", "syzygy", "ineffable", "petrichor", "luminescence", "ethereal", "supine", "incandescent", "diaphanous"];
const randomIndex = Math.floor(Math.random() * words.length);
return words[randomIndex];
}
const generateButton = document.getElementById("generate-button");
generateButton.addEventListener("click", () => {
const formData = new FormData(form);
const submission = Object.fromEntries(formData.entries());
const wordOfTheDay = generateWordOfTheDay();
submission["word-of-the-day"] = wordOfTheDay;
const jsonCode = JSON.stringify(submission, null, 2);
const codeDisplay = document.createElement("pre");
codeDisplay.textContent = jsonCode;
jsonContainer.innerHTML = '';
jsonContainer.appendChild(codeDisplay);
copyButton.removeAttribute("disabled");
});
jsonContainer.parentNode.insertBefore(copyButton, jsonContainer.nextSibling);
</script>
</head>