updated

amelia2802 · Oct 31, 2024 · 601b7b3 · 601b7b3
1 parent e0f7a58
commit 601b7b3
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 179 deletions.
diff --git a/data.js b/data.js
@@ -1,106 +1,157 @@
 export const musicData = [{
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/1pNIbZ1F7CJmk60h6UJaVg?utm_source=generator"
 },
 {
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/0TK2YIli7K1leLovkQiNik?utm_source=generator"
 },
 {
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/3HFjh7QljnUCBLsoTwMuTj?utm_source=generator"
 },
 {
     genre: ["sad"],
+    img:"https://i.pinimg.com/enabled_lo/564x/04/10/8e/04108e317b058e4114f41f15589a568b.jpg",
     url: "https://open.spotify.com/embed/track/3fWMFwaJil8fD14JCgwbcL?utm_source=generator"
 },
 {
-    genre: ["workout", "romantic"],
+    genre:["romantic"],
+    img:"",
+    url:"https://open.spotify.com/embed/track/6yrIAJ4yMPzq8Vsu1d3CXg?utm_source=generator"
+},
+{
+    genre:["romantic"],
+    img:"",
+    url:"https://open.spotify.com/embed/track/5WncH5iZ5GFlnXm7jKEXVP?utm_source=generator"
+},
+{
+    genre: ["party"],
+    img:"https://i.pinimg.com/736x/3e/1b/95/3e1b95e3fd256566d3c8848ec2b551d7.jpg",
+    url: "https://open.spotify.com/embed/track/1vYXt7VSjH9JIM5oRRo7vA?utm_source=generator"
+},
+{
+    genre: ["chill", "romantic"],
+    img:"https://i.pinimg.com/736x/bd/51/a2/bd51a278e7e8ebfb7141385aecb6420c.jpg",
+    url: "https://open.spotify.com/embed/track/21qg0IBZf8R12qHd9A3AA4?utm_source=generator"
+},
+{
+    genre: ["party", "romantic"],
+    img:"https://i.pinimg.com/736x/3e/1b/95/3e1b95e3fd256566d3c8848ec2b551d7.jpg",
     url: "https://open.spotify.com/embed/track/5a5Csh7BgPhrNf61uQs2FF?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/3C0nOe05EIt1390bVABLyN?utm_source=generator"
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"https://i.pinimg.com/736x/bd/51/a2/bd51a278e7e8ebfb7141385aecb6420c.jpg",
     url: "https://open.spotify.com/embed/track/77y2yW2spk3HCkZXjlbhCD?utm_source=generator"
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/6ocOeSjnWPcSTaSsi0zIdY?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/5nujrmhLynf4yMoMtj8AQF?utm_source=generator",
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/2iXVckhPy7tP0wV9DvlrjZ?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/0biCSADTAblvLTLtJz4pXO?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/0pqnGHJpmpxLKifKRmU6WP?utm_source=generator"
 },
 {
     genre: ["sad"],
+    img:"",
     url: "https://open.spotify.com/embed/track/33LC84JgLvK2KuW43MfaNq?utm_source=generator"
 },
 {
     genre: ["sad"],
+    img:"",
     url: "https://open.spotify.com/embed/track/5zwx904y89dEC5uE6tO9ZR?utm_source=generator"
 },
 {
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/665b3Nss3OQmhTUdB5hBXw?utm_source=generator"
 },
 {
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/7eQl3Yqv35ioqUfveKHitE?utm_source=generator"
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/4BiPsAV070dg3eLSVf727A?utm_source=generator",
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/6YycppSAeGtSvwmu8qCcr2?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/03jhnLcIT8C4DhXnNecOZv?utm_source=generator"
 },
 {
     genre: ["sad"],
+    img:"",
     url: "https://open.spotify.com/embed/track/3V2N6eYraGQFBAkdaK6AlK?utm_source=generator"
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/5iyNH1Dmxif1k4Nl1gMeuh?utm_source=generator"
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/6wXPV6dNRAhFavrRaCdMXT?utm_source=generator"
 },
 {
     genre: ["romantic"],
+    img:"https://i.pinimg.com/736x/c3/9b/ed/c39bede17503bf9be46674def97919a5.jpg",
     url: "https://open.spotify.com/embed/track/1fCUBgnId0eLuHNl5M4Xmm?utm_source=generator",
 },
 {
-    genre: ["fresh"],
+    genre: ["chill"],
+    img:"",
     url: "https://open.spotify.com/embed/track/4g6OnALPfPGS0JYDTvNEiE?utm_source=generator"
 },
 {
     genre: ["sad"],
+    img:"",
     url: "https://open.spotify.com/embed/track/3pE3QvVrRLyno5TwEBDRFo?utm_source=generator"
 },
 {
-    genre: ["workout"],
+    genre: ["party"],
+    img:"",
     url: "https://open.spotify.com/embed/track/3pjZQfBShK7O01QvtQwmcg?utm_source=generator&theme=0"
 },
+{
+    genre: ["sad","chill","romantic"],
+    img:"",
+    url: "https://open.spotify.com/embed/track/2en58opvPKM0Ek6OFpcGJx?utm_source=generator"
+},
 
 ]
diff --git a/index.html b/index.html
@@ -1,29 +1,27 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>SONGPHILE</title>
-        <link rel="stylesheet" href="style.css">
-    </head>
-    <body>
-        <header class="header">
-            <img id="logo" src="img/logo.png">
-            <h1 class="logo-text">SONGPHILE: <span>Listen to your moods</span></h1>
-        </header>
-        <section>
-            <div class="controls-container">
-                <div class="emotion-radios" id="emotion-radios"></div>
-                <button class="play-song-btn" id="play-song-btn">Play Song</button>
-            </div>
-            <div class="song-modal" id="song-modal">
-                <button class="song-modal-close-btn" id="song-modal-close-btn">X</button>
-                <div id="song-modal-inner"></div>
-            </div>
-        </section>
-        <script type="module" src="script.js"></script>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SONGPHILE</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header">
+        <img id="logo" src="img/logo.png">
+        <h1 class="logo-text">Listen to your moods</h1>
+        <button class="toggle" id="toggle">🌙</button>
+    </header>
+    <section class="menu">
+        <div class="controls-container">
+            <div class="emotion-radios" id="emotion-radios"></div>
+        </div>
+        <div class="song-modal" id="song-modal">
+            <button class="song-modal-close-btn" id="song-modal-close-btn">X</button>
+            <div id="song-modal-inner"></div>
+        </div>
+    </section>
 
-        </main>
-        <script type="module" src="./script.js"></script>
-    </body>
+    <script type="module" src="./script.js"></script>
+</body>
 </html>
diff --git a/script.js b/script.js
@@ -1,95 +1,102 @@
-import { musicData } from './data.js'
+import { musicData } from './data.js';
+
+const emotionRadios = document.getElementById('emotion-radios');
+const songModalInner = document.getElementById('song-modal-inner');
+const songModal = document.getElementById('song-modal');
+const songModalCloseBtn = document.getElementById('song-modal-close-btn');
+const toggleBtn = document.getElementById("toggle")
+
+toggleBtn.addEventListener('click', () => {
+    const menu = document.querySelector(".menu");
+    const header = document.querySelector(".header");
+    const radios = document.querySelectorAll(".radio");
+
+    // Check the current background color and toggle between two states
+    if (menu.style.backgroundColor === "rgb(255, 249, 238)") {
+        // Reset to original colors
+        menu.style.backgroundColor = "";
+        document.querySelector(".logo-text").style.color = "";
+        header.style.backgroundColor = "";
+        radios.forEach(radio => radio.style.color = "");  // Reset each .radio element's color
+        toggleBtn.innerText = "🌙";  // Dark mode icon
+    } else {
+        // Set to light mode colors
+        menu.style.backgroundColor = "rgb(255, 249, 238)";
+        document.querySelector(".logo-text").style.color = "black";
+        header.style.backgroundColor = "rgb(246, 229, 215)";
+        radios.forEach(radio => radio.style.color = "black");  // Apply color to each .radio element
+        toggleBtn.innerText = "☀️";  // Light mode icon
+    }
+});
 
-const emotionRadios = document.getElementById('emotion-radios')
-const getSongBtn = document.getElementById('play-song-btn')
-const songModalInner = document.getElementById('song-modal-inner')
-const songModal = document.getElementById('song-modal')
-const songModalCloseBtn = document.getElementById('song-modal-close-btn')
 
-emotionRadios.addEventListener('change', highlightCheckedOption)
 
-songModalCloseBtn.addEventListener('click', closeModal)
 
-getSongBtn.addEventListener('click', renderSong)
 
-function highlightCheckedOption(e){
-    const radios = document.getElementsByClassName('radio')
-    for (let radio of radios){
-        radio.classList.remove('highlight')
-    }
-    document.getElementById(e.target.id).parentElement.classList.add('highlight')
-}
-
-function closeModal(){
-    songModal.style.display = 'none'
-}
+// Event listeners
+emotionRadios.addEventListener('change', highlightCheckedOption);
+songModalCloseBtn.addEventListener('click', closeModal);
 
-function renderSong(){
-    const songObject = getSingleSongObject()
-    songModalInner.innerHTML =  `
-        <iframe class="mood-song" src="${songObject.url}" allow="autoplay;encrypted-media; fullscreen; picture-in-picture"></iframe>
-        `
-
-    songModal.style.display = 'flex'
-    console.log(songObject.url)
-}
-
-function getSingleSongObject(){
-    const songsArray = getMatchingSongsArray()
-
-    if(songsArray.length === 1){
-        return songsArray[0]
-    }
-    else{
-        const randomNumber = Math.floor(Math.random() * songsArray.length)
-        return songsArray[randomNumber]
+function highlightCheckedOption(e) {
+    const radios = document.getElementsByClassName('radio');
+    for (let radio of radios) {
+        radio.classList.remove('highlight');
     }
+    document.getElementById(e.target.id).parentElement.classList.add('highlight');
 }
 
-function getMatchingSongsArray(){     
-    if(document.querySelector('input[type="radio"]:checked')){
-        const selectedEmotion = document.querySelector('input[type="radio"]:checked').value
-
-        const matchingSongsArray = musicData.filter(function(song){
-                return song.genre.includes(selectedEmotion)          
-        })
-        return matchingSongsArray 
-    }  
+function closeModal() {
+    songModal.style.display = 'none';
 }
 
-function getEmotionsArray(songs){
-    const emotionsArray = []    
-    for (let song of songs){
-        for (let emotion of song.genre){
-            if (!emotionsArray.includes(emotion)){
-                emotionsArray.push(emotion)
+// Make playSong a global function by attaching it to window
+window.playSong = function(emotion) {
+    const songsArray = musicData.filter(song => song.genre.includes(emotion));
+    const songObject = songsArray.length === 1 ? songsArray[0] : songsArray[Math.floor(Math.random() * songsArray.length)];
+
+    songModalInner.innerHTML = `
+        <iframe draggable="true" class="mood-song" src="${songObject.url}" allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe>
+    `;
+    songModal.style.display = 'flex';
+};
+
+function getEmotionsArray(songs) {
+    const emotionsArray = [];
+    for (let song of songs) {
+        for (let emotion of song.genre) {
+            if (!emotionsArray.includes(emotion)) {
+                emotionsArray.push(emotion);
             }
         }
     }
-    return emotionsArray
+    return emotionsArray;
 }
 
-function renderEmotionsRadios(songs){
+function renderEmotionsRadios(songs) {
+    let radioItems = ``;
+    const emotions = getEmotionsArray(songs);
+
+    for (let emotion of emotions) {
+        const matchingSong = songs.find(song => song.genre.includes(emotion));
+        const imageUrl = matchingSong.img || 'default-image.jpg';
 
-    let radioItems = ``
-    const emotions = getEmotionsArray(songs)
-    for (let emotion of emotions){
         radioItems += `
-        <div class="radio">
+        <div class="radio" id="${emotion}-radio">
+            <section class="album-img">
+                <img src="${imageUrl}" alt="${emotion} image" />
+            </section>
             <label for="${emotion}">${emotion}</label>
             <input
             type="radio"
             id="${emotion}"
             value="${emotion}"
             name="emotions"
             >
-        </div>`
+            <button class="play-song-btn" onclick="playSong('${emotion}')">▶</button>
+        </div>`;
     }
-    emotionRadios.innerHTML = radioItems
-}
-
-renderEmotionsRadios(musicData)
-
-
 
+    emotionRadios.innerHTML = radioItems;
+}
 
+renderEmotionsRadios(musicData);