gabbyMill · gabbyMill · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/images/pathto.txt b/images/pathto.txt
@@ -0,0 +1 @@
+.\images\cover_art\jinjer_vortex.jpg
diff --git a/index.html b/index.html
@@ -4,16 +4,13 @@
         <meta charset="UTF-8" />
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
-        <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css" />
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.js" defer></script>
+        <script src="./scripts/index.new.js" defer></script>
     </head>
     <body>
-        <div id="songs">
-            <!-- Generated songs go here -->
-        </div>
-        <div id="playlists">
-            <!-- Generated playlists go here -->
-        </div>
+        <div id="songs"></div>
+        <div id="playlists"></div>
     </body>
 </html>
diff --git a/index.new.html b/index.new.html
@@ -7,11 +7,12 @@
         <link rel="stylesheet" href="./style.css">
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.new.js" defer></script>
+        <script src="./scripts/index.js" defer></script>
     </head>
     <body>
         <h1>Awesome Player!!!</h1>
         <div id="add-section">
-            <h2>Add a new song</h2>
+            <h2 class="click-to-add">Click me to add a new song</h2>
             <div id="inputs">
                 <input name="title" placeholder="Title">
                 <input name="album" placeholder="Album">

diff --git a/leftToDo.txt b/leftToDo.txt
@@ -0,0 +1,8 @@
+each song is generated an id so it can be played and removed. DoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDone
+event listeners inside createElemtn functions, createSongElemnt...
+
+Time Displayed, bonus.
+Double playlists, songs header.DoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDone
+
+bonus: added songs will remain sorted by title.DoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDone
+
diff --git a/leftToDo2.txt b/leftToDo2.txt
@@ -0,0 +1,2 @@
+// automatically switches between songs not working
+// first click only pauses progress bar but doesn't automatically start next song.
diff --git a/package-lock.json b/package-lock.json
diff --git a/scripts/index.js b/scripts/index.js
@@ -1,30 +1,131 @@
+function playlistDuration(id) {
+    let answer = 0
+    const playlists = player.playlists
+    playlists.forEach((playlist) => {
+        if (playlist.id === id) {
+            if (!playlist.songs) return;
+            playlist.songs.forEach((songNumber) => {
+                player.songs.forEach((song) => {
+                    // finds songs that match the numbers in the array 'songs' of playlist object
+                    if (song.id === songNumber) {
+                        answer += song.duration
+                    }
+                })
+            })
+        }
+    })
+    return answer
+}
+
+function durationConverter(time) {
+    if (typeof time === "string") {
+        const arr = time.split(":")
+        const seconds = +arr[0] * 60 + +(+arr[1])
+        return seconds
+    } else {
+        let newFormat = new Date(time * 1000).toISOString().substr(14, 5)
+        return newFormat
+    }
+}
 /**
  * Plays a song from the player.
  * Playing a song means changing the visual indication of the currently playing song.
  *
  * @param {String} songId - the ID of the song to play
  */
-function playSong(songId) {
-    // Your code here
+
+function originalPlaySong(songId) {
+    const resetSongs = document.querySelectorAll(".song-element")
+    resetSongs.forEach((song) => {
+        song.setAttribute("style", "background-color: rgb(118, 201, 204)")
+    })
+    player.songs.forEach((song) => {
+        if (song.id == songId) {
+            const soughtSong = document.querySelector(".song" + songId)
+            soughtSong.setAttribute("style", "background-color: rgb(96, 150, 163)")
+            soughtSong.setAttribute("style", "cursor: pointer")
+            soughtSong.classList.add("current-song")
+        }
+    })
+    // index++
+    // clearInterval(doesSomething)
 }
 
+function setColors (songArray) {
+    for (let i = 0; i < songArray.length; i++) {
+            const soughtSong = document.querySelector(`.song${songArray[i].id}`)
+            if (songArray[i].duration < 421 && songArray[i].duration > 119) {
+                const color = (421 - songArray[i].duration) * (120/420)
+                soughtSong.setAttribute("style", `background-color: hsl(${color}, 100%, 25%)`)
+            } else if (songArray[i].duration < 120) {
+                soughtSong.setAttribute("style", `background-color: green`)
+            } else { soughtSong.setAttribute("style", `background-color: red`)}
+    }
+}
 /**
  * Creates a song DOM element based on a song object.
  */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const children = []
-    const classes = []
-    const attrs = { onclick: `playSong(${id})` }
+    const classes = ["song-element"]
+    const attrs = {} // onclick: `playSong(${id})` this was once here 
+    const ul = document.createElement("ul")
+    const image = document.createElement("img")
+    const playButton = document.createElement('button')
+    playButton.classList.add('play-button', 'play-button' + id)
+    playButton.append('⏯')
+    const removeButton = document.createElement('button')
+    removeButton.classList.add('remove-button', 'remove-button' + id)
+    removeButton.append('✖️')
+    image.src = coverArt
+    image.alt = 'cover-photo'
+    for (let key in arguments[0]) {
+        if (key === 'id' || key === 'coverArt') {
+            continue
+        }
+        if (key === 'duration') {
+            const li = document.createElement("li")
+            if (!String(arguments[0][key]).includes(':')) {
+                li.innerText = durationConverter(arguments[0][key])
+            } else {
+                li.innerText = arguments[0][key]
+            }
+            ul.append(li)
+        } else {
+        const li = document.createElement("li")
+        li.innerText = arguments[0][key]
+        ul.append(li)
+        }
+    }
+    ul.appendChild(image)
+    const divOfButtons = createElement('div', [playButton, removeButton], ['button-container'])
+    ul.append(divOfButtons)
+    children.push(ul)
     return createElement("div", children, classes, attrs)
 }
-
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
 function createPlaylistElement({ id, name, songs }) {
+    // const newId = arguments[0]
+    // console.log(arguments[0]);
     const children = []
-    const classes = []
-    const attrs = {}
+    const classes = [name + '-playlist']
+    const attrs = { id }
+    const ul = document.createElement("ul")
+    for (let key in arguments[0]) {
+        if (key === 'id') { continue }
+        if (key === 'songs') {
+            const li = document.createElement("li")
+            li.innerText = arguments[0][key].length + ' songs'
+            ul.append(li)
+        } else {
+            const li = document.createElement("li")
+            li.innerText = arguments[0][key]
+            ul.append(li)
+        }
+    }
+    children.push(ul)
     return createElement("div", children, classes, attrs)
 }
 
@@ -40,8 +141,59 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Array} classes - the class list of the new element
  * @param {Object} attributes - the attributes for the new element
  */
-function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
-}
 
 // You can write more code below this line
+
+// creating a ul with nested li for songs:
+const songs = document.getElementById("songs")
+const playlists = document.getElementById("playlists")
+const siteHeader = document.createElement("header")
+const headerContent = document.createElement("h1")
+headerContent.innerText = `Gabby's MP3 Player`
+const songHeader = document.createElement("h2")
+// songHeader.innerText = `Songs`
+siteHeader.append(headerContent, songHeader)
+document.body.insertBefore(siteHeader, songs)
+document.body.insertBefore(makeProgressBar(), songs)
+
+const playlistHeader = document.createElement("h2")
+// playlistHeader.innerText = `Playlists:`
+document.body.insertBefore(playlistHeader, playlists)
+
+// sort songs and playlists using chained ternary
+function sortSongsAndPlaylists () {
+    player.songs.sort((a, b) => (a.title > b.title ? 1 : a.title === b.title ? 0 : -1))
+    player.playlists.sort((a, b) => (a.name > b.name ? 1 : a.name === b.name ? 0 : -1))
+}
+
+
+function appendToSongsDiv() {
+    songs.innerText = ''
+    sortSongsAndPlaylists();
+    player.songs.forEach((song) => {
+        const newSong = createSongElement(song)
+        newSong.classList.add("song" + song.id)
+        // newSong.append(makeProgressBar())
+        songs.append(newSong)
+    })
+    // paint songs on load:
+    setColors(player.songs)
+}
+appendToSongsDiv()
+
+function appendToPlaylistsDiv() {
+    playlists.innerText = ''
+    sortSongsAndPlaylists()
+    player.playlists.forEach((playlist) => {
+        const newPlaylist = createPlaylistElement(playlist)
+        playlists.append(newPlaylist)
+        const playListTime = document.createElement("li")
+        playListTime.innerText = durationConverter(playlistDuration(playlist.id))
+        newPlaylist.append(playListTime)
+    })
+}
+appendToPlaylistsDiv()
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// automatically switches between songs not working
		// first click only pauses progress bar but doesn't automatically start next song.