Okay, I will refactor the JavaScript code to address the issues and improve its structure. I'll also create the necessary HTML structure to support the script. Comment & Chat Example

Recipe Blog Post

Amazing Recipe

Recipe details go here...

Comments

Sign Up / Sign In

body { font-family: sans-serif; line-height: 1.6; margin: 20px; padding-bottom: 150px; /* Ensure space for fixed chat button */ } h1, h2 { color: #333; } /* Basic Section Styling */ section, footer, aside { margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; opacity: 0; /* Start hidden for animation */ transform: translateY(20px); /* Start slightly lower */ transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* Animation Class */ .visible { opacity: 1; transform: translateY(0); } /* Comment Form */ .form-comment { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; max-width: 500px; } .form-comment input, .form-comment textarea { padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .form-comment button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; align-self: flex-start; } .form-comment button:hover { background-color: #0056b3; } /* Comment List */ .comments-list { margin-top: 20px; } .comment-box, .reply-box { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px; background-color: #f9f9f9; display: flex; gap: 15px; } .comment-box.teal { border-left: 5px solid teal; } .avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .comment-user { font-weight: bold; margin-bottom: 5px; } .comment-date { font-size: 0.8em; color: #666; margin-left: 5px; } .comment-text { margin-bottom: 10px; } .reply-btn, .react-btn, .reactt-btn, .submit-reply { background: none; border: none; color: #007bff; cursor: pointer; padding: 5px; margin-right: 10px; font-size: 0.9em; } .react-btn, .reactt-btn { font-size: 1.2em; } .reply-btn:hover, .submit-reply:hover { text-decoration: underline; } .like-count, .heart-count { margin-right: 15px; font-size: 0.9em; color: #555; } .reply-form { margin-top: 10px; padding-left: 20px; /* Indent reply form */ } .reply-form textarea { width: calc(100% - 22px); /* Adjust width */ padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 5px; } .reply-form .submit-reply { background-color: #28a745; color: white; padding: 5px 10px; border-radius: 4px; } .reply-form .submit-reply:hover { background-color: #218838; text-decoration: none; } .reply-box { margin-left: 65px; /* Indent replies */ margin-top: 10px; background-color: #eef; border-left: 3px solid #007bff; padding: 10px; } /* Auth Section */ .auth-section form { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .auth-section input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .auth-section button { padding: 8px 12px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; } #signup-btn { background-color: #28a745; color: white; border-color: #28a745; } #popup { margin-top: 10px; padding: 10px; background-color: #e9f7ef; border: 1px solid #a6d7b7; border-radius: 4px; display: flex; /* Use flex for alignment */ align-items: center; gap: 10px; } #signout-btn { background-color: #dc3545; color: white; border-color: #dc3545; } /* Chat Button */ #chat-btn { position: fixed; bottom: 20px; right: 20px; background-color: #007bff; color: white; border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 24px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; } /* Chat Box */ #chat-box { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 400px; background-color: white; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; z-index: 1001; } .chat-header { background-color: #007bff; color: white; padding: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center; } #close-btn { background: none; border: none; color: white; font-size: 18px; cursor: pointer; } .chat-body { flex-grow: 1; padding: 10px; overflow-y: auto; background-color: #f9f9f9; } .user-message, .bot-message { margin-bottom: 10px; padding: 8px 12px; border-radius: 15px; max-width: 80%; } .user-message { background-color: #d1e7ff; align-self: flex-end; margin-left: auto; /* Push user messages to the right */ text-align: right; } .bot-message { background-color: #e2e3e5; align-self: flex-start; } .chat-footer { display: flex; padding: 10px; border-top: 1px solid #ccc; } #chat-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-right: 5px; } #send-btn { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } #send-btn:hover { background-color: #0056b3; } /* Footer */ .footeer { text-align: center; margin-top: 30px; padding: 15px; background-color: #f1f1f1; border-top: 1px solid #ddd; } /* View More Button */ .view-more-btn { padding: 8px 12px; cursor: pointer; background-color: #6c757d; color: white; border: none; border-radius: 4px; margin-top: 10px; } .view-more-btn:hover { background-color: #5a6268; } // --- Configuration --- const SUPABASE_URL = 'https://elmrsptdgphseecbapcx.supabase.co'; const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVsbXJzcHRkZ3Boc2VlY2JhcGN4Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDM5NDM2NjAsImV4cCI6MjA1OTUxOTY2MH0.tu-UdFwS5QkwbAZYqVuo2wrPXXzz15k-gF2Dp8PXvyc'; const COMMENT_LIMIT = 40; const REPLY_LIMIT = 30; // --- Initialize Supabase --- let supabase; try { if (window.supabase && typeof window.supabase.createClient === 'function') { supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); console.log("Supabase client initialized."); } else { console.error("Supabase client library not found. Make sure it's included in your HTML."); } } catch (error) { console.error("Error initializing Supabase client:", error); } // --- DOM Elements --- const commentForm = document.querySelector(".form-comment"); const commentList = document.querySelector(".comments-list"); const chatBtn = document.getElementById("chat-btn"); const chatBox = document.getElementById("chat-box"); const closeBtn = document.getElementById("close-btn"); const sendBtn = document.getElementById("send-btn"); const chatInput = document.getElementById("chat-input"); const chatBody = document.querySelector(".chat-body"); const signupBtn = document.getElementById("signup-btn"); const passwordInput = document.getElementById("password"); const emailInput = document.getElementById("email"); const userEmailSpan = document.getElementById("user-email"); const popup = document.getElementById("popup"); const signoutButton = document.getElementById("signout-btn"); const signupForm = document.getElementById("signup-form"); // --- Initialization Function --- function initializeApp() { initCommentHandling(); initScrollAnimations(); initChat(); initAuth(); checkInitialAuthState(); // Check auth state on load } // --- Comment Handling --- function initCommentHandling() { if (!commentForm || !commentList) { console.warn("Comment form or list element not found."); return; } commentForm.addEventListener("submit", handleCommentSubmit); // Add event listener to the list for delegated events (replies, likes) commentList.addEventListener("click", handleCommentListClick); } function handleCommentSubmit(event) { event.preventDefault(); const nameInput = commentForm.querySelector(".nme"); const emailInput = commentForm.querySelector(".emil"); const messageInput = commentForm.querySelector(".textarea"); const name = nameInput.value.trim(); const email = emailInput.value.trim(); const message = messageInput.value.trim(); if (name === "" || email === "" || message === "") { alert("Please fill in all fields before submitting!"); return; } if (message.length > COMMENT_LIMIT) { alert(`Comment must be ${COMMENT_LIMIT} characters or less.`); return; } // Ensure CryptoJS is available if (typeof CryptoJS === 'undefined' || !CryptoJS.MD5) { alert("CryptoJS library not loaded. Cannot generate avatar."); console.error("CryptoJS library not loaded."); return; } const emailHash = CryptoJS.MD5(email.toLowerCase()).toString(CryptoJS.enc.Hex); const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?s=50&d=identicon`; // Smaller avatar const date = new Date(); const formattedDate = `${date.getDate()} ${date.toLocaleString('default', { month: 'long' })}, ${date.getFullYear()}`; const commentBox = createCommentElement(name, avatarUrl, formattedDate, message); commentList.prepend(commentBox); // Add new comment to the top commentForm.reset(); } function createCommentElement(name, avatarUrl, formattedDate, message) { const commentBox = document.createElement("div"); commentBox.classList.add("comment-box", "teal"); // Use dataset to store name for replies if needed later commentBox.dataset.userName = name; commentBox.innerHTML = `

${name} - ${formattedDate}

${message}

0 0

`; return commentBox; } function handleCommentListClick(event) { const target = event.target; const commentBox = target.closest('.comment-box'); if (!commentBox) return; // Click wasn't inside a comment box if (target.classList.contains('reply-btn')) { toggleReplyForm(commentBox); } else if (target.classList.contains('submit-reply')) { handleReplySubmit(target, commentBox); } else if (target.classList.contains('react-btn')) { incrementCount(commentBox, '.like-count'); } else if (target.classList.contains('reactt-btn')) { incrementCount(commentBox, '.heart-count'); } } function toggleReplyForm(commentBox) { const replyForm = commentBox.querySelector(".reply-form"); if (replyForm) { replyForm.style.display = replyForm.style.display === "none" ? "block" : "none"; } } function handleReplySubmit(submitButton, commentBox) { const replyForm = submitButton.closest('.reply-form'); const replyTextarea = replyForm.querySelector("textarea"); const replyMessage = replyTextarea.value.trim(); const originalCommenterName = commentBox.dataset.userName || "User"; // Get name from data attribute if (replyMessage === "") { alert("Please enter a reply before submitting."); return; } if (replyMessage.length > REPLY_LIMIT) { alert(`Reply must be ${REPLY_LIMIT} characters or less.`); return; // Don't submit if too long } const replyBox = document.createElement("div"); replyBox.classList.add("reply-box"); // Displaying who the reply is to (original commenter) replyBox.innerHTML = `

Reply to ${originalCommenterName}: ${replyMessage}

`; // Find the replies container and append the new reply const repliesContainer = commentBox.querySelector('.replies-container'); if (repliesContainer) { repliesContainer.appendChild(replyBox); } else { // Fallback if container doesn't exist (shouldn't happen with createCommentElement) commentBox.querySelector('.comment-content').appendChild(replyBox); } replyTextarea.value = ""; // Clear textarea replyForm.style.display = "none"; // Hide form } function incrementCount(commentBox, countSelector) { const countSpan = commentBox.querySelector(countSelector); if (countSpan) { let currentCount = parseInt(countSpan.textContent) || 0; countSpan.textContent = currentCount + 1; } } // --- Scroll Animations --- function initScrollAnimations() { const animatedSections = document.querySelectorAll(".recipey, .footeer, .containerrr"); function checkVisibility() { animatedSections.forEach(section => { if (isElementInView(section)) { section.classList.add("visible"); } // Optional: remove class if it scrolls out of view // else { // section.classList.remove("visible"); // } }); } function isElementInView(element) { if (!element) return false; const rect = element.getBoundingClientRect(); return rect.top < window.innerHeight && rect.bottom >= 0; // Check if any part is visible } window.addEventListener("scroll", checkVisibility); window.addEventListener("resize", checkVisibility); // Re-check on resize // Initial check in case elements are already in view checkVisibility(); } // --- View More Toggle --- window.toggleContent = function() { // Make it globally accessible for inline onclick // Removed the alert("Hello!scribe my site!"); var container = document.querySelector('.containeaer'); var aside = document.querySelector('.sidebar'); var button = document.querySelector('.view-more-btn'); if (container && aside && button) { if (container.style.display === "none" || container.style.display === "") { container.style.display = "block"; // Use block or flex depending on desired layout aside.style.display = "block"; button.style.display = "none"; } // Note: No else case provided to hide it again, assuming it stays open. } else { console.warn("Toggle content elements not found."); } } // --- Chat Functionality --- function initChat() { if (!chatBtn || !chatBox || !closeBtn || !sendBtn || !chatInput || !chatBody) { console.warn("Chat elements not found."); return; } // Initially hide chat unless user is logged in (handled in auth state change) chatBtn.style.display = "none"; chatBox.style.display = "none"; chatBtn.addEventListener("click", () => { chatBox.style.display = "flex"; // Use flex as the container is flexbox chatBtn.style.display = "none"; }); closeBtn.addEventListener("click", () => { chatBox.style.display = "none"; // Only show chat button again if user is logged in checkInitialAuthState(); // Re-check auth state to decide if button should show }); sendBtn.addEventListener("click", sendMessage); chatInput.addEventListener("keypress", (event) => { if (event.key === "Enter") { event.preventDefault(); // Prevent form submission if chat is in a form sendMessage(); } }); // Close chat if clicking outside document.addEventListener("click", (event) => { if (chatBox.style.display === "flex" && // Check if chatbox is open !chatBox.contains(event.target) && event.target !== chatBtn) { chatBox.style.display = "none"; checkInitialAuthState(); // Re-check auth state } }); } function sendMessage() { const userMessage = chatInput.value.trim(); if (userMessage) { appendMessage(userMessage, "user-message"); chatInput.value = ""; // Clear input // Simulate bot response setTimeout(() => { appendMessage("Bot: Thanks for your message! How can I assist?", "bot-message"); }, 1000); } } function appendMessage(message, type) { if (!chatBody) return; const messageDiv = document.createElement("div"); messageDiv.classList.add(type); // 'user-message' or 'bot-message' messageDiv.innerHTML = `

${escapeHTML(message)}

`; // Sanitize message chatBody.appendChild(messageDiv); chatBody.scrollTop = chatBody.scrollHeight; // Scroll to bottom } // Simple HTML escaping function function escapeHTML(str) { const div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; } // --- Authentication --- function initAuth() { if (!supabase) { console.error("Supabase client not available for Auth initialization."); return; } if (signupForm && passwordInput && emailInput) { signupForm.addEventListener("submit", handleSignup); } else { console.warn("Signup form elements not found."); } if (signoutButton) { signoutButton.addEventListener("click", handleSignout); } else { console.warn("Signout button not found."); } // Listen for auth state changes (login, logout) supabase.auth.onAuthStateChange((event, session) => { console.log("Auth state changed:", event, session); updateUIBasedOnAuthState(session); }); } async function handleSignup(event) { event.preventDefault(); if (!supabase) { alert("Authentication service is not available."); return; } const email = emailInput.value.trim(); const password = passwordInput.value.trim(); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { alert("Please enter a valid email address."); return; } if (!password) { alert("Please enter a password."); return; } if (password.length < 6) { alert("Password should be at least 6 characters."); // Supabase default minimum return; } try { const { data, error } = await supabase.auth.signUp({ email, password }); if (error) throw error; // Don't update UI immediately on signup, wait for confirmation or auto-login alert("Signup successful! Check your email to confirm your account."); // Optionally clear form // signupForm.reset(); } catch (error) { console.error('Signup Error:', error.message); alert(`Signup failed: ${error.message}`); } } async function handleSignout() { if (!supabase) { alert("Authentication service is not available."); return; } try { const { error } = await supabase.auth.signOut(); if (error) throw error; // UI update will be handled by onAuthStateChange listener console.log("Signed out successfully."); } catch (error) { console.error('Error signing out:', error.message); alert(`Sign out failed: ${error.message}`); } } // Make Google login globally accessible window.loginWithGoogle = async function() { if (!supabase) { alert("Authentication service is not available."); return; } try { const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' }); if (error) throw error; // Redirect happens automatically, UI update via onAuthStateChange on return } catch (error) { console.error('Google login error:', error.message); alert(`Google login failed: ${error.message}`); } } function updateUIBasedOnAuthState(session) { if (session && session.user) { // User is logged in if (userEmailSpan) userEmailSpan.textContent = session.user.email || "User"; if (popup) popup.style.display = "flex"; if (signoutButton) signoutButton.style.display = "block"; if (chatBtn) chatBtn.style.display = "block"; // Show chat button for logged-in users if (signupForm) signupForm.style.display = "none"; // Hide signup form // Hide Google login button too const googleLoginButton = document.querySelector('button[onclick="loginWithGoogle()"]'); if (googleLoginButton) googleLoginButton.style.display = 'none'; } else { // User is logged out if (userEmailSpan) userEmailSpan.textContent = ""; if (popup) popup.style.display = "none"; if (signoutButton) signoutButton.style.display = "none"; if (chatBtn) chatBtn.style.display = "none"; // Hide chat button if (chatBox) chatBox.style.display = "none"; // Hide chat box if open if (signupForm) signupForm.style.display = "flex"; // Show signup form // Show Google login button const googleLoginButton = document.querySelector('button[onclick="loginWithGoogle()"]'); if (googleLoginButton) googleLoginButton.style.display = 'inline-block'; // Or 'block' } } async function checkInitialAuthState() { if (!supabase) return; try { // Use getSession instead of getUser to check if there's an active session const { data: { session }, error } = await supabase.auth.getSession(); if (error) throw error; console.log("Initial auth session:", session); updateUIBasedOnAuthState(session); // Update UI based on initial state } catch (error) { console.error("Error checking initial auth state:", error); updateUIBasedOnAuthState(null); // Assume logged out on error } } // --- Global Event Listener --- document.addEventListener("DOMContentLoaded", initializeApp); This sets up the HTML structure, basic CSS for layout and animations, and the refactored JavaScript. **Key changes in JavaScript:** 1. **Supabase Initialization:** Moved to the top and wrapped in a try-catch block with checks. 2. **Modular Functions:** Code is broken down into `initCommentHandling`, `initScrollAnimations`, `initChat`, `initAuth`, etc. 3. **Single `DOMContentLoaded`:** All initialization happens within one `DOMContentLoaded` listener calling `initializeApp`. 4. **Event Delegation:** Used event delegation for handling clicks within the dynamically added comments (replies, likes). 5. **Clearer Element Selection:** DOM elements are selected once at the top. 6. **Auth Handling:** Includes signup, signout, Google OAuth placeholders, and UI updates based on auth state using `onAuthStateChange` and an initial check. 7. **Chat Logic:** Improved slightly, including hiding/showing based on auth state and closing on outside click. 8. **`toggleContent`:** Removed the alert. Made globally accessible via `window.toggleContent`. 9. **Error Handling:** Added basic checks for element existence and Supabase/CryptoJS availability. 10. **Reply Structure:** Added a dedicated `.replies-container` within each comment for better structure. Replies now show "Reply to [Original Commenter Name]". 11. **HTML Escaping:** Added basic escaping for chat messages to prevent potential XSS. 12. **Scroll Animation:** Added resize listener and initial check. Remember to configure your Supabase project settings (like enabling Google provider and setting redirect URLs) if you intend to use the OAuth functionality.