Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const tweetInput = document.getElementById('tweetInput');
+ const charCount = document.getElementById('charCount');
+ const wordCount = document.getElementById('wordCount');
+ const hashtagCount = document.getElementById('hashtagCount');
+ const linkCount = document.getElementById('linkCount');
+ const analyzeBtn = document.getElementById('analyzeBtn');
+ const trendingTopics = document.getElementById('trendingTopics');
+ const postingTimesChart = document.getElementById('postingTimesChart');
+
+ // Update metrics in real-time
+ tweetInput.addEventListener('input', updateMetrics);
+
+ // Analyze button click handler
+ analyzeBtn.addEventListener('click', function() {
+ generateSuggestions();
+ generatePostingTimesChart();
+ });
+
+ function updateMetrics() {
+ const text = tweetInput.value;
+
+ // Character count
+ charCount.textContent = text.length;
+
+ // Word count
+ const words = text.split(/\s+/).filter(word => word.length > 0);
+ wordCount.textContent = words.length;
+
+ // Hashtag count
+ const hashtags = text.match(/#\w+/g) || [];
+ hashtagCount.textContent = hashtags.length;
+
+ // Link count
+ const links = text.match(/https?:\/\/[^\s]+/g) || [];
+ linkCount.textContent = links.length;
+ }
+
+ function generateSuggestions() {
+ // Simulate trending topics
+ const topics = [
+ 'AI in Social Media',
+ 'Content Creation Tips',
+ 'Twitter Analytics',
+ 'Social Media Strategy',
+ 'Engagement Techniques'
+ ];
+
+ trendingTopics.innerHTML = topics
+ .map(topic => `
${topic}`)+ .join('');
+ }
+
+ function generatePostingTimesChart() {
+ // Simulate posting times data
+ const data = {
+ labels: ['6 AM', '9 AM', '12 PM', '3 PM', '6 PM', '9 PM'],
+ values: [20, 80, 60, 90, 70, 40]
+ };
+
+ // Create a simple bar chart
+ postingTimesChart.innerHTML = '';
+ data.values.forEach((value, index) => {
+ const bar = document.createElement('div');
+ bar.style.height = `${value}%`;
+ bar.style.width = `${100 / data.values.length}%`;
+ bar.style.backgroundColor = `hsl(${index * 60}, 70%, 50%)`;
+ bar.style.display = 'inline-block';
+ bar.style.marginRight = '2px';
+ bar.setAttribute('aria-label', `${data.labels[index]}: ${value}% engagement`);
+ postingTimesChart.appendChild(bar);
+ });
+ }
+
+ // Initial setup
+ updateMetrics();
+ generateSuggestions();
+ generatePostingTimesChart();
+ });
