Table of Contents

Toggle

// DOM Elements const elements = { loading: document.getElementById('loading'), results: document.getElementById('results'), analyzeBtn: document.getElementById('analyzeBtn'), keywordInput: document.getElementById('keywordInput'), loadingText: document.getElementById('loadingText'), progressBar: document.getElementById('progressBar'), metricVolume: document.getElementById('metricVolume'), metricDifficulty: document.getElementById('metricDifficulty'), metricOpportunity: document.getElementById('metricOpportunity'), metricCPC: document.getElementById('metricCPC'), keywordSuggestions: document.getElementById('keywordSuggestions') }

// Chart Instance let analysisChart = null;

// Event Listeners elements.analyzeBtn.addEventListener('click', async () => { const keyword = elements.keywordInput.value.trim(); if (!keyword) return alert('Please enter a keyword');

showLoading(); await simulateAnalysis(keyword); const data = generateMockData(keyword); showResults(data); });

// Core Functions async function simulateAnalysis(keyword) { const steps = [ {text: 'Analyzing search trends...', delay: 800}, {text: 'Checking competition...', delay: 1200}, {text: 'Calculating opportunity...', delay: 600}, {text: 'Generating report...', delay: 1000} ];

for (const [index, step] of steps.entries()) { elements.loadingText.textContent = step.text; elements.progressBar.style.width = `${(index + 1) * 25}%`; await new Promise(resolve => setTimeout(resolve, step.delay)); } }

function showLoading() { elements.loading.classList.remove('hidden'); elements.results.classList.add('hidden'); }

function showResults(data) { elements.loading.classList.add('hidden');

// Update metrics elements.metricVolume.textContent = data.volume.toLocaleString(); elements.metricDifficulty.textContent = `${data.difficulty}/100`; elements.metricOpportunity.textContent = `${data.opportunity}/10`; elements.metricCPC.textContent = `$${data.cpc}`;

// Update chart if (analysisChart) analysisChart.destroy(); const ctx = document.getElementById('analysisChart').getContext('2d'); analysisChart = new Chart(ctx, { type: 'line', data: { labels: data.chartData.labels, datasets: [{ label: 'Search Volume Trend', data: data.chartData.values, borderColor: '#3b82f6', tension: 0.4, fill: true, backgroundColor: 'rgba(59, 130, 246, 0.05)' }] }, options: { responsive: true, plugins: { legend: {position: 'top'} }, scales: { y: { beginAtZero: false, title: {display: true, text: 'Search Volume'} } } } });

// Update suggestions elements.keywordSuggestions.innerHTML = data.suggestions .map(suggestion => `

`).join('');

elements.results.classList.remove('hidden'); }

Alexios Papaioannou

I’m Alexios Papaioannou, an experienced affiliate marketer and content creator. With a decade of expertise, I excel in crafting engaging blog posts to boost your brand. My love for running fuels my creativity. Let’s create exceptional content together!