Open Tool`; toolGrid.appendChild(card); }); // 2. MODAL HANDLING toolGrid.addEventListener('click', (e) => { if (e.target.classList.contains('btn')) openModal(e.target.getAttribute('data-tool-id')); }); const closeModal = () => modal.classList.remove('show'); closeBtn.onclick = closeModal; modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); function openModal(toolId) { const tool = tools.find(t => t.id === toolId); modalHost.innerHTML = getToolHTML(toolId, tool.title); modal.classList.add('show'); attachToolListener(toolId); } // 3. GENERATE HTML FOR EACH TOOL function getToolHTML(toolId, title) { let html = `

${title}

`; if (toolId === 'densityChecker') { html += ` Check Density `; } else { html += ` `; } html += ``; return html; } // 4. ATTACH LISTENERS AND TOOL LOGIC function attachToolListener(toolId) { const actionBtn = modal.querySelector('#action-btn'); const resultDiv = modal.querySelector('#tool-result-output'); const tool = tools.find(t => t.id === toolId); if (tool.type === 'functional') { actionBtn.onclick = () => { const text = modal.querySelector('#text-input').value; if (!text.trim()) { resultDiv.innerHTML = '

Please enter some text.

'; return; } const words = text.toLowerCase().match(/\b[\w']+\b/g) || []; const totalWords = words.length; if (totalWords === 0) return; const frequencies = {}; words.forEach(word => frequencies[word] = (frequencies[word] || 0) + 1); for (let i = 0; i < words.length - 1; i++) { frequencies[`${words[i]} ${words[i+1]}`] = (frequencies[`${words[i]} ${words[i+1]}`] || 0) + 1; } for (let i = 0; i < words.length - 2; i++) { frequencies[`${words[i]} ${words[i+1]} ${words[i+2]}`] = (frequencies[`${words[i]} ${words[i+1]} ${words[i+2]}`] || 0) + 1; } const sortedKeywords = Object.entries(frequencies).filter(([, count]) => count > 1).sort(([,a],[,b]) => b-a); let tableHTML = `

Total Words: ${totalWords}

`; sortedKeywords.slice(0, 50).forEach(([key, value]) => { tableHTML += ``; }); resultDiv.innerHTML = tableHTML + `

Keyword/Phrase	Count	Density
${key}	${value}	${((value / totalWords) * 100).toFixed(2)}%

`; }; } else { // DEMO TOOLS actionBtn.onclick = () => { const keyword = modal.querySelector('#keyword-input').value.trim(); if (!keyword) { resultDiv.innerHTML = '

Please enter a keyword.

'; return; } resultDiv.innerHTML = ``; setTimeout(() => displayDemoResults(toolId, resultDiv, keyword), 1500); }; } } // 5. FUNCTION TO DISPLAY DEMO RESULTS function displayDemoResults(toolId, resultDiv, keyword) { let html = `

Demonstration results for "${keyword}"

`; const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; switch(toolId) { case 'suggestionTool': case 'relatedFinder': case 'generator': const prefixes = ['best', 'how to', 'top 10', 'cheap', 'what is', 'reviews', 'alternatives', 'for sale', 'guide', 'tutorial']; html += ``; prefixes.forEach(p => html += ``); if(toolId === 'generator') { prefixes.forEach(p => html += ``); } html += `

Keyword Suggestion
${p} ${keyword}
${keyword} with ${p}

`; break; case 'longTailTool': const questions = ['how to use', 'what is the best', 'why is', 'where can I find', 'can you use', 'is it good for', 'cost of']; html += ``; questions.forEach(q => html += ``); html += `

Long Tail Keyword Suggestion
${q} ${keyword} for beginners

`; break; case 'researchTool': case 'difficultyChecker': case 'overviewTool': case 'liveAnalyser': html += ``; for (let i = 0; i < 10; i++) { const difficulty = rand(10, 90); let color = '#27ae60'; if (difficulty > 40) color = '#f39c12'; if (difficulty > 70) color = '#c0392b'; html += ``; } html += `

Keyword	Volume	CPC (USD)	Difficulty
${keyword} ${i > 0 ? 'idea ' + i : ''}	${rand(100, 20000).toLocaleString()}	$${(rand(5, 500) / 100).toFixed(2)}	${difficulty}

`; if (toolId === 'overviewTool') { html += `

SERP Features Found

Featured Snippet, People Also Ask, Video Carousel

`; } break; case 'competitionTool': html += `

Competing URL	Domain Rating	Backlinks
competitor-A.com/${keyword}	88	1,204
competitor-B.com/blog/${keyword}	85	950
another-site.org/resource	82	780
forum-topic.net/thread	75	550

`; break; case 'paidFinder': html += `

Paid Keyword	Top Competitor	Est. CPC
buy ${keyword} online	store.com	$3.50
cheap ${keyword}	discount-site.net	$2.75
best ${keyword} deals	deals-online.org	$4.15
${keyword} sale	store.com	$3.80

`; break; } resultDiv.innerHTML = html; } })();