feature/ Surprise challenge #2 - AI pun button added and basic suggestion integrated in the plans

src/views/partials/footer.ejs

@@ -1,3 +1,9 @@
+<div data-dial-init class="fixed end-6 bottom-20 group">
+    <button type="button" id="punButton" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+        <span class="sr-only">Get a Pun</span>
+    </button>
+</div>
 
 <footer class="mt-16">
     <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-800 border-t border-gray-700 p-6 text-center text-gray-400 text-sm">
@@ -8,6 +14,20 @@
 </footer>
 
 <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script>
+    const punButton = document.getElementById("punButton");
+    punButton.addEventListener("click", () => {
+        fetch("/pun")
+            .then(response => response.json())
+            .then(data => {
+                Swal.fire('Here is a pun!', data.pun, 'success');
+            })
+            .catch(error => {
+                console.error("Error fetching pun:", error);
+                Swal.fire('Error fetching pun', 'Please try again later', 'error');
+            });
+    });
+</script>
 </body>
 </html>