62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const moodButtons = document.querySelectorAll('.btn-mood');
|
|
const resultsSection = document.getElementById('results');
|
|
const resultsTitle = document.getElementById('results-title');
|
|
const videoGrid = document.getElementById('video-grid');
|
|
|
|
// Hardcoded YouTube video IDs for different moods
|
|
const musicDatabase = {
|
|
happy: ['3_w0dsiud4E', 'ZbZSe6N_BXs', 'r5Mozr0B-4o'],
|
|
sad: ['h1YVae0pKnA', 'RB-RcX5DS5A', 'co512-p_gA8'],
|
|
energetic: ['_tV5LEBDs7w', 'l-sZyfFX4F0', 'q9d57g_m_dw'],
|
|
calm: ['5qap5aO4i9A', 'lFcLg2hQjdc', 'DWcJFNfaw9c'],
|
|
upbeat: ['9d8SzG4FPyM', 'fK_zwl-lnmc', '0-7IHOXkiV8']
|
|
};
|
|
|
|
moodButtons.forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
const mood = this.dataset.mood;
|
|
|
|
// Update active button
|
|
moodButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
displayVideos(mood);
|
|
});
|
|
});
|
|
|
|
function displayVideos(mood) {
|
|
const videos = musicDatabase[mood] || [];
|
|
videoGrid.innerHTML = ''; // Clear previous results
|
|
|
|
if (videos.length > 0) {
|
|
resultsTitle.textContent = `Here's your ${mood} playlist`;
|
|
resultsSection.style.display = 'block';
|
|
|
|
videos.forEach(videoId => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-lg-4 col-md-6';
|
|
|
|
const videoContainer = document.createElement('div');
|
|
videoContainer.className = 'video-container';
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
|
iframe.title = 'YouTube video player';
|
|
iframe.frameBorder = '0';
|
|
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
|
|
iframe.allowFullscreen = true;
|
|
|
|
videoContainer.appendChild(iframe);
|
|
col.appendChild(videoContainer);
|
|
videoGrid.appendChild(col);
|
|
});
|
|
|
|
// Smooth scroll to results
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
} else {
|
|
resultsSection.style.display = 'none';
|
|
}
|
|
}
|
|
}); |