Skip to content

Commit f03a107

Browse files
TobiasMue91TobiasMue91
committed
- improve daily quote generator
1 parent 89dc39c commit f03a107

File tree

1 file changed

+143
-52
lines changed

1 file changed

+143
-52
lines changed

‎tools/daily_quote_generator.html‎

Lines changed: 143 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💬</text></svg>">
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta name="description" content="Generate and share inspirational daily quotes with our Daily Quote Generator. Customize your quotes with different categories, authors, and creativity levels.">
8-
<meta name="keywords" content="quote generator, daily quotes, inspirational quotes, motivation, share quotes">
7+
<meta name="description" content="Generate, customize, and share inspirational daily quotes with our Daily Quote Generator. Features include automatic category randomization, author selection, and quote saving.">
8+
<meta name="keywords" content="quote generator, daily quotes, inspirational quotes, motivation, share quotes, customize quotes">
99
<script src="https://cdn.tailwindcss.com"></script>
1010
<script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js" integrity="sha512-44jdhc+R2TFfzBflS3/dGNEABiNUxBkkrqwO7GWTvGsj3HkQNr3GESvI9PUvAxmqxSnTosR0Ij9y3+o+6J1hig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
1111
<title>Daily Quote Generator</title>
@@ -16,14 +16,21 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
1616
<div class="mb-4">
1717
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category:</label>
1818
<select id="category" class="mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-600 dark:text-white">
19-
<option value="random">Random</option>
2019
<option value="inspirational">Inspirational</option>
2120
<option value="motivational">Motivational</option>
2221
<option value="success">Success</option>
2322
<option value="life">Life</option>
2423
<option value="love">Love</option>
2524
<option value="wisdom">Wisdom</option>
2625
<option value="humor">Humor</option>
26+
<option value="leadership">Leadership</option>
27+
<option value="friendship">Friendship</option>
28+
<option value="courage">Courage</option>
29+
<option value="education">Education</option>
30+
<option value="change">Change</option>
31+
<option value="happiness">Happiness</option>
32+
<option value="perseverance">Perseverance</option>
33+
<option value="creativity">Creativity</option>
2734
</select>
2835
</div>
2936
<div class="mb-4">
@@ -32,8 +39,8 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
3239
</div>
3340
<div class="mb-4">
3441
<label for="creativity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Creativity:</label>
35-
<input type="range" id="creativity" min="0" max="100" step="5" value="30" class="w-full">
36-
<div id="creativity-value" class="text-center text-sm text-gray-600 dark:text-gray-400">30%</div>
42+
<input type="range" id="creativity" min="0" max="100" step="5" value="50" class="w-full">
43+
<div id="creativity-value" class="text-center text-sm text-gray-600 dark:text-gray-400">50%</div>
3744
</div>
3845
<button id="generate-quote" class="w-full rounded-md bg-indigo-600 text-white p-2 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">Generate Quote</button>
3946
<div id="result" class="mt-4 text-center text-sm font-medium text-gray-800 dark:text-white"></div>
@@ -47,58 +54,83 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
4754
Share
4855
</button>
4956
</div>
50-
<button id="save-quote" class="mt-4 w-full rounded-md bg-green-600 text-white p-2 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 hidden">Save Quote</button>
57+
<button id="save-quote" class="mt-4 w-full rounded-md bg-yellow-600 text-white p-2 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 hidden">Save Quote</button>
5158
<div id="saved-quotes" class="mt-4 text-sm text-gray-800 dark:text-white hidden">
5259
<h3 class="font-bold mb-2">Saved Quotes:</h3>
5360
<ul id="saved-quotes-list" class="list-disc pl-5"></ul>
5461
</div>
62+
<div id="quote-history" class="mt-4 text-sm text-gray-800 dark:text-white hidden">
63+
<h3 class="font-bold mb-2">Quote History:</h3>
64+
<ul id="history-list" class="list-none pl-0"></ul>
65+
</div>
66+
<button id="toggle-history" class="mt-4 w-full rounded-md bg-purple-600 text-white p-2 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">Toggle Quote History</button>
5567
<div id="howToUseSection" class="my-6">
5668
<button onclick="toggleCollapse()" class="flex items-center justify-between w-full p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300 cursor-pointer">
5769
<h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
5870
<span id="collapseIcon" class="text-xl">+</span>
5971
</button>
6072
<div id="howToUseContent" class="hidden">
6173
<div class="p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300">
62-
<p class="mb-2">Generate, share, and save inspiring daily quotes with ease:</p>
74+
<p class="mb-2">Generate, customize, share, and save inspiring daily quotes with ease:</p>
6375
<ul class="list-disc pl-5 space-y-1">
64-
<li>Select a category or leave it as "Random" for variety.</li>
76+
<li>The category is randomized automatically for each new quote.</li>
77+
<li>You can manually select a category if desired.</li>
6578
<li>Optionally, enter an author's name for a quote from that person.</li>
6679
<li>Adjust the "Creativity" slider to control the uniqueness of the generated quotes.</li>
6780
<li>Click the "Generate Quote" button to create your quote.</li>
6881
<li>Click on the generated quote to copy it to your clipboard.</li>
6982
<li>Use the share buttons to post the quote on social media.</li>
7083
<li>Save your favorite quotes for later reference.</li>
84+
<li>View your quote history and manage saved quotes.</li>
7185
</ul>
7286
</div>
7387
</div>
7488
</div>
7589
</div>
7690
<script>
77-
const categories = ['inspirational', 'motivational', 'success', 'life', 'love', 'wisdom', 'humor'];
91+
const categories = [
92+
'inspirational', 'motivational', 'success', 'life', 'love', 'wisdom', 'humor',
93+
'leadership', 'friendship', 'courage', 'education', 'change', 'happiness',
94+
'perseverance', 'creativity'
95+
];
96+
let quoteHistory = [];
7897
let userSelectedCategory = false;
98+
let lastCategory = '';
99+
79100
document.getElementById('creativity').addEventListener('input', function() {
80101
const creativityValue = this.value;
81102
document.getElementById('creativity-value').textContent = `${creativityValue}%`;
82103
});
83-
document.getElementById('category').addEventListener('change', function() {
84-
userSelectedCategory = this.value !== 'random';
85-
});
104+
86105
document.getElementById('generate-quote').addEventListener('click', generateQuote);
87106
document.getElementById('save-quote').addEventListener('click', saveQuote);
107+
document.getElementById('toggle-history').addEventListener('click', toggleHistoryView);
108+
document.getElementById('category').addEventListener('change', function() {
109+
userSelectedCategory = true;
110+
});
111+
112+
88113
function getRandomCategory() {
89-
return categories[Math.floor(Math.random() * categories.length)];
114+
let newCategory;
115+
do {
116+
newCategory = categories[Math.floor(Math.random() * categories.length)];
117+
} while (newCategory === lastCategory && categories.length > 1);
118+
119+
lastCategory = newCategory;
120+
return newCategory;
90121
}
122+
91123
function setRandomCategory() {
92124
if (!userSelectedCategory) {
93-
document.getElementById('category').value = 'random';
125+
document.getElementById('category').value = getRandomCategory();
94126
}
95127
}
96-
setRandomCategory();
97-
async function generateQuote() {
98-
let category = document.getElementById('category').value;
99-
if (category === 'random') {
100-
category = getRandomCategory();
128+
129+
function generateQuote() {
130+
if (!userSelectedCategory) {
131+
setRandomCategory();
101132
}
133+
const category = document.getElementById('category').value;
102134
const author = document.getElementById('author').value;
103135
const creativity = document.getElementById('creativity').value / 100;
104136
const resultContainer = document.getElementById('result');
@@ -107,51 +139,59 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
107139
toggleButtonState();
108140
const botMessage = `I am currently functioning as the Daily Quote Generator API. I will provide responses in this JSON format: {"quote":"generated quote", "author":"quote author"}`;
109141
const userMessage = `Generate a ${category} quote${author ? ` by ${author}` : ''}.`;
110-
try {
111-
const response = await fetch('https://chatgpt.tobiasmue91.workers.dev/', {
112-
method: 'POST',
113-
headers: {"Content-Type": "application/json", "Accept": "*/*"},
114-
body: JSON.stringify({
115-
model: "gpt-3.5-turbo",
116-
max_tokens: 150,
117-
temperature: creativity * 2,
118-
messages: [
119-
{ role: "assistant", content: botMessage },
120-
{ role: "user", content: userMessage },
121-
],
122-
})
142+
fetch('https://chatgpt.tobiasmue91.workers.dev/', {
143+
method: 'POST',
144+
headers: {"Content-Type": "application/json", "Accept": "*/*"},
145+
body: JSON.stringify({
146+
model: "gpt-3.5-turbo",
147+
max_tokens: 150,
148+
temperature: creativity * 2,
149+
messages: [
150+
{ role: "assistant", content: botMessage },
151+
{ role: "user", content: userMessage },
152+
],
153+
})
154+
})
155+
.then(response => {
156+
if (!response.ok) throw new Error('Network response was not ok.');
157+
return response.json();
158+
})
159+
.then(data => {
160+
const responseMessageData = data.choices[0].message.content;
161+
const responseJsonStr = responseMessageData.substring(
162+
responseMessageData.indexOf("{"),
163+
responseMessageData.lastIndexOf("}") + 1
164+
);
165+
const responseJsonData = JSON5.parse(responseJsonStr);
166+
displayQuote(responseJsonData.quote, responseJsonData.author);
167+
addToHistory(responseJsonData.quote, responseJsonData.author, category);
168+
shareButtons.classList.remove('hidden');
169+
saveButton.classList.remove('hidden');
170+
})
171+
.catch(error => {
172+
console.error('Error:', error);
173+
resultContainer.textContent = 'Failed to generate a quote. Please try again.';
174+
shareButtons.classList.add('hidden');
175+
saveButton.classList.add('hidden');
176+
})
177+
.finally(() => {
178+
toggleButtonState();
123179
});
124-
if (!response.ok) throw new Error('Network response was not ok.');
125-
const data = await response.json();
126-
const responseMessageData = data.choices[0].message.content;
127-
const responseJsonStr = responseMessageData.substring(
128-
responseMessageData.indexOf("{"),
129-
responseMessageData.lastIndexOf("}") + 1
130-
);
131-
const responseJsonData = JSON5.parse(responseJsonStr);
132-
displayQuote(responseJsonData.quote, responseJsonData.author);
133-
shareButtons.classList.remove('hidden');
134-
saveButton.classList.remove('hidden');
135-
} catch (error) {
136-
console.error('Error:', error);
137-
resultContainer.textContent = 'Failed to generate a quote. Please try again.';
138-
shareButtons.classList.add('hidden');
139-
saveButton.classList.add('hidden');
140-
} finally {
141-
toggleButtonState();
142-
}
143180
}
181+
144182
function toggleButtonState() {
145183
const button = document.getElementById('generate-quote');
146184
button.disabled = !button.disabled;
147185
button.textContent = button.disabled ? "Generating..." : "Generate Quote";
148186
}
187+
149188
function displayQuote(quote, author) {
150189
const resultContainer = document.getElementById('result');
151190
resultContainer.innerHTML = `"${quote}"<br><span class="text-sm italic">- ${author || 'Unknown'}</span>`;
152191
resultContainer.classList.add('cursor-pointer');
153192
resultContainer.onclick = () => copyToClipboard(`"${quote}" - ${author || 'Unknown'}`);
154193
}
194+
155195
function copyToClipboard(text) {
156196
navigator.clipboard.writeText(text).then(() => {
157197
alert('Quote copied to clipboard!');
@@ -160,22 +200,26 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
160200
alert('Failed to copy quote.');
161201
});
162202
}
203+
163204
function toggleCollapse() {
164205
const content = document.getElementById("howToUseContent");
165206
const icon = document.getElementById("collapseIcon");
166207
content.classList.toggle("hidden");
167208
icon.textContent = content.classList.contains("hidden") ? "+" : "-";
168209
}
210+
169211
function shareOnTwitter() {
170212
const quote = document.getElementById('result').innerText;
171213
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(quote)}`;
172214
window.open(twitterUrl, '_blank');
173215
}
216+
174217
function shareOnFacebook() {
175218
const quote = document.getElementById('result').innerText;
176219
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(quote)}`;
177220
window.open(facebookUrl, '_blank');
178221
}
222+
179223
function saveQuote() {
180224
const quote = document.getElementById('result').innerText;
181225
let savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
@@ -184,6 +228,7 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
184228
updateSavedQuotesList();
185229
alert('Quote saved successfully!');
186230
}
231+
187232
function updateSavedQuotesList() {
188233
const savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
189234
const savedQuotesList = document.getElementById('saved-quotes-list');
@@ -206,13 +251,59 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
206251
savedQuotesContainer.classList.add('hidden');
207252
}
208253
}
254+
209255
function deleteQuote(index) {
210256
let savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
211257
savedQuotes.splice(index, 1);
212258
localStorage.setItem('savedQuotes', JSON.stringify(savedQuotes));
213259
updateSavedQuotesList();
214260
}
215-
updateSavedQuotesList();
261+
262+
function addToHistory(quote, author, category) {
263+
quoteHistory.unshift({ quote, author, category, timestamp: new Date().toISOString() });
264+
if (quoteHistory.length > 10) quoteHistory.pop();
265+
localStorage.setItem('quoteHistory', JSON.stringify(quoteHistory));
266+
updateHistoryList();
267+
}
268+
269+
function updateHistoryList() {
270+
const historyList = document.getElementById('history-list');
271+
if (historyList) {
272+
historyList.innerHTML = '';
273+
quoteHistory.forEach((item, index) => {
274+
const li = document.createElement('li');
275+
li.innerHTML = `
276+
<p class="font-semibold">"${item.quote}" - ${item.author || 'Unknown'}</p>
277+
<p class="text-sm text-gray-600 dark:text-gray-400">Category: ${item.category}</p>
278+
<p class="text-xs text-gray-500 dark:text-gray-500">${new Date(item.timestamp).toLocaleString()}</p>
279+
`;
280+
li.classList.add('mb-4', 'pb-2', 'border-b', 'border-gray-200', 'dark:border-gray-700');
281+
historyList.appendChild(li);
282+
});
283+
}
284+
}
285+
286+
function loadHistory() {
287+
const storedHistory = localStorage.getItem('quoteHistory');
288+
if (storedHistory) {
289+
quoteHistory = JSON.parse(storedHistory);
290+
updateHistoryList();
291+
}
292+
}
293+
294+
function toggleHistoryView() {
295+
const historySection = document.getElementById('quote-history');
296+
historySection.classList.toggle('hidden');
297+
}
298+
299+
document.addEventListener('DOMContentLoaded', () => {
300+
updateSavedQuotesList();
301+
loadHistory();
302+
setRandomCategory();
303+
});
304+
305+
// Initial quote generation on page load
306+
generateQuote();
216307
</script>
217308
<script src="../sidebar.js"></script>
218309
</body>

0 commit comments

Comments
 (0)