🎵 Queue
+
+  }})
+
+ Queue
} tracks.forEach(track => { - const div = document.createElement('div'); - div.className = 'result-item'; - const artists = track.artists.map(a => a.name).join(', '); - const albumImage = track.album.images[0]?.url || ''; - - div.innerHTML = ` -
- ${albumImage ? `
` : ''}
-
-
-
-
+ const div = document.createElement('div');
+ div.className = 'result-item';
+ const artists = track.artists.map(a => a.name).join(', ');
+ const albumImage = track.album.images[0]?.url || '';
+
+ div.innerHTML = `
+
- `;
-
- // Add hover effect
- div.addEventListener('mouseenter', function() {
- const innerDiv = this.querySelector('div');
- innerDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
- innerDiv.style.transform = 'translateY(-1px)';
- innerDiv.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)';
- });
-
- div.addEventListener('mouseleave', function() {
- const innerDiv = this.querySelector('div');
- innerDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
- innerDiv.style.transform = 'translateY(0)';
- innerDiv.style.boxShadow = 'none';
+ `;
+
+ resultsDiv.appendChild(div);
});
-
- resultsDiv.appendChild(div);
- });
} catch (error) {
console.error('Search error:', error);
resultsDiv.innerHTML = '
+ ${albumImage ? `` : ''}
+
-
-
+
+
+
+
+
Search failed. Please check your connection and try again.
';