- add random category

- add button to save and delete quotes from the localstorage

Author: TobiasMue91

tools/daily_quote_generator.html

@@ -16,6 +16,7 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
     <div class="mb-4">
         <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category:</label>
         <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">
+            <option value="random">Random</option>
             <option value="inspirational">Inspirational</option>
             <option value="motivational">Motivational</option>
             <option value="success">Success</option>
@@ -31,8 +32,8 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
     </div>
     <div class="mb-4">
         <label for="creativity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Creativity:</label>
-        <input type="range" id="creativity" min="0" max="100" step="5" value="50" class="w-full">
-        <div id="creativity-value" class="text-center text-sm text-gray-600 dark:text-gray-400">50%</div>
+        <input type="range" id="creativity" min="0" max="100" step="5" value="30" class="w-full">
+        <div id="creativity-value" class="text-center text-sm text-gray-600 dark:text-gray-400">30%</div>
     </div>
     <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>
     <div id="result" class="mt-4 text-center text-sm font-medium text-gray-800 dark:text-white"></div>
@@ -46,38 +47,63 @@ <h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Da
             Share
         </button>
     </div>
+    <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>
+    <div id="saved-quotes" class="mt-4 text-sm text-gray-800 dark:text-white hidden">
+        <h3 class="font-bold mb-2">Saved Quotes:</h3>
+        <ul id="saved-quotes-list" class="list-disc pl-5"></ul>
+    </div>
     <div id="howToUseSection" class="my-6">
         <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">
             <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
             <span id="collapseIcon" class="text-xl">+</span>
         </button>
         <div id="howToUseContent" class="hidden">
             <div class="p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300">
-                <p class="mb-2">Generate and share inspiring daily quotes with ease:</p>
+                <p class="mb-2">Generate, share, and save inspiring daily quotes with ease:</p>
                 <ul class="list-disc pl-5 space-y-1">
-                    <li>Select a category from the dropdown menu.</li>
+                    <li>Select a category or leave it as "Random" for variety.</li>
                     <li>Optionally, enter an author's name for a quote from that person.</li>
                     <li>Adjust the "Creativity" slider to control the uniqueness of the generated quotes.</li>
                     <li>Click the "Generate Quote" button to create your quote.</li>
                     <li>Click on the generated quote to copy it to your clipboard.</li>
                     <li>Use the share buttons to post the quote on social media.</li>
+                    <li>Save your favorite quotes for later reference.</li>
                 </ul>
             </div>
         </div>
     </div>
 </div>
 <script>
+    const categories = ['inspirational', 'motivational', 'success', 'life', 'love', 'wisdom', 'humor'];
+    let userSelectedCategory = false;
     document.getElementById('creativity').addEventListener('input', function() {
         const creativityValue = this.value;
         document.getElementById('creativity-value').textContent = `${creativityValue}%`;
     });
+    document.getElementById('category').addEventListener('change', function() {
+        userSelectedCategory = this.value !== 'random';
+    });
     document.getElementById('generate-quote').addEventListener('click', generateQuote);
+    document.getElementById('save-quote').addEventListener('click', saveQuote);
+    function getRandomCategory() {
+        return categories[Math.floor(Math.random() * categories.length)];
+    }
+    function setRandomCategory() {
+        if (!userSelectedCategory) {
+            document.getElementById('category').value = 'random';
+        }
+    }
+    setRandomCategory();
     async function generateQuote() {
-        const category = document.getElementById('category').value;
+        let category = document.getElementById('category').value;
+        if (category === 'random') {
+            category = getRandomCategory();
+        }
         const author = document.getElementById('author').value;
         const creativity = document.getElementById('creativity').value / 100;
         const resultContainer = document.getElementById('result');
         const shareButtons = document.getElementById('share-buttons');
+        const saveButton = document.getElementById('save-quote');
         toggleButtonState();
         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"}`;
         const userMessage = `Generate a ${category} quote${author ? ` by ${author}` : ''}.`;
@@ -105,10 +131,12 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
             const responseJsonData = JSON5.parse(responseJsonStr);
             displayQuote(responseJsonData.quote, responseJsonData.author);
             shareButtons.classList.remove('hidden');
+            saveButton.classList.remove('hidden');
         } catch (error) {
             console.error('Error:', error);
             resultContainer.textContent = 'Failed to generate a quote. Please try again.';
             shareButtons.classList.add('hidden');
+            saveButton.classList.add('hidden');
         } finally {
             toggleButtonState();
         }
@@ -148,6 +176,43 @@ <h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
         const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(quote)}`;
         window.open(facebookUrl, '_blank');
     }
+    function saveQuote() {
+        const quote = document.getElementById('result').innerText;
+        let savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
+        savedQuotes.push(quote);
+        localStorage.setItem('savedQuotes', JSON.stringify(savedQuotes));
+        updateSavedQuotesList();
+        alert('Quote saved successfully!');
+    }
+    function updateSavedQuotesList() {
+        const savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
+        const savedQuotesList = document.getElementById('saved-quotes-list');
+        const savedQuotesContainer = document.getElementById('saved-quotes');
+        savedQuotesList.innerHTML = '';
+        if (savedQuotes.length > 0) {
+            savedQuotes.forEach((quote, index) => {
+                const li = document.createElement('li');
+                li.textContent = quote;
+                li.classList.add('mb-2');
+                const deleteButton = document.createElement('button');
+                deleteButton.textContent = 'Delete';
+                deleteButton.classList.add('ml-2', 'text-red-600', 'hover:text-red-800');
+                deleteButton.onclick = () => deleteQuote(index);
+                li.appendChild(deleteButton);
+                savedQuotesList.appendChild(li);
+            });
+            savedQuotesContainer.classList.remove('hidden');
+        } else {
+            savedQuotesContainer.classList.add('hidden');
+        }
+    }
+    function deleteQuote(index) {
+        let savedQuotes = JSON.parse(localStorage.getItem('savedQuotes')) || [];
+        savedQuotes.splice(index, 1);
+        localStorage.setItem('savedQuotes', JSON.stringify(savedQuotes));
+        updateSavedQuotesList();
+    }
+    updateSavedQuotesList();
 </script>
 <script src="../sidebar.js"></script>
 </body>