Following elements of HTML 4.01 are no more a part of HTML 5:
</p> <p><strike></p> <p><tt></p> </div> <!-- Tags --> <div class="qa-tags"> <a href="https://grownwith.us/interview/html/" class="tag">Html</a> </div> <!-- Actions --> <div class="qa-actions"> <div class="action-links"> <button class="action-link share-btn" onclick="toggleSharePopup('question')">Share</button> <button class="action-link">Follow</button> <button class="action-link">Flag</button> </div> <div class="author-card"> <div class="author-time">asked Apr 15, 2023 at 00:18</div> <div class="author-info"> <img src="https://cdn.businesssoluter.com/gws/account/1/profile/photo/brijesh.png" alt="Brijesh Patel" class="author-avatar author-avatar-img"> <div class="author-details"> <a href="/brijesh/" class="author-name"> Brijesh Patel </a> </div> </div> </div> </div> <!-- Share Popup --> <div class="share-popup" id="share-popup-question"> <div class="share-popup-header">Share this question</div> <div class="share-link-box" onclick="copyLink('')"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span>Copy link</span> </div> <div class="share-social"> <a class="share-social-btn facebook" onclick="shareOn('facebook', '')" title="Share on Facebook"> <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> </a> <a class="share-social-btn twitter" onclick="shareOn('twitter', '')" title="Share on Twitter"> <svg viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg> </a> <a class="share-social-btn linkedin" onclick="shareOn('linkedin', '')" title="Share on LinkedIn"> <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> </a> <a class="share-social-btn whatsapp" onclick="shareOn('whatsapp', '')" title="Share on WhatsApp"> <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg> </a> </div> </div> <!-- Question Comments --> <div class="comments-section"> <button class="comments-toggle" onclick="toggleQuestionComments()"> 💬 <span id="questionCommentCount">0</span> comments </button> <div class="comments-list" id="questionComments" style="display: none;"></div> <a href="/account/login?redirect=%2Finterview%2Fhtml%2Fwhich-elements-of-html-4-01-are-no-more-a-part-of-html5%2F" class="add-comment-link">Sign in to add a comment</a> </div> </div> </div> </div> <!-- Answers Card --> <div class="qa-card"> <div class="qa-card-header"> <h2 class="qa-card-title">0 Answers</h2> <span class="answers-count-badge">0</span> </div> <div style="padding: 24px;"> <div class="no-answer-notice"> <strong>📝 No answers yet!</strong> <p>Be the first to answer this interview question.</p> </div> </div> </div> <!-- Your Answer Section --> <div class="your-answer-section"> <h2 class="your-answer-title">Your Answer</h2> <p style="color: var(--text-gray);"> <a href="/account/login?redirect=%2Finterview%2Fhtml%2Fwhich-elements-of-html-4-01-are-no-more-a-part-of-html5%2F" style="color: var(--link-blue);">Sign in</a> to post your answer and help the community. </p> </div> <!-- Hidden question ID for JavaScript --> <input type="hidden" id="questionId" value="371"> <!-- Navigation --> <div class="nav-buttons"> <a href="https://grownwith.us/interview/html/" class="nav-btn"> ← Back to Html </a> <a href="https://grownwith.us/interview/" class="nav-btn nav-btn-secondary"> Browse Categories → </a> </div> </div> </div> <!-- Environment-aware configuration --> <script src="/pub/js/config.js"></script> <!-- Bootstrap JS --> <script src="/pub/js/bootstrap.bundle.min.js"></script> <script> // ==================== INTERVIEW COMMENTS & EDIT FUNCTIONALITY ==================== const questionId = document.getElementById('questionId')?.value; const COMMENTS_API = '/api/interview/v1'; const currentUserId = null; // Load comments on page load document.addEventListener('DOMContentLoaded', function() { if (questionId) { loadQuestionCommentCount(); // Load answer comments counts document.querySelectorAll('[id^="answerCommentCount-"]').forEach(el => { const answerId = el.id.replace('answerCommentCount-', ''); loadAnswerCommentCount(answerId); }); } }); // Load question comment count async function loadQuestionCommentCount() { const countSpan = document.getElementById('questionCommentCount'); try { const response = await fetch(`${COMMENTS_API}/comments/count?question_id=${questionId}`); const data = await response.json(); if (data.success) { countSpan.textContent = data.data.count || 0; } } catch (error) { console.error('Failed to load question comment count:', error); } } // Load question comments async function loadQuestionComments() { const commentsList = document.getElementById('questionComments'); const countSpan = document.getElementById('questionCommentCount'); try { const response = await fetch(`${COMMENTS_API}/comments?question_id=${questionId}`); const data = await response.json(); if (data.success && data.data.comments) { const comments = data.data.comments; const total = data.data.pagination.total_items; if (countSpan) { countSpan.textContent = total; } if (comments.length > 0) { commentsList.innerHTML = comments.map(renderComment).join(''); } else { commentsList.innerHTML = '<div style="color: #9199a1; font-size: 13px;">No comments yet.</div>'; } } } catch (error) { console.error('Failed to load comments:', error); commentsList.innerHTML = '<div style="color: #d1383d; font-size: 13px;">Failed to load comments.</div>'; } } // Toggle question comments visibility function toggleQuestionComments() { const commentsList = document.getElementById('questionComments'); if (commentsList.style.display === 'none') { commentsList.style.display = 'block'; loadQuestionComments(); } else { commentsList.style.display = 'none'; } } // Show question comment form function showQuestionCommentForm() { const form = document.getElementById('questionCommentForm'); const link = document.getElementById('questionAddCommentLink'); form.classList.add('active'); if (link) link.style.display = 'none'; } // Hide question comment form function hideQuestionCommentForm() { const form = document.getElementById('questionCommentForm'); const link = document.getElementById('questionAddCommentLink'); form.classList.remove('active'); document.getElementById('questionCommentInput').value = ''; if (link) link.style.display = 'inline'; } // Load answer comment count async function loadAnswerCommentCount(answerId) { const countSpan = document.getElementById(`answerCommentCount-${answerId}`); try { const response = await fetch(`${COMMENTS_API}/comments/count?question_id=${questionId}&answer_id=${answerId}`); const data = await response.json(); if (data.success) { countSpan.textContent = data.data.count || 0; } } catch (error) { console.error('Failed to load comment count:', error); } } // Load answer comments async function loadAnswerComments(answerId) { const commentsList = document.getElementById(`answerComments-${answerId}`); try { const response = await fetch(`${COMMENTS_API}/comments?question_id=${questionId}&answer_id=${answerId}`); const data = await response.json(); if (data.success && data.data.comments) { const comments = data.data.comments; if (comments.length > 0) { commentsList.innerHTML = comments.map(renderComment).join(''); } else { commentsList.innerHTML = '<div style="color: #9199a1; font-size: 13px; padding: 8px 0;">No comments yet.</div>'; } } } catch (error) { console.error('Failed to load comments:', error); } } // Render a single comment function renderComment(comment) { const date = new Date(comment.created_at); const formattedDate = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined }); const isOwner = currentUserId && comment.account_id == currentUserId; const isEdited = comment.updated_at && comment.updated_at !== comment.created_at; const authorName = comment.author_name || comment.author_username || 'User'; const authorUsername = comment.author_username || ''; const authorPhoto = comment.author_photo; const authorInitial = authorName.charAt(0).toUpperCase(); // Profile photo or initial avatar const avatarHtml = authorPhoto ? `<img src="${escapeHtml(authorPhoto)}" alt="${escapeHtml(authorName)}" class="comment-avatar">` : `<span class="comment-avatar comment-avatar-initial">${authorInitial}</span>`; return ` <div class="comment-item" data-comment-id="${comment.id}"> <div class="comment-content-wrapper"> ${avatarHtml} <span class="comment-text" id="comment-text-${comment.id}"> ${escapeHtml(comment.content)} – <a href="/${escapeHtml(authorUsername)}/" class="comment-author-link">${escapeHtml(authorName)}</a> ${isEdited ? '<span class="comment-edited">(edited)</span>' : ''} </span> <span class="comment-meta">${formattedDate}</span> ${isOwner ? ` <span class="comment-actions-inline"> <button class="comment-action-link" onclick="startEditComment(${comment.id})">edit</button> <button class="comment-action-link delete" onclick="deleteComment(${comment.id})">delete</button> </span> ` : ''} </div> ${isOwner ? ` <div class="edit-comment-form" id="edit-form-${comment.id}"> <textarea id="edit-input-${comment.id}">${escapeHtml(comment.content)}</textarea> <div class="comment-form-actions"> <button type="button" class="comment-btn comment-btn-secondary" onclick="cancelEditComment(${comment.id})">Cancel</button> <button type="button" class="comment-btn comment-btn-primary" onclick="saveEditComment(${comment.id})">Save</button> </div> </div> ` : ''} </div> `; } // Submit question comment async function submitQuestionComment() { const input = document.getElementById('questionCommentInput'); const content = input.value.trim(); if (!content) { alert('Please enter a comment.'); return; } try { const response = await fetch(`${COMMENTS_API}/comments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ question_id: questionId, content: content }) }); const data = await response.json(); if (data.success) { input.value = ''; hideQuestionCommentForm(); loadQuestionComments(); loadQuestionCommentCount(); } else { alert(data.error || 'Failed to post comment.'); } } catch (error) { console.error('Failed to post comment:', error); alert('Network error. Please try again.'); } } // Toggle answer comments visibility function toggleAnswerComments(answerId) { const commentsList = document.getElementById(`answerComments-${answerId}`); if (commentsList.style.display === 'none') { commentsList.style.display = 'block'; loadAnswerComments(answerId); } else { commentsList.style.display = 'none'; } } // Show answer comment form function showAnswerCommentForm(answerId) { const form = document.getElementById(`answerCommentForm-${answerId}`); form.classList.add('active'); } // Hide answer comment form function hideAnswerCommentForm(answerId) { const form = document.getElementById(`answerCommentForm-${answerId}`); form.classList.remove('active'); document.getElementById(`answerCommentInput-${answerId}`).value = ''; } // Submit answer comment async function submitAnswerComment(answerId) { const input = document.getElementById(`answerCommentInput-${answerId}`); const content = input.value.trim(); if (!content) { alert('Please enter a comment.'); return; } try { const response = await fetch(`${COMMENTS_API}/comments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ question_id: questionId, answer_id: answerId, content: content }) }); const data = await response.json(); if (data.success) { input.value = ''; hideAnswerCommentForm(answerId); loadAnswerComments(answerId); loadAnswerCommentCount(answerId); } else { alert(data.error || 'Failed to post comment.'); } } catch (error) { console.error('Failed to post comment:', error); alert('Network error. Please try again.'); } } // Start editing a comment function startEditComment(commentId) { const textEl = document.getElementById(`comment-text-${commentId}`); const editForm = document.getElementById(`edit-form-${commentId}`); const editInput = document.getElementById(`edit-input-${commentId}`); const wrapper = textEl?.closest('.comment-content-wrapper'); if (textEl && editForm && wrapper) { wrapper.style.display = 'none'; editForm.classList.add('active'); editInput.focus(); } } // Cancel editing function cancelEditComment(commentId) { const textEl = document.getElementById(`comment-text-${commentId}`); const editForm = document.getElementById(`edit-form-${commentId}`); const wrapper = textEl?.closest('.comment-content-wrapper'); if (textEl && editForm && wrapper) { wrapper.style.display = 'flex'; editForm.classList.remove('active'); } } // Save edited comment async function saveEditComment(commentId) { const editInput = document.getElementById(`edit-input-${commentId}`); const newContent = editInput.value.trim(); if (!newContent) { alert('Comment cannot be empty.'); return; } try { const response = await fetch(`${COMMENTS_API}/comments/${commentId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content: newContent }) }); const data = await response.json(); if (data.success) { loadQuestionComments(); // Also reload any visible answer comments document.querySelectorAll('[id^="answerComments-"]').forEach(el => { if (el.style.display !== 'none') { const answerId = el.id.replace('answerComments-', ''); loadAnswerComments(answerId); } }); } else { alert(data.error || 'Failed to update comment.'); } } catch (error) { console.error('Failed to update comment:', error); alert('Network error. Please try again.'); } } // Delete comment async function deleteComment(commentId) { if (!confirm('Are you sure you want to delete this comment?')) { return; } try { const response = await fetch(`${COMMENTS_API}/comments/${commentId}`, { method: 'DELETE' }); const data = await response.json(); if (data.success) { loadQuestionComments(); loadQuestionCommentCount(); // Also reload any visible answer comments document.querySelectorAll('[id^="answerComments-"]').forEach(el => { if (el.style.display !== 'none') { const answerId = el.id.replace('answerComments-', ''); loadAnswerComments(answerId); loadAnswerCommentCount(answerId); } }); } else { alert(data.error || 'Failed to delete comment.'); } } catch (error) { console.error('Failed to delete comment:', error); alert('Network error. Please try again.'); } } // Helper function to escape HTML function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // ==================== INLINE EDIT QUESTION/ANSWER FUNCTIONALITY ==================== // Start editing question (inline) function startQuestionEdit() { const textDisplay = document.getElementById('question-text-display'); const editForm = document.getElementById('question-edit-form'); if (textDisplay && editForm) { textDisplay.style.display = 'none'; editForm.style.display = 'block'; document.getElementById('question-edit-title').focus(); } } // Cancel question edit function cancelQuestionEdit() { const textDisplay = document.getElementById('question-text-display'); const editForm = document.getElementById('question-edit-form'); if (textDisplay && editForm) { textDisplay.style.display = 'block'; editForm.style.display = 'none'; } } // Save question edit (inline) async function saveQuestionEdit() { const titleInput = document.getElementById('question-edit-title'); const detailInput = document.getElementById('question-edit-detail'); const title = titleInput.value.trim(); const details = detailInput.value.trim(); if (!title) { alert('Question title is required.'); return; } try { const response = await fetch(`${COMMENTS_API}/questions/${questionId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: title, details: details }) }); const data = await response.json(); if (data.success) { // Update the page content document.querySelector('.page-title').textContent = title; document.getElementById('question-text-display').innerHTML = details || title; // Hide edit form cancelQuestionEdit(); } else { alert(data.message || data.error || 'Failed to update question.'); } } catch (error) { console.error('Failed to update question:', error); alert('Network error. Please try again.'); } } // Start editing answer (inline) function startAnswerEdit(answerId) { const textDisplay = document.getElementById(`answer-text-${answerId}`); const editForm = document.getElementById(`answer-edit-form-${answerId}`); if (textDisplay && editForm) { textDisplay.style.display = 'none'; editForm.style.display = 'block'; document.getElementById(`answer-edit-input-${answerId}`).focus(); } } // Cancel answer edit function cancelAnswerEdit(answerId) { const textDisplay = document.getElementById(`answer-text-${answerId}`); const editForm = document.getElementById(`answer-edit-form-${answerId}`); if (textDisplay && editForm) { textDisplay.style.display = 'block'; editForm.style.display = 'none'; } } // Save answer edit (inline) async function saveAnswerEdit(answerId) { const input = document.getElementById(`answer-edit-input-${answerId}`); const detail = input.value.trim(); if (!detail) { alert('Answer content is required.'); return; } try { const response = await fetch(`${COMMENTS_API}/answers/${answerId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ detail: detail }) }); const data = await response.json(); if (data.success) { // Update the page content document.getElementById(`answer-text-${answerId}`).innerHTML = detail; // Hide edit form cancelAnswerEdit(answerId); } else { alert(data.message || data.error || 'Failed to update answer.'); } } catch (error) { console.error('Failed to update answer:', error); alert('Network error. Please try again.'); } } // ==================== SUBMIT ANSWER FUNCTIONALITY ==================== // Submit new answer async function submitAnswer(event) { event.preventDefault(); const input = document.getElementById('answerInput'); const detail = input.value.trim(); if (!detail) { alert('Please write your answer.'); return false; } try { const response = await fetch(`${COMMENTS_API}/questions/${questionId}/answers`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ detail: detail, account_id: currentUserId }) }); const data = await response.json(); if (data.success) { // Reload the page to show the new answer window.location.reload(); } else { alert(data.message || data.error || 'Failed to post answer.'); } } catch (error) { console.error('Failed to post answer:', error); alert('Network error. Please try again.'); } return false; } // ==================== VOTING FUNCTIONALITY ==================== // Vote on question or answer async function vote(type, id, direction) { if (!currentUserId) { window.location.href = '/account/login?redirect=' + encodeURIComponent(window.location.pathname); return; } try { const response = await fetch(`${COMMENTS_API}/votes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: type, id: id, direction: direction }) }); const data = await response.json(); if (data.success) { // Update vote count display const voteCountEl = document.getElementById(`${type}-votes-${id}`); if (voteCountEl && data.data?.vote_count !== undefined) { voteCountEl.textContent = data.data.vote_count; } // Visual feedback const voteBtn = event.target.closest('.vote-btn'); if (voteBtn) { if (data.data?.user_vote === direction) { voteBtn.classList.add('active'); } else { voteBtn.classList.remove('active'); } } } else { // Voting API might not exist yet - show message console.log('Voting feature:', data.message || 'Vote recorded locally'); } } catch (error) { console.log('Voting feature coming soon'); } } // ==================== ACCEPT ANSWER FUNCTIONALITY ==================== // Accept an answer (question owner only) async function acceptAnswer(answerId) { if (!currentUserId) { return; } try { const response = await fetch(`${COMMENTS_API}/answers/${answerId}/accept`, { method: 'POST', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.success) { // Reload to update accepted status display window.location.reload(); } else { alert(data.message || data.error || 'Failed to accept answer.'); } } catch (error) { console.log('Accept answer feature coming soon'); } } // ==================== SHARE FUNCTIONALITY ==================== // Close all share popups function closeAllSharePopups() { document.querySelectorAll('.share-popup').forEach(popup => { popup.classList.remove('active'); }); } // Toggle share popup function toggleSharePopup(id = 'question') { closeAllSharePopups(); const popup = document.getElementById(`share-popup-${id}`); if (popup) { popup.classList.toggle('active'); } } // Copy link to clipboard function copyLink(answerId = '') { let url = window.location.origin + window.location.pathname; if (answerId) { url += '#answer-' + answerId; } navigator.clipboard.writeText(url).then(() => { const popup = answerId ? document.getElementById(`share-popup-${answerId}`) : document.getElementById('share-popup-question'); const linkBox = popup?.querySelector('.share-link-box span'); if (linkBox) { const originalText = linkBox.textContent; linkBox.textContent = 'Copied!'; setTimeout(() => { linkBox.textContent = originalText; }, 2000); } }).catch(err => { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = url; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); alert('Link copied to clipboard!'); }); } // Share on social media function shareOn(platform, answerId = '') { let url = window.location.origin + window.location.pathname; if (answerId) { url += '#answer-' + answerId; } const title = document.querySelector('.page-title')?.textContent || 'Interview Question'; const encodedUrl = encodeURIComponent(url); const encodedTitle = encodeURIComponent(title); let shareUrl = ''; switch(platform) { case 'facebook': shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`; break; case 'twitter': shareUrl = `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`; break; case 'linkedin': shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`; break; case 'whatsapp': shareUrl = `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`; break; } if (shareUrl) { window.open(shareUrl, '_blank', 'width=600,height=400'); } closeAllSharePopups(); } // ==================== BOOKMARK FUNCTIONALITY ==================== // Toggle bookmark for question function toggleBookmarkQuestion() { if (!currentUserId) { window.location.href = '/account/login?redirect=' + encodeURIComponent(window.location.pathname); return; } const btn = event.target.closest('.bookmark-btn'); if (btn) { btn.classList.toggle('bookmarked'); // TODO: Implement API call to save bookmark console.log('Bookmark feature coming soon'); } } // Toggle bookmark for answer function toggleBookmarkAnswer(answerId) { if (!currentUserId) { window.location.href = '/account/login?redirect=' + encodeURIComponent(window.location.pathname); return; } const btn = event.target.closest('.bookmark-btn'); if (btn) { btn.classList.toggle('bookmarked'); // TODO: Implement API call to save bookmark console.log('Bookmark feature coming soon'); } } // ==================== FOLLOW FUNCTIONALITY ==================== // Toggle follow question function toggleFollowQuestion() { if (!currentUserId) { window.location.href = '/account/login?redirect=' + encodeURIComponent(window.location.pathname); return; } const btn = event.target.closest('.action-link'); if (btn) { const isFollowing = btn.textContent.includes('Following'); btn.textContent = isFollowing ? 'Follow' : 'Following'; // TODO: Implement API call to follow/unfollow console.log('Follow feature coming soon'); } } // ==================== CLOSE POPUPS ON OUTSIDE CLICK ==================== // Close popups when clicking outside document.addEventListener('click', function(e) { if (!e.target.closest('.share-btn') && !e.target.closest('.share-popup')) { closeAllSharePopups(); } }); </script> </body> </html>