From 84008fa0bb7675a89527750a21971988228aa3ad Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 16:27:38 +0300 Subject: [PATCH 01/29] First Bulk sorted songs + playlists with sort function that appends all songs with properties into unordered list. --- index.html | 11 ++++------- scripts/index.js | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c55fb482..cc41cd64 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,13 @@ Awesome MP3 Player - + -
- -
-
- -
+

Gabby's Mp3 Player

+
+
diff --git a/scripts/index.js b/scripts/index.js index 6842c794..164eb604 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -45,3 +45,17 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { } // You can write more code below this line +// sort songs and playlists using chained ternary +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)) + +// creating a ul with nested li for songs: +const songs = document.getElementById("songs") +const playlists = document.getElementById("playlists") +const songsUl = document.createElement("ul") +songs.appendChild(songsUl) +player.songs.forEach((song) => { + const li = document.createElement("li") + li.innerHTML = `${song.title} ${song.album} ${song.artist} ${song.duration}` + songsUl.appendChild(li) +}) From 18dd625d1fd62629482184707fcb95824d867908 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 18:08:59 +0300 Subject: [PATCH 02/29] First Bulk Fixed Did not notice prebuilt functions. pretty straight forward. --- scripts/index.js | 49 +++++++++++++++++++++++++++++++++++------------ scripts/player.js | 2 ++ style.css | 12 +++++++++++- 3 files changed, 50 insertions(+), 13 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 164eb604..4edb78c1 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,13 @@ +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. @@ -6,6 +16,7 @@ */ function playSong(songId) { // Your code here + // here will be something like changing the background color. } /** @@ -42,20 +53,34 @@ function createPlaylistElement({ id, name, songs }) { */ function createElement(tagName, children = [], classes = [], attributes = {}) { // Your code here + const element = document.createElement(tagName) + children.forEach((child) => element.append(child)) + element.classList = classes.join(" ") + for (const attr in attributes) { + element.setAttribute(attr, attributes[attr]) + } + return element } +createElement("div", ["li", "p", "a"], "myClass", { gabby: "valueOfGabby" }) // You can write more code below this line -// sort songs and playlists using chained ternary -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)) // creating a ul with nested li for songs: -const songs = document.getElementById("songs") -const playlists = document.getElementById("playlists") -const songsUl = document.createElement("ul") -songs.appendChild(songsUl) -player.songs.forEach((song) => { - const li = document.createElement("li") - li.innerHTML = `${song.title} ${song.album} ${song.artist} ${song.duration}` - songsUl.appendChild(li) -}) +// const songs = document.getElementById("songs") +// const playlists = document.getElementById("playlists") +// const songsUl = document.createElement("ul") +// songs.appendChild(songsUl) +// player.songs.forEach((song) => { +// const li = document.createElement("li") +// const img = document.createElement("img") +// const div = document.createElement("div") +// img.src = "C:/dev/cyber4s/MP3-DOM/images/cover_art/acdc_thunderstruck.jpg" +// div.innerHTML = `${song.title} ${song.album} ${song.artist} ${durationConverter(song.duration)}` +// li.appendChild(div) +// li.appendChild(img) +// songsUl.appendChild(li) +// }) + +// let x = `acdc_thunderstruck.jpg` +// const test = `C:/dev/cyber4s/MP3-DOM/images/cover_art/${x}` +// console.log(test) diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..23eda67d 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,5 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } +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)) diff --git a/style.css b/style.css index f4645fe9..2d0e87ff 100644 --- a/style.css +++ b/style.css @@ -1 +1,11 @@ -/* Your code here */ +/* Your code here */ +#songs { + display: flex; +} + +li > div { + width: 300px; + border: 15px solid green; + padding: 50px; + margin: 20px; +} From d164044f2cf18f4a987f1a81cabd8c81bc851390 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 19:18:16 +0300 Subject: [PATCH 03/29] songElement function Made use of the arguments object. --- scripts/index.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 4edb78c1..440cd59c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,11 @@ +const obj = { + id: 6, + title: "Sons of Winter and Stars", + album: "Time I", + artist: "Wintersun", + duration: 811, + coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", +} function durationConverter(time) { if (typeof time === "string") { const arr = time.split(":") @@ -24,11 +32,24 @@ function playSong(songId) { */ function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] - const classes = [] + const classes = ["song"] const attrs = { onclick: `playSong(${id})` } + const ul = document.createElement("ul") + for (let i = 0; i < arguments.length; i++) { + if (i === 4) { + arguments[4] = durationConverter(arguments[4]) + } + const li = document.createElement("li") + li.innerText = arguments[i] + ul.append(li) + } + const image = document.createElement("img") + image.innerText = arguments[5] + ul.appendChild(image) + children.push(ul) return createElement("div", children, classes, attrs) } - +console.log(1) /** * Creates a playlist DOM element based on a playlist object. */ @@ -61,7 +82,6 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { } return element } -createElement("div", ["li", "p", "a"], "myClass", { gabby: "valueOfGabby" }) // You can write more code below this line From 0f4ad1e928188a82f5c19618d0cda3053e180e54 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 19:50:10 +0300 Subject: [PATCH 04/29] createPlaylistFunction createPlaylistFunction done. added id to go inside variable 'attrs' in both functions so it will have an id attribute the same as the song.id --- scripts/index.js | 30 ++++++++++++++++++------------ scripts/player.js | 1 + 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 440cd59c..e6dedb6b 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,11 +1,10 @@ const obj = { - id: 6, - title: "Sons of Winter and Stars", - album: "Time I", - artist: "Wintersun", - duration: 811, - coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", + id: 1, + title: "gabby", + album: "gabbys album", + artist: "gabby", } +// import player from "./player.js" function durationConverter(time) { if (typeof time === "string") { const arr = time.split(":") @@ -32,8 +31,8 @@ function playSong(songId) { */ function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] - const classes = ["song"] - const attrs = { onclick: `playSong(${id})` } + const classes = ["song-element"] + const attrs = { onclick: `playSong(${id})`, id } const ul = document.createElement("ul") for (let i = 0; i < arguments.length; i++) { if (i === 4) { @@ -43,20 +42,27 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { li.innerText = arguments[i] ul.append(li) } + ul.id = "ulOfSongs" const image = document.createElement("img") - image.innerText = arguments[5] + image.src = arguments[5] ul.appendChild(image) children.push(ul) return createElement("div", children, classes, attrs) } -console.log(1) /** * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { const children = [] - const classes = [] - const attrs = {} + const classes = ["playlist-element"] + const attrs = { id } + const ul = document.createElement("ul") + for (let i = 1; i < arguments.length; i++) { + const li = document.createElement("li") + li.innerText = arguments[i] + ul.append(li) + } + children.push(ul) return createElement("div", children, classes, attrs) } diff --git a/scripts/player.js b/scripts/player.js index 23eda67d..20730df9 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,5 +62,6 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } +// sort songs and playlists using chained ternary 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)) From 0aa98bfac4d5d11aa7ef7dc52789568086f9b2f9 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 20:14:23 +0300 Subject: [PATCH 05/29] append to div append to div functions loops over player.songs and appends them to div --- scripts/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index e6dedb6b..21ef2c06 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -92,8 +92,17 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { // 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 songs = document.getElementById("songs") +const playlists = document.getElementById("playlists") + +function appendToDiv() { + player.songs.forEach((song) => { + const { id, title, album, artist, duration, coverArt } = song + const newSong = createSongElement(id, title, album, artist, duration, coverArt) + songs.append(newSong) + }) +} +appendToDiv() // const songsUl = document.createElement("ul") // songs.appendChild(songsUl) // player.songs.forEach((song) => { From e3fa50de094be66df0ae7b1e51d424baefc4daf2 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 20:24:04 +0300 Subject: [PATCH 06/29] append To Songs Div append To Songs Div function does the same. --- scripts/index.js | 13 +++++++++++-- style.css | 4 +++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 21ef2c06..8bfc05fb 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -95,14 +95,23 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { const songs = document.getElementById("songs") const playlists = document.getElementById("playlists") -function appendToDiv() { +function appendToSongsDiv() { player.songs.forEach((song) => { const { id, title, album, artist, duration, coverArt } = song const newSong = createSongElement(id, title, album, artist, duration, coverArt) songs.append(newSong) }) } -appendToDiv() +appendToSongsDiv() + +function appendToPlaylistsDiv() { + player.playlists.forEach((playlist) => { + const { id, name, songs } = playlist + const newPlaylist = createPlaylistElement(id, name, songs) + playlists.append(newPlaylist) + }) +} +appendToPlaylistsDiv() // const songsUl = document.createElement("ul") // songs.appendChild(songsUl) // player.songs.forEach((song) => { diff --git a/style.css b/style.css index 2d0e87ff..5105bf12 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,8 @@ /* Your code here */ -#songs { +div { display: flex; + flex-direction: column; + flex-flow: column; } li > div { From b9ffecdbf18df36c4c31d6e968276b3cb3a61d9f Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 21:16:18 +0300 Subject: [PATCH 07/29] append to playlists append to playlists done using helper functions imported from previous mp3 challenge --- scripts/index.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/scripts/index.js b/scripts/index.js index 8bfc05fb..89ad7976 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -4,6 +4,26 @@ const obj = { album: "gabbys album", artist: "gabby", } +function playlistDuration(id) { + let answer = 0 + const playlists = player.playlists + // this was not specified but though it should be here: + // checkForId(id, playlists) + // finds desired playlist + playlists.forEach((playlist) => { + if (playlist.id === id) { + 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 +} // import player from "./player.js" function durationConverter(time) { if (typeof time === "string") { @@ -109,6 +129,9 @@ function appendToPlaylistsDiv() { const { id, name, songs } = playlist const newPlaylist = createPlaylistElement(id, name, songs) playlists.append(newPlaylist) + const playListTime = document.createElement("li") + playListTime.innerText = durationConverter(playlistDuration(id)) + newPlaylist.append(playListTime) }) } appendToPlaylistsDiv() From b2b4a23a5b2b1f83311266c0208477ab7907cc3a Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 21:58:41 +0300 Subject: [PATCH 08/29] PlaySong Function Fixed class names so I can access them with playSong Function. Made background color reset to white every time playSong is called so only 1 song is played at a time --- scripts/index.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 89ad7976..465429fc 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,9 +1,3 @@ -const obj = { - id: 1, - title: "gabby", - album: "gabbys album", - artist: "gabby", -} function playlistDuration(id) { let answer = 0 const playlists = player.playlists @@ -42,8 +36,18 @@ function durationConverter(time) { * @param {String} songId - the ID of the song to play */ function playSong(songId) { - // Your code here - // here will be something like changing the background color. + // make sure it can only be playing 1 at a time: + const resetSongs = document.querySelectorAll(".song-element") + resetSongs.forEach((song) => { + song.setAttribute("style", "background-color: white") + }) + const allSongs = document.querySelector + player.songs.forEach((song) => { + if (song.id === songId) { + const soughtSong = document.querySelector(".song" + songId) + soughtSong.setAttribute("style", "background-color: blue") + } + }) } /** @@ -52,9 +56,11 @@ function playSong(songId) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = { onclick: `playSong(${id})`, id } + const attrs = { onclick: `playSong(${id})` } const ul = document.createElement("ul") - for (let i = 0; i < arguments.length; i++) { + const image = document.createElement("img") + image.src = arguments[5] + for (let i = 0; i < arguments.length - 1; i++) { if (i === 4) { arguments[4] = durationConverter(arguments[4]) } @@ -62,9 +68,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { li.innerText = arguments[i] ul.append(li) } - ul.id = "ulOfSongs" - const image = document.createElement("img") - image.src = arguments[5] + // ul.id = id ul.appendChild(image) children.push(ul) return createElement("div", children, classes, attrs) @@ -119,6 +123,7 @@ function appendToSongsDiv() { player.songs.forEach((song) => { const { id, title, album, artist, duration, coverArt } = song const newSong = createSongElement(id, title, album, artist, duration, coverArt) + newSong.classList.add("song" + id) songs.append(newSong) }) } From b5a34b8fcaf75923158f3e0c9f8f1bf49c130e42 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 22:09:29 +0300 Subject: [PATCH 09/29] Fixed Fixed function so that onCLick attr is set property and initiated I at 1 so it doesn't add id to display --- scripts/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 465429fc..cc1bf655 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -56,11 +56,11 @@ function playSong(songId) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = { onclick: `playSong(${id})` } + const attrs = { onclick: `playSong(${arguments[0]})` } const ul = document.createElement("ul") const image = document.createElement("img") image.src = arguments[5] - for (let i = 0; i < arguments.length - 1; i++) { + for (let i = 1; i < arguments.length - 1; i++) { if (i === 4) { arguments[4] = durationConverter(arguments[4]) } From 27bfdb03abf1ba445ce7edcd2259a589d2b81ba5 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 12 Sep 2021 22:31:58 +0300 Subject: [PATCH 10/29] HTML added some html in js --- index.html | 1 - scripts/index.js | 33 +++++++++++---------------------- style.css | 12 +++++++----- 3 files changed, 18 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index cc41cd64..e47077a8 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@ -

Gabby's Mp3 Player

diff --git a/scripts/index.js b/scripts/index.js index cc1bf655..8ba3520e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,9 +1,6 @@ function playlistDuration(id) { let answer = 0 const playlists = player.playlists - // this was not specified but though it should be here: - // checkForId(id, playlists) - // finds desired playlist playlists.forEach((playlist) => { if (playlist.id === id) { playlist.songs.forEach((songNumber) => { @@ -18,7 +15,7 @@ function playlistDuration(id) { }) return answer } -// import player from "./player.js" + function durationConverter(time) { if (typeof time === "string") { const arr = time.split(":") @@ -68,7 +65,6 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { li.innerText = arguments[i] ul.append(li) } - // ul.id = id ul.appendChild(image) children.push(ul) return createElement("div", children, classes, attrs) @@ -103,7 +99,6 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here const element = document.createElement(tagName) children.forEach((child) => element.append(child)) element.classList = classes.join(" ") @@ -118,6 +113,16 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { // 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) +const playlistHeader = document.createElement("h2") +playlistHeader.innerText = `Playlists:` +document.body.insertBefore(playlistHeader, playlists) function appendToSongsDiv() { player.songs.forEach((song) => { @@ -140,19 +145,3 @@ function appendToPlaylistsDiv() { }) } appendToPlaylistsDiv() -// const songsUl = document.createElement("ul") -// songs.appendChild(songsUl) -// player.songs.forEach((song) => { -// const li = document.createElement("li") -// const img = document.createElement("img") -// const div = document.createElement("div") -// img.src = "C:/dev/cyber4s/MP3-DOM/images/cover_art/acdc_thunderstruck.jpg" -// div.innerHTML = `${song.title} ${song.album} ${song.artist} ${durationConverter(song.duration)}` -// li.appendChild(div) -// li.appendChild(img) -// songsUl.appendChild(li) -// }) - -// let x = `acdc_thunderstruck.jpg` -// const test = `C:/dev/cyber4s/MP3-DOM/images/cover_art/${x}` -// console.log(test) diff --git a/style.css b/style.css index 5105bf12..ef46d3f3 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,13 @@ /* Your code here */ -div { - display: flex; - flex-direction: column; - flex-flow: column; +* { + text-align: center; } -li > div { +ul { + list-style-type: none; +} + +asddiv { width: 300px; border: 15px solid green; padding: 50px; From 2e604fe34c1939063fcd7d8591a59bd6b5ac76ce Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 00:19:35 +0300 Subject: [PATCH 11/29] colors colors added to playSong Function --- .vscode/settings.json | 1 + scripts/index.js | 6 +++--- scripts/player.js | 3 +++ style.css | 12 +++--------- 4 files changed, 10 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} diff --git a/scripts/index.js b/scripts/index.js index 8ba3520e..2a1243b8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -32,17 +32,17 @@ function durationConverter(time) { * * @param {String} songId - the ID of the song to play */ + function playSong(songId) { // make sure it can only be playing 1 at a time: const resetSongs = document.querySelectorAll(".song-element") resetSongs.forEach((song) => { - song.setAttribute("style", "background-color: white") + song.setAttribute("style", "background-color: rgb(118, 201, 204)") }) - const allSongs = document.querySelector player.songs.forEach((song) => { if (song.id === songId) { const soughtSong = document.querySelector(".song" + songId) - soughtSong.setAttribute("style", "background-color: blue") + soughtSong.setAttribute("style", "background-color: rgb(0, 126, 119)") } }) } diff --git a/scripts/player.js b/scripts/player.js index 20730df9..5514f07e 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -65,3 +65,6 @@ const player = { // sort songs and playlists using chained ternary 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)) + +const idArray = player.songs.map((song) => song.id) +console.log() diff --git a/style.css b/style.css index ef46d3f3..3e4cf496 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,9 @@ /* Your code here */ -* { +body { text-align: center; } -ul { +li { list-style-type: none; -} - -asddiv { - width: 300px; - border: 15px solid green; - padding: 50px; - margin: 20px; + color: black; } From e89f2b653bab35206c59606e31f8319860ec60be Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 11:57:15 +0300 Subject: [PATCH 12/29] Bonus Requirement #2 Songs colors whilst playing reflect their length. Updated playSong Function to do so --- scripts/index.js | 10 ++++++++-- style.css | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 2a1243b8..c7beb31a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -42,7 +42,13 @@ function playSong(songId) { player.songs.forEach((song) => { if (song.id === songId) { const soughtSong = document.querySelector(".song" + songId) - soughtSong.setAttribute("style", "background-color: rgb(0, 126, 119)") + if (song.duration < 421 && song.duration > 119) { + const color = (421 - song.duration) * (120/420) + soughtSong.setAttribute("style", `background-color: hsl(${color}, 100%, 25%)`) + } else if (song.duration < 120) { + soughtSong.setAttribute("style", `background-color: green`) + } else { soughtSong.setAttribute("style", `background-color: rgb(96, 150, 163)`)} + alert(`${song.title} is playing`) } }) } @@ -105,7 +111,7 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { for (const attr in attributes) { element.setAttribute(attr, attributes[attr]) } - return element + return element; } // You can write more code below this line diff --git a/style.css b/style.css index 3e4cf496..b983dcb6 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,13 @@ /* Your code here */ body { text-align: center; + background-color: rgb(43, 122, 226); } li { list-style-type: none; color: black; } +.playlist-element { + background-color: rgb(226, 43, 156); +} From 030d0141ce58949237f6276f0dbb58eb4e5e4d8f Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 12:42:09 +0300 Subject: [PATCH 13/29] Fixed Fixed color difference function previously it was only on click and now it is onload. --- scripts/index.js | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index c7beb31a..b01a291f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -42,24 +42,39 @@ function playSong(songId) { player.songs.forEach((song) => { if (song.id === songId) { const soughtSong = document.querySelector(".song" + songId) - if (song.duration < 421 && song.duration > 119) { - const color = (421 - song.duration) * (120/420) - soughtSong.setAttribute("style", `background-color: hsl(${color}, 100%, 25%)`) - } else if (song.duration < 120) { - soughtSong.setAttribute("style", `background-color: green`) - } else { soughtSong.setAttribute("style", `background-color: rgb(96, 150, 163)`)} + soughtSong.setAttribute("style", "background-color: rgb(96, 150, 163)") alert(`${song.title} is playing`) } }) } +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`)} + } +} + + + +// const intervalVar = setInterval(playSong, player.songs[par1].duration, par1) +// let songIndex = 0; +// function outerFunc () { +// if (songIndex === player.songs.length) return +// } + /** * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = { onclick: `playSong(${arguments[0]})` } + const attrs = { onclick: `playSong(${arguments[0]})`} const ul = document.createElement("ul") const image = document.createElement("img") image.src = arguments[5] @@ -151,3 +166,4 @@ function appendToPlaylistsDiv() { }) } appendToPlaylistsDiv() +setColors(player.songs) From d598a90e2904155686a29f36b87dac58c09a1f63 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 14:05:18 +0300 Subject: [PATCH 14/29] CSS added attributes and classes so I can manipulate them with css --- scripts/index.js | 2 ++ style.css | 3 +++ 2 files changed, 5 insertions(+) diff --git a/scripts/index.js b/scripts/index.js index b01a291f..6495f36c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -43,6 +43,8 @@ function playSong(songId) { 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") alert(`${song.title} is playing`) } }) diff --git a/style.css b/style.css index b983dcb6..d29961b9 100644 --- a/style.css +++ b/style.css @@ -11,3 +11,6 @@ li { .playlist-element { background-color: rgb(226, 43, 156); } +.current-song:hover { + font-size: 200%; +} \ No newline at end of file From 938d4926e478ae10da2fad5aa41ed106497ba236 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 14:44:21 +0300 Subject: [PATCH 15/29] Fixed a bit: Edited createPlaylistElement so it will recieve id as attr and name as className using arguments object. --- scripts/index.js | 15 +++++---------- style.css | 2 +- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 6495f36c..d5f71bd5 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -61,15 +61,6 @@ function setColors (songArray) { } else { soughtSong.setAttribute("style", `background-color: red`)} } } - - - -// const intervalVar = setInterval(playSong, player.songs[par1].duration, par1) -// let songIndex = 0; -// function outerFunc () { -// if (songIndex === player.songs.length) return -// } - /** * Creates a song DOM element based on a song object. */ @@ -80,6 +71,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const ul = document.createElement("ul") const image = document.createElement("img") image.src = arguments[5] + image.alt = 'cover-photo' for (let i = 1; i < arguments.length - 1; i++) { if (i === 4) { arguments[4] = durationConverter(arguments[4]) @@ -96,8 +88,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { + id = arguments[0] const children = [] - const classes = ["playlist-element"] + const classes = [arguments[1] + '-playlist'] const attrs = { id } const ul = document.createElement("ul") for (let i = 1; i < arguments.length; i++) { @@ -168,4 +161,6 @@ function appendToPlaylistsDiv() { }) } appendToPlaylistsDiv() + +// paint songs on load: setColors(player.songs) diff --git a/style.css b/style.css index d29961b9..e4171ad6 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ li { list-style-type: none; color: black; } -.playlist-element { +#playlists, div + h2 { background-color: rgb(226, 43, 156); } .current-song:hover { From 1fb63054e4f02e77d7b9b523fe3149b3af9dbff7 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 15:47:05 +0300 Subject: [PATCH 16/29] Made functions more readable with help of destructuring Fixed appendToPlaylistsDiv and createPlayList Element to get rid use of heavy use of arguments and make more use of destructuring --- scripts/index.js | 27 ++++++++++++++++++++------- scripts/player.js | 2 +- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index d5f71bd5..59decad2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -33,6 +33,19 @@ function durationConverter(time) { * @param {String} songId - the ID of the song to play */ +// ..psuedo : +// replace playSong with setTimeout (playSong, songDuration that matches id) +// at the end of playSong function increment index++ +// keep index like this: +// setTimeout(func, 2500, par1, par2) +// let tempId = null +// const arrayOfIds = [4,5,7,6,3,2,1] +// function testFunc (duration, id) { +// id +// setTimeout(playSong, duration, arrayOfIds[index]) +// index++ +// } + function playSong(songId) { // make sure it can only be playing 1 at a time: const resetSongs = document.querySelectorAll(".song-element") @@ -88,14 +101,15 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { - id = arguments[0] + // const newId = arguments[0] + // console.log(arguments[0]); const children = [] - const classes = [arguments[1] + '-playlist'] + const classes = [name + '-playlist'] const attrs = { id } const ul = document.createElement("ul") - for (let i = 1; i < arguments.length; i++) { + for (let key in arguments[0]) { const li = document.createElement("li") - li.innerText = arguments[i] + li.innerText = arguments[0][key] ul.append(li) } children.push(ul) @@ -152,11 +166,10 @@ appendToSongsDiv() function appendToPlaylistsDiv() { player.playlists.forEach((playlist) => { - const { id, name, songs } = playlist - const newPlaylist = createPlaylistElement(id, name, songs) + const newPlaylist = createPlaylistElement(playlist) playlists.append(newPlaylist) const playListTime = document.createElement("li") - playListTime.innerText = durationConverter(playlistDuration(id)) + playListTime.innerText = durationConverter(playlistDuration(playlist.id)) newPlaylist.append(playListTime) }) } diff --git a/scripts/player.js b/scripts/player.js index 5514f07e..ede4043b 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -29,7 +29,7 @@ const player = { title: "Thunderstruck", album: "The Razors Edge", artist: "AC/DC", - duration: 292, + duration: 5, coverArt: "./images/cover_art/acdc_thunderstruck.jpg", }, { From e7b1cb18726d3175b0f85eb882feb8bb41bb980e Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Mon, 13 Sep 2021 17:40:02 +0300 Subject: [PATCH 17/29] Functions more readable and generic Made functions more generic by decreasing use of arguments and using destructuring. Main difference is now I pass an object to AppendDiv function and not individual arguments --- scripts/index.js | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 59decad2..40df2abb 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -45,8 +45,15 @@ function durationConverter(time) { // setTimeout(playSong, duration, arrayOfIds[index]) // index++ // } +// let index = 0 +// function engulfingFunction (songId, duration) { +// index = arrayOfIds.indexOf(songId) +// const doesSomething = setTimeout(playSong,duration*1000, songId) +// } function playSong(songId) { + // get out of function if it has played all songs: + // if (index === 7) return // make sure it can only be playing 1 at a time: const resetSongs = document.querySelectorAll(".song-element") resetSongs.forEach((song) => { @@ -61,6 +68,8 @@ function playSong(songId) { alert(`${song.title} is playing`) } }) + // index++ + // clearInterval(doesSomething) } function setColors (songArray) { @@ -80,18 +89,24 @@ function setColors (songArray) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = { onclick: `playSong(${arguments[0]})`} + const attrs = { onclick: `playSong(${id})`} const ul = document.createElement("ul") const image = document.createElement("img") - image.src = arguments[5] + image.src = coverArt image.alt = 'cover-photo' - for (let i = 1; i < arguments.length - 1; i++) { - if (i === 4) { - arguments[4] = durationConverter(arguments[4]) + for (let key in arguments[0]) { + if (key === 'id' || key === 'coverArt') { + continue } + if (key === 'duration') { + const li = document.createElement("li") + li.innerText = durationConverter(arguments[0][key]) + ul.append(li) + } else { const li = document.createElement("li") - li.innerText = arguments[i] + li.innerText = arguments[0][key] ul.append(li) + } } ul.appendChild(image) children.push(ul) @@ -156,9 +171,8 @@ document.body.insertBefore(playlistHeader, playlists) function appendToSongsDiv() { player.songs.forEach((song) => { - const { id, title, album, artist, duration, coverArt } = song - const newSong = createSongElement(id, title, album, artist, duration, coverArt) - newSong.classList.add("song" + id) + const newSong = createSongElement(song) + newSong.classList.add("song" + song.id) songs.append(newSong) }) } From 2cb4dba5f9b180d78551b6500ac6225632f7f456 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Tue, 14 Sep 2021 20:11:19 +0300 Subject: [PATCH 18/29] CSS updated a bit of css --- package-lock.json | 3 +++ scripts/index.js | 3 +++ style.css | 31 ++++++++++++++++++++++++++++++- 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/scripts/index.js b/scripts/index.js index 40df2abb..26bc6cdd 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -165,6 +165,9 @@ const songHeader = document.createElement("h2") songHeader.innerText = `Songs` siteHeader.append(headerContent, songHeader) document.body.insertBefore(siteHeader, songs) +const timeLeft = document.createElement('h3') +timeLeft.innerText = 'Time Left will be displayed here' +document.body.insertBefore(timeLeft, songs) const playlistHeader = document.createElement("h2") playlistHeader.innerText = `Playlists:` document.body.insertBefore(playlistHeader, playlists) diff --git a/style.css b/style.css index e4171ad6..8fdd01fd 100644 --- a/style.css +++ b/style.css @@ -11,6 +11,35 @@ li { #playlists, div + h2 { background-color: rgb(226, 43, 156); } +.current-song { + background-color: blueviolet; +} .current-song:hover { - font-size: 200%; + font-size: 140%; +} + +.song-element, #playlists{ + border-radius: 30px; + box-shadow: 5px 10px; + margin: 20px; +} + +.song-element { + display: flex; + justify-content: center; + width: 50%; +} + +div { + display: flex; + flex-direction: column; + align-items: center; +} + +img { + width: 60%; +} + +h3 { + position: fixed; } \ No newline at end of file From 0690476efaf5f956bca32f31d1c830b3d421c3e7 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Wed, 15 Sep 2021 12:01:50 +0300 Subject: [PATCH 19/29] Start of Event listeners task A bit of css. Made a eventHandler function that receives event. It calls either removeSong, playSong, or addSong function. --- index.html | 1 + index.new.html | 2 +- scripts/index.js | 13 ++++++++----- scripts/index.new.js | 37 ++++++++++++++++++++++++++++++++++--- style.css | 10 ++++++++-- 5 files changed, 52 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index e47077a8..df3b4ac5 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
diff --git a/index.new.html b/index.new.html index eba39f17..16eb51d7 100644 --- a/index.new.html +++ b/index.new.html @@ -4,7 +4,7 @@ Awesome MP3 Player - + diff --git a/scripts/index.js b/scripts/index.js index 26bc6cdd..048727e7 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -51,10 +51,7 @@ function durationConverter(time) { // const doesSomething = setTimeout(playSong,duration*1000, songId) // } -function playSong(songId) { - // get out of function if it has played all songs: - // if (index === 7) return - // make sure it can only be playing 1 at a time: +function oldPlaySong(songId) { const resetSongs = document.querySelectorAll(".song-element") resetSongs.forEach((song) => { song.setAttribute("style", "background-color: rgb(118, 201, 204)") @@ -89,9 +86,13 @@ function setColors (songArray) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = { onclick: `playSong(${id})`} + const attrs = {onclick: 'console.log("this is an old functionality within createSongElement func located index.js")' } // onclick: `playSong(${id})` const ul = document.createElement("ul") const image = document.createElement("img") + const playButton = document.createElement('button') + playButton.classList.add('play-button') + const removeButton = document.createElement('button') + removeButton.classList.add('remove-button') image.src = coverArt image.alt = 'cover-photo' for (let key in arguments[0]) { @@ -109,6 +110,8 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { } } ul.appendChild(image) + ul.append(playButton) + ul.append(removeButton) children.push(ul) return createElement("div", children, classes, attrs) } diff --git a/scripts/index.new.js b/scripts/index.new.js index c3a39c8e..cb7dbeec 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -6,6 +6,7 @@ */ function playSong(songId) { // Your code here + console.log(`song is playing`); } /** @@ -13,9 +14,37 @@ function playSong(songId) { * * @param {Number} songId - the ID of the song to remove */ -function removeSong(songId) { - // Your code here +function removeSong(event) { + // locate the div in which the click was made: + const songDiv = event.target.closest('.song-element'); + + const removeButton = event.target.closest('.remove-button'); + + if (!removeButton) return // if this is not the remove button get outta dodge; + // if you got to this line then the user clicked on a remove button button; + songDiv.remove(); } +// adding an event listener to call removeSong function: +document.addEventListener('click', eventHandler); +// this next line shouldn't be? it should all be called in 1 class +// with a constructor? + +/* document.addEventListener('click', removeSong); */ + +// My idea is to substitute this with calling a helper function +// the helper function will contain something like this: +// if (removeButton) {removeSong()} +// if (playButton) {playSong()} +// alternative will be to use methods and dataset and class methods. +function eventHandler (event) { + const removeButton = event.target.closest('.remove-button'); + const playButton = event.target.closest('.play-button'); + const addButton = event.target.closest('.add-button') // later will add this + + if (removeButton) return removeSong(event) + if (playButton) return playSong(event) +} + /** * Adds a song to the player, and updates the DOM to match. @@ -101,4 +130,6 @@ generateSongs() generatePlaylists() // Making the add-song-button actually do something -document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + +// commenting this out for now: +// document.getElementById("add-button").addEventListener("click", handleAddSongEvent) diff --git a/style.css b/style.css index 8fdd01fd..12ae0cb2 100644 --- a/style.css +++ b/style.css @@ -14,9 +14,9 @@ li { .current-song { background-color: blueviolet; } -.current-song:hover { +/* .current-song:hover { font-size: 140%; -} +} */ .song-element, #playlists{ border-radius: 30px; @@ -40,6 +40,12 @@ img { width: 60%; } +/* this is the duration. plz add a class to it later and don't mention all h3 */ h3 { position: fixed; + max-width: 10%; +} + +.song-element:hover { + font-size: 140%; } \ No newline at end of file From 191ffacc2e8fdadf0bd89e13191927429ec77dc2 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Wed, 15 Sep 2021 13:48:57 +0300 Subject: [PATCH 20/29] Play Song Made the original createSongElement function add a class with the song's id so I can then pass the id to removeSong and playSong function. Updated removeSong to be much neater with this and for now playSong is calling the original playSong (now originalPlaySong) function with its id --- scripts/index.js | 10 ++++++---- scripts/index.new.js | 35 +++++++++++++---------------------- scripts/player.js | 2 +- 3 files changed, 20 insertions(+), 27 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 048727e7..4c8b4611 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -51,13 +51,13 @@ function durationConverter(time) { // const doesSomething = setTimeout(playSong,duration*1000, songId) // } -function oldPlaySong(songId) { +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) { + if (song.id == songId) { const soughtSong = document.querySelector(".song" + songId) soughtSong.setAttribute("style", "background-color: rgb(96, 150, 163)") soughtSong.setAttribute("style", "cursor: pointer") @@ -90,9 +90,11 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const ul = document.createElement("ul") const image = document.createElement("img") const playButton = document.createElement('button') - playButton.classList.add('play-button') + playButton.classList.add('play-button', 'play-button' + id) + playButton.append('Play') const removeButton = document.createElement('button') - removeButton.classList.add('remove-button') + removeButton.classList.add('remove-button', 'remove-button' + id) + removeButton.append('Remove') image.src = coverArt image.alt = 'cover-photo' for (let key in arguments[0]) { diff --git a/scripts/index.new.js b/scripts/index.new.js index cb7dbeec..f112da43 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -1,3 +1,5 @@ +// adding an event listener to call other functions: +document.addEventListener('click', eventHandler); /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -14,35 +16,24 @@ function playSong(songId) { * * @param {Number} songId - the ID of the song to remove */ -function removeSong(event) { - // locate the div in which the click was made: - const songDiv = event.target.closest('.song-element'); - - const removeButton = event.target.closest('.remove-button'); - - if (!removeButton) return // if this is not the remove button get outta dodge; - // if you got to this line then the user clicked on a remove button button; - songDiv.remove(); +function removeSong(id) { + document.querySelector('.song' + id).remove() } -// adding an event listener to call removeSong function: -document.addEventListener('click', eventHandler); -// this next line shouldn't be? it should all be called in 1 class -// with a constructor? - -/* document.addEventListener('click', removeSong); */ -// My idea is to substitute this with calling a helper function -// the helper function will contain something like this: -// if (removeButton) {removeSong()} -// if (playButton) {playSong()} -// alternative will be to use methods and dataset and class methods. function eventHandler (event) { const removeButton = event.target.closest('.remove-button'); const playButton = event.target.closest('.play-button'); const addButton = event.target.closest('.add-button') // later will add this - if (removeButton) return removeSong(event) - if (playButton) return playSong(event) + if (removeButton) { + // this next line takes the id of the song: + const id = removeButton.className[removeButton.className.length-1]; + return removeSong(id) + } + if (playButton) { + const id = playButton.className[playButton.className.length-1]; + return oldPlaySong(id) + } } diff --git a/scripts/player.js b/scripts/player.js index ede4043b..5514f07e 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -29,7 +29,7 @@ const player = { title: "Thunderstruck", album: "The Razors Edge", artist: "AC/DC", - duration: 5, + duration: 292, coverArt: "./images/cover_art/acdc_thunderstruck.jpg", }, { From 658d82ecf3c3401c354a5feb9d4adebb033f8e86 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Fri, 17 Sep 2021 11:11:34 +0300 Subject: [PATCH 21/29] Add song function Added add song function to recieve a song object from handleSongClickEvent, with it it creates a new song element and appends it to the 'songs' div. Also made the playlists + songs sort a function. For now the duration input only takes a number. --- index.new.html | 1 + scripts/index.js | 12 +++++++-- scripts/index.new.js | 60 ++++++++++++++++++++++++++++---------------- scripts/player.js | 4 +-- style.css | 5 ++++ 5 files changed, 57 insertions(+), 25 deletions(-) diff --git a/index.new.html b/index.new.html index 16eb51d7..f9856f89 100644 --- a/index.new.html +++ b/index.new.html @@ -7,6 +7,7 @@ +

Awesome Player!!!

diff --git a/scripts/index.js b/scripts/index.js index 4c8b4611..9a5bcace 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -91,10 +91,10 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const image = document.createElement("img") const playButton = document.createElement('button') playButton.classList.add('play-button', 'play-button' + id) - playButton.append('Play') + playButton.append('🎶') const removeButton = document.createElement('button') removeButton.classList.add('remove-button', 'remove-button' + id) - removeButton.append('Remove') + removeButton.append('❌') image.src = coverArt image.alt = 'cover-photo' for (let key in arguments[0]) { @@ -177,7 +177,14 @@ 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() { + sortSongsAndPlaylists(); player.songs.forEach((song) => { const newSong = createSongElement(song) newSong.classList.add("song" + song.id) @@ -187,6 +194,7 @@ function appendToSongsDiv() { appendToSongsDiv() function appendToPlaylistsDiv() { + sortSongsAndPlaylists(); player.playlists.forEach((playlist) => { const newPlaylist = createPlaylistElement(playlist) playlists.append(newPlaylist) diff --git a/scripts/index.new.js b/scripts/index.new.js index f112da43..44a836f3 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -1,5 +1,6 @@ // adding an event listener to call other functions: -document.addEventListener('click', eventHandler); +document.addEventListener('click', handleSongClickEvent); + /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -20,28 +21,15 @@ function removeSong(id) { document.querySelector('.song' + id).remove() } -function eventHandler (event) { - const removeButton = event.target.closest('.remove-button'); - const playButton = event.target.closest('.play-button'); - const addButton = event.target.closest('.add-button') // later will add this - - if (removeButton) { - // this next line takes the id of the song: - const id = removeButton.className[removeButton.className.length-1]; - return removeSong(id) - } - if (playButton) { - const id = playButton.className[playButton.className.length-1]; - return oldPlaySong(id) - } -} - - /** * Adds a song to the player, and updates the DOM to match. */ function addSong({ title, album, artist, duration, coverArt }) { // Your code here + const newSong = createSongElement(arguments[0]); + songs.append(newSong) + // sortSongsAndPlaylists() // just want to see how this looks without + } /** @@ -51,9 +39,23 @@ function addSong({ title, album, artist, duration, coverArt }) { * @param {MouseEvent} event - the click event */ function handleSongClickEvent(event) { - // Your code here + const removeButton = event.target.closest('.remove-button'); + const playButton = event.target.closest('.play-button'); + const addButton = event.target.closest('.add-button') // later will add this + + if (removeButton) { + // this next line takes the id of the song: + const id = removeButton.className[removeButton.className.length-1]; + return removeSong(id) + } + if (playButton) { + const id = playButton.className[playButton.className.length-1]; + return originalPlaySong(id) + } } +document.addEventListener('click', handleAddSongEvent) + /** * Handles a click event on the button that adds songs. * @@ -61,12 +63,29 @@ function handleSongClickEvent(event) { */ function handleAddSongEvent(event) { // Your code here + const addBtn = event.target.closest('#add-button') + if (!addBtn) return; // Get outa here if this isn't add button; + + const arrayOfInputs = document.querySelectorAll('input') + const songObject = { + title: arrayOfInputs[0].value, + album: arrayOfInputs[1].value, + artist: arrayOfInputs[2].value, + duration: Number(arrayOfInputs[3].value), + coverArt: arrayOfInputs[4].value + } + for (let i = 0; i < arrayOfInputs.length; i++) { + if (arrayOfInputs[i].value === '') { + throw alert(arrayOfInputs[i].placeholder + ` can't be an empty input`) + } + } + addSong(songObject) } /** * Creates a song DOM element based on a song object. */ -function createSongElement({ id, title, album, artist, duration, coverArt }) { +function createSongElement2({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = [] const attrs = {} @@ -121,6 +140,5 @@ generateSongs() generatePlaylists() // Making the add-song-button actually do something - // commenting this out for now: // document.getElementById("add-button").addEventListener("click", handleAddSongEvent) diff --git a/scripts/player.js b/scripts/player.js index 5514f07e..f2604096 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -63,8 +63,8 @@ const player = { ], } // sort songs and playlists using chained ternary -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)) +// 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)) const idArray = player.songs.map((song) => song.id) console.log() diff --git a/style.css b/style.css index 12ae0cb2..930af1d3 100644 --- a/style.css +++ b/style.css @@ -48,4 +48,9 @@ h3 { .song-element:hover { font-size: 140%; +} + +button { + display: flex; + font-size: 200%; } \ No newline at end of file From bb2dcb0957ea746c0b333af4d8fdaef635de646d Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Fri, 17 Sep 2021 16:20:03 +0300 Subject: [PATCH 22/29] Generate Id. making more sense made a function to generate a unique new id for every song added. This song will also have corresponding buttons that match his id. Put AppendToSongsDiv (generateSongs) function inside add song function, this way, everytime a song is added the div is reset and re-updated according to the player object. Updated songCLickEvent function to use regex. Throwing an error for invalid inputs. --- images/pathto.txt | 1 + index.new.html | 2 +- leftToDo.txt | 9 ++++++++ scripts/index.js | 32 ++++++++++++++++++-------- scripts/index.new.js | 54 ++++++++++++++++++++++++++++++++------------ 5 files changed, 73 insertions(+), 25 deletions(-) create mode 100644 images/pathto.txt create mode 100644 leftToDo.txt diff --git a/images/pathto.txt b/images/pathto.txt new file mode 100644 index 00000000..df7d3092 --- /dev/null +++ b/images/pathto.txt @@ -0,0 +1 @@ +.\images\cover_art\jinjer_vortex.jpg \ No newline at end of file diff --git a/index.new.html b/index.new.html index f9856f89..03a72c05 100644 --- a/index.new.html +++ b/index.new.html @@ -4,7 +4,7 @@ Awesome MP3 Player - + diff --git a/leftToDo.txt b/leftToDo.txt new file mode 100644 index 00000000..482d3108 --- /dev/null +++ b/leftToDo.txt @@ -0,0 +1,9 @@ +each song is generated an id so it can be played and removed. +event listeners inside createElemtn functions, createSongElemnt... + +Time Displayed, bonus. +Double playlists, songs header. + +bonus: added songs will remain sorted by title. for this you need to sort the elements in appndToSongsDiv and not sort the existing hardcoded player object. + +if songs will first be added to player then appended to songs it will be better diff --git a/scripts/index.js b/scripts/index.js index 9a5bcace..3b1824b8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -103,7 +103,11 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { } if (key === 'duration') { const li = document.createElement("li") - li.innerText = durationConverter(arguments[0][key]) + 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") @@ -128,9 +132,15 @@ function createPlaylistElement({ id, name, songs }) { const attrs = { id } const ul = document.createElement("ul") for (let key in arguments[0]) { - const li = document.createElement("li") - li.innerText = arguments[0][key] - ul.append(li) + 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) @@ -167,14 +177,14 @@ const siteHeader = document.createElement("header") const headerContent = document.createElement("h1") headerContent.innerText = `Gabby's MP3 Player` const songHeader = document.createElement("h2") -songHeader.innerText = `Songs` +// songHeader.innerText = `Songs` siteHeader.append(headerContent, songHeader) document.body.insertBefore(siteHeader, songs) const timeLeft = document.createElement('h3') timeLeft.innerText = 'Time Left will be displayed here' document.body.insertBefore(timeLeft, songs) const playlistHeader = document.createElement("h2") -playlistHeader.innerText = `Playlists:` +// playlistHeader.innerText = `Playlists:` document.body.insertBefore(playlistHeader, playlists) // sort songs and playlists using chained ternary @@ -183,18 +193,22 @@ function sortSongsAndPlaylists () { 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) songs.append(newSong) }) + // paint songs on load: + setColors(player.songs) } appendToSongsDiv() function appendToPlaylistsDiv() { - sortSongsAndPlaylists(); + player.playlists.forEach((playlist) => { const newPlaylist = createPlaylistElement(playlist) playlists.append(newPlaylist) @@ -205,5 +219,5 @@ function appendToPlaylistsDiv() { } appendToPlaylistsDiv() -// paint songs on load: -setColors(player.songs) + + diff --git a/scripts/index.new.js b/scripts/index.new.js index 44a836f3..102ab560 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -9,7 +9,6 @@ document.addEventListener('click', handleSongClickEvent); */ function playSong(songId) { // Your code here - console.log(`song is playing`); } /** @@ -21,15 +20,34 @@ function removeSong(id) { document.querySelector('.song' + id).remove() } +function generateNewId () { + const arrayOfSongs = document.querySelectorAll('.song-element'); + const arrayOfIds = []; + + for (let song of arrayOfSongs) { + arrayOfIds.push(song.className[song.className.length-1]) + if (arrayOfIds.length > 9) { + arrayOfIds.push((String(arrayOfIds.length)[0] * 10) + + Number(song.className[song.className.length-1])) + } + + } + const newId = Math.max(...arrayOfIds) + 1; + return newId +} /** * Adds a song to the player, and updates the DOM to match. */ -function addSong({ title, album, artist, duration, coverArt }) { - // Your code here +function addSong({id, title, album, artist, duration, coverArt }) { const newSong = createSongElement(arguments[0]); - songs.append(newSong) - // sortSongsAndPlaylists() // just want to see how this looks without + newSong.classList.add('song' + id) + // try calling the function each time, this way maybe it will reamin sorted. + appendToSongsDiv(); + + + // appendToSongsDiv() // this re appends everything. + // why is color off ? } /** @@ -45,40 +63,47 @@ function handleSongClickEvent(event) { if (removeButton) { // this next line takes the id of the song: - const id = removeButton.className[removeButton.className.length-1]; + const id = removeButton.className.match(/(\d+)/)[0]; return removeSong(id) } if (playButton) { - const id = playButton.className[playButton.className.length-1]; + const id = playButton.className.match(/(\d+)/)[0]; return originalPlaySong(id) } } -document.addEventListener('click', handleAddSongEvent) - /** * Handles a click event on the button that adds songs. * * @param {MouseEvent} event - the click event */ function handleAddSongEvent(event) { - // Your code here - const addBtn = event.target.closest('#add-button') - if (!addBtn) return; // Get outa here if this isn't add button; + // // Your code here + // const addBtn = event.target.closest('#add-button') + // if (!addBtn) return; // Get outa here if this isn't add button; const arrayOfInputs = document.querySelectorAll('input') const songObject = { + id: generateNewId(), title: arrayOfInputs[0].value, album: arrayOfInputs[1].value, artist: arrayOfInputs[2].value, - duration: Number(arrayOfInputs[3].value), + duration: arrayOfInputs[3].value, coverArt: arrayOfInputs[4].value } for (let i = 0; i < arrayOfInputs.length; i++) { if (arrayOfInputs[i].value === '') { throw alert(arrayOfInputs[i].placeholder + ` can't be an empty input`) } + if (!arrayOfInputs[3].value.includes(':')) { + throw alert('Invlid time format') + } } + // push the song into the player object + // then it is easy to sort them by their names + player.songs.push(songObject) + // making sure the song is painted in correlation with its duration + player.songs[player.songs.length-1].duration = durationConverter(arrayOfInputs[3].value) addSong(songObject) } @@ -140,5 +165,4 @@ generateSongs() generatePlaylists() // Making the add-song-button actually do something -// commenting this out for now: -// document.getElementById("add-button").addEventListener("click", handleAddSongEvent) +document.getElementById("add-button").addEventListener("click", handleAddSongEvent) From 60680e462ccee74a41438de162b15e1a0795060a Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Fri, 17 Sep 2021 16:57:25 +0300 Subject: [PATCH 23/29] Bonus reqs removeSong function now updates state of player.playlists as well. Everytime you delete a song that exists in a playlist it gets delted in the playlist as well, if you delete all of the songs in the playlist the playlist itself is deleted. When adding a new song the list will remain sorted by title. All of the new songs are colored by their duration. --- leftToDo.txt | 7 +++---- scripts/index.js | 5 ++++- scripts/index.new.js | 11 +++++++++++ scripts/player.js | 6 ------ 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/leftToDo.txt b/leftToDo.txt index 482d3108..910ca4e6 100644 --- a/leftToDo.txt +++ b/leftToDo.txt @@ -1,9 +1,8 @@ -each song is generated an id so it can be played and removed. +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. +Double playlists, songs header.DoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDone -bonus: added songs will remain sorted by title. for this you need to sort the elements in appndToSongsDiv and not sort the existing hardcoded player object. +bonus: added songs will remain sorted by title.DoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDoneDone -if songs will first be added to player then appended to songs it will be better diff --git a/scripts/index.js b/scripts/index.js index 3b1824b8..07181659 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -3,6 +3,7 @@ function playlistDuration(id) { 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 @@ -132,6 +133,7 @@ function createPlaylistElement({ id, name, songs }) { 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' @@ -208,7 +210,8 @@ function appendToSongsDiv() { appendToSongsDiv() function appendToPlaylistsDiv() { - + playlists.innerText = '' + sortSongsAndPlaylists() player.playlists.forEach((playlist) => { const newPlaylist = createPlaylistElement(playlist) playlists.append(newPlaylist) diff --git a/scripts/index.new.js b/scripts/index.new.js index 102ab560..756a983f 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -18,6 +18,17 @@ function playSong(songId) { */ function removeSong(id) { document.querySelector('.song' + id).remove() + for (let i = 0; i < player.playlists.length; i++) { + if (player.playlists[i].songs.includes(+id)) { + player.playlists[i].songs.splice( + player.playlists[i].songs.indexOf(+id), 1 + ) + } + if (player.playlists[i].songs.length < 1) { + delete player.playlists[i] + } + } + appendToPlaylistsDiv() } function generateNewId () { diff --git a/scripts/player.js b/scripts/player.js index f2604096..5a85f825 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,9 +62,3 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } -// sort songs and playlists using chained ternary -// 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)) - -const idArray = player.songs.map((song) => song.id) -console.log() From 041de1250e2ee44d561230413a84ea5f181de4a4 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sat, 18 Sep 2021 21:07:13 +0300 Subject: [PATCH 24/29] Progress bar worked a lot on css. made a progress bar that slowly fills up when you're playing a song. made the add song section hidden unless you click on the

add song. did a bit of updating, there was a bug where anytime you would add a new song all of the old deleted songs would re appear --- index.new.html | 2 +- leftToDo2.txt | 8 +++ scripts/index.js | 19 +++--- scripts/index.new.js | 146 +++++++++++++++++++++++++++++++++++++++++-- scripts/player.js | 2 +- style.css | 86 ++++++++++++++++--------- 6 files changed, 215 insertions(+), 48 deletions(-) create mode 100644 leftToDo2.txt diff --git a/index.new.html b/index.new.html index 03a72c05..bbdb5ed1 100644 --- a/index.new.html +++ b/index.new.html @@ -12,7 +12,7 @@

Awesome Player!!!

-

Add a new song

+

Click me to add a new song

diff --git a/leftToDo2.txt b/leftToDo2.txt new file mode 100644 index 00000000..ffd80e5d --- /dev/null +++ b/leftToDo2.txt @@ -0,0 +1,8 @@ +Buttons Delete garbage can and play button, background should be same color. +Add a new song should be button that drops down inputs. + +If you want to change location of progress bar you should take it out of append div function. +need to fix generateId function. + +// there is a bug +after you delete songs when you add a new song it reupdates all the original songs diff --git a/scripts/index.js b/scripts/index.js index 07181659..39bd662a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -63,7 +63,7 @@ function originalPlaySong(songId) { soughtSong.setAttribute("style", "background-color: rgb(96, 150, 163)") soughtSong.setAttribute("style", "cursor: pointer") soughtSong.classList.add("current-song") - alert(`${song.title} is playing`) + console.log(`${song.title} is playing`); } }) // index++ @@ -87,15 +87,15 @@ function setColors (songArray) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song-element"] - const attrs = {onclick: 'console.log("this is an old functionality within createSongElement func located index.js")' } // onclick: `playSong(${id})` + 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('🎶') + playButton.append('⏯') const removeButton = document.createElement('button') removeButton.classList.add('remove-button', 'remove-button' + id) - removeButton.append('❌') + removeButton.append('✖️') image.src = coverArt image.alt = 'cover-photo' for (let key in arguments[0]) { @@ -117,8 +117,8 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { } } ul.appendChild(image) - ul.append(playButton) - ul.append(removeButton) + const divOfButtons = createElement('div', [playButton, removeButton], ['button-container']) + ul.append(divOfButtons) children.push(ul) return createElement("div", children, classes, attrs) } @@ -182,9 +182,8 @@ const songHeader = document.createElement("h2") // songHeader.innerText = `Songs` siteHeader.append(headerContent, songHeader) document.body.insertBefore(siteHeader, songs) -const timeLeft = document.createElement('h3') -timeLeft.innerText = 'Time Left will be displayed here' -document.body.insertBefore(timeLeft, songs) +document.body.insertBefore(makeProgressBar(), songs) + const playlistHeader = document.createElement("h2") // playlistHeader.innerText = `Playlists:` document.body.insertBefore(playlistHeader, playlists) @@ -202,6 +201,7 @@ function appendToSongsDiv() { player.songs.forEach((song) => { const newSong = createSongElement(song) newSong.classList.add("song" + song.id) + // newSong.append(makeProgressBar()) songs.append(newSong) }) // paint songs on load: @@ -224,3 +224,4 @@ appendToPlaylistsDiv() + diff --git a/scripts/index.new.js b/scripts/index.new.js index 756a983f..93b189b7 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -1,6 +1,11 @@ // adding an event listener to call other functions: document.addEventListener('click', handleSongClickEvent); +// code to help automatically play next song +// const arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1]; +// let index; +// let interval2; + /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -18,7 +23,16 @@ function playSong(songId) { */ function removeSong(id) { document.querySelector('.song' + id).remove() + // this makes sure they aren't re-added when you add a newSong + for (let i = 0; i < player.songs.length; i++) { + if (player.songs[i].id == id) { + player.songs.splice(i, 1) + } + } for (let i = 0; i < player.playlists.length; i++) { + // if the playlisted is deleted jump to the next + // one/ get out of the loop + if (!player.playlists[i]) continue if (player.playlists[i].songs.includes(+id)) { player.playlists[i].songs.splice( player.playlists[i].songs.indexOf(+id), 1 @@ -41,6 +55,8 @@ function generateNewId () { arrayOfIds.push((String(arrayOfIds.length)[0] * 10) + Number(song.className[song.className.length-1])) } + // match(/(\d+)/)[0] use this. + // reference in line 80 } const newId = Math.max(...arrayOfIds) + 1; @@ -79,7 +95,10 @@ function handleSongClickEvent(event) { } if (playButton) { const id = playButton.className.match(/(\d+)/)[0]; - return originalPlaySong(id) + // console.log(id); + // index = arrayOfSongIds.indexOf(+id) + // interval2 = setInterval(activateSong, 1000*getSongDuration(id), id) + return activateSong(id) } } @@ -89,10 +108,6 @@ function handleSongClickEvent(event) { * @param {MouseEvent} event - the click event */ function handleAddSongEvent(event) { - // // Your code here - // const addBtn = event.target.closest('#add-button') - // if (!addBtn) return; // Get outa here if this isn't add button; - const arrayOfInputs = document.querySelectorAll('input') const songObject = { id: generateNewId(), @@ -107,7 +122,7 @@ function handleAddSongEvent(event) { throw alert(arrayOfInputs[i].placeholder + ` can't be an empty input`) } if (!arrayOfInputs[3].value.includes(':')) { - throw alert('Invlid time format') + throw alert('Invalid time format') } } // push the song into the player object @@ -177,3 +192,122 @@ generatePlaylists() // Making the add-song-button actually do something document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + +function makeProgressBar () { + const myProgress = document.createElement('div'); + const myBar = document.createElement('div'); + myProgress.setAttribute("class", "myProgress"); + myBar.setAttribute("class", "myBar"); + myProgress.append(myBar); + return myProgress +} + +// let tempVar; +// const setToZero = () => tempVar = 0; +// const timeoutSetToZero = setTimeout(setToZero, 1000 * duration) // makes +// sure only one song can be in the progress +// bar at a time. +function activateSong(id) { + + originalPlaySong(id) // keep old playsong alive still + + const duration = getSongDuration(id) + + // arrayOfSongIds.splice(index, 1) // this line only relevant for timeout + // id = arrayOfSongIds[index] // this line only relevant for timeout + + let tempVar = 0; + + + function progress () { + if (tempVar == 0) { + tempVar = 1; + const myBar = document.querySelector(".myBar"); + if (!myBar.getAttribute("style")) { + + } + else { + document.querySelector('.myBar').remove() + document.body.insertBefore(makeProgressBar(), songs) + } + let width = 1; + const interval = setInterval(frame, 10*duration); // progress slowly incrementing + function frame() { + if (width >= 100) { // (if bar is full) stop the function and reset the bar to empty + clearInterval(interval); + tempVar = 0; + } else { + width++; + myBar.style.width = width + "%"; + } + } + } + } + progress() + // if (!arrayOfSongIds[index]) { // this line only relevant for timeout + // console.log('This is the clear interval'); + // clearTimeout(interval2) + // } +} + +function getSongDuration (id) { + let duration; + player.songs.forEach(song => { + if (song.id == id) { + duration = song.duration + } + }) + return duration +} + +// there is a current-song class FYI +// maybe keep a global variable named duration/songDuration +// +// psuedo for bonus: +// when you click a song an interval is called with the songs duration +// something like: const interval = setInterval(activateSong, getSongDuration(id), id) + +// BOTTOM LINE THE 2 IMPORTANT THINGS TO DO AT END OF +// ACTIVATESONG FUNCTION ARE +// 1.SPLICE(INDEX, 1) +// 2. ID = ARRAYOFSONGS[INDEX] +// 3. BEFORE SPLICE PUT: +// if (!arrayOfIds[index]) clearInterval(interval) +// this will make sure it stops when it gets to the end + +// const arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1]; +// let index; // let's say id is 7 + +// put this code inside handleSongClickEvent: +// index = arrayOfSongs.indexOf(id) // in that case index is 2 +// at the bottom of the function (after the splice!) this will go: +// id = arrayOfSongs[index] + + +// there will be a global variable (sorted by order) +// arrayOfSongIds: e.g [4, 5, 7, 6, 3, 2, 1] +// each time at the end of this function it will: +// arrayOfSongIds.splice(index, 1) // eliminate song from array +// this way you don't have to increment index +// if you eliminate 7 at index 2 now 6 is the song you want +// at index 2 + +// make sure to keep index and arrayOfSongIds global vars + +// id = 7 +// arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1] +// let index = arrayOfSongIds.indexOf(id) + +document.querySelector('.click-to-add').addEventListener('click', showInputs) +function showInputs () { + const inputDiv = document.querySelector('#inputs') + const addButton = document.querySelector('#add-button') + if (inputDiv.style.visibility === 'hidden' || (!inputDiv.getAttribute("style"))) { + inputDiv.style.visibility = 'visible' + addButton.style.visibility = 'visible' + } else { + inputDiv.style.visibility = 'hidden' + addButton.style.visibility = 'hidden' + } + +} \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..e927aaec 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -53,7 +53,7 @@ const player = { title: "Sons of Winter and Stars", album: "Time I", artist: "Wintersun", - duration: 811, + duration: 300, coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", }, ], diff --git a/style.css b/style.css index 930af1d3..5147e6af 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,35 @@ /* Your code here */ +#songs { + display: flex; + flex-wrap: wrap; + margin-top: 100px; + justify-content: space-around; +} + +.song-element { + display: flex; + flex-basis: 20%; +} +.song-element:hover { + color: red; +} +.song-element, #playlists{ + border-radius: 30px; + box-shadow: 5px 10px; + margin: 20px; +} +.button-container { + display: flex; + justify-content: space-around; + align-items: flex-end; +} +.remove-button, .play-button { + background-color: black; +} +.play-button { + background-color: mediumslateblue; +} + body { text-align: center; background-color: rgb(43, 122, 226); @@ -14,43 +45,36 @@ li { .current-song { background-color: blueviolet; } -/* .current-song:hover { - font-size: 140%; -} */ -.song-element, #playlists{ - border-radius: 30px; - box-shadow: 5px 10px; - margin: 20px; +img { + width: 60%; } -.song-element { - display: flex; - justify-content: center; - width: 50%; +button { + /* display: flex; */ + font-size: 150%; + } -div { - display: flex; - flex-direction: column; - align-items: center; -} -img { - width: 60%; -} +.myProgress { + width: 100%; + background-color: grey; + position: sticky; + top: 0; -/* this is the duration. plz add a class to it later and don't mention all h3 */ -h3 { - position: fixed; - max-width: 10%; -} + } + +.myBar { + width: 1%; + height: 30px; + background-color: red; + } -.song-element:hover { - font-size: 140%; -} + .click-to-add:hover { + cursor: pointer; + } -button { - display: flex; - font-size: 200%; -} \ No newline at end of file + #inputs, #add-button { + visibility: hidden; + } \ No newline at end of file From 0eb791245645c83dd85ac25c03d8e0c17544033f Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 19 Sep 2021 07:55:28 +0300 Subject: [PATCH 25/29] Small fix Previously when you would play a song a click on another song would not instantly start playing it. --- leftToDo2.txt | 10 ++-------- scripts/index.new.js | 12 ++++-------- 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/leftToDo2.txt b/leftToDo2.txt index ffd80e5d..516a8955 100644 --- a/leftToDo2.txt +++ b/leftToDo2.txt @@ -1,8 +1,2 @@ -Buttons Delete garbage can and play button, background should be same color. -Add a new song should be button that drops down inputs. - -If you want to change location of progress bar you should take it out of append div function. -need to fix generateId function. - -// there is a bug -after you delete songs when you add a new song it reupdates all the original songs +// automatically switches between songs not working +// first click only pauses progress bar but doesn't automatically start next song. \ No newline at end of file diff --git a/scripts/index.new.js b/scripts/index.new.js index 93b189b7..a842cd33 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -208,28 +208,24 @@ function makeProgressBar () { // sure only one song can be in the progress // bar at a time. function activateSong(id) { - - originalPlaySong(id) // keep old playsong alive still - const duration = getSongDuration(id) - // arrayOfSongIds.splice(index, 1) // this line only relevant for timeout // id = arrayOfSongIds[index] // this line only relevant for timeout - let tempVar = 0; - - function progress () { if (tempVar == 0) { tempVar = 1; const myBar = document.querySelector(".myBar"); if (!myBar.getAttribute("style")) { - + console.log('something'); } else { + console.log('something2'); document.querySelector('.myBar').remove() document.body.insertBefore(makeProgressBar(), songs) + activateSong(id) } + originalPlaySong(id) // keep old playsong alive still let width = 1; const interval = setInterval(frame, 10*duration); // progress slowly incrementing function frame() { From 9c198e3c8017420f4a6d5c4546487a557e71c41f Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 19 Sep 2021 08:27:46 +0300 Subject: [PATCH 26/29] 1 before final\ final commit mainly fixed generate id function. where there were old working functions I left them in the old index.js --- scripts/index.js | 28 ----------- scripts/index.new.js | 112 ++++++++----------------------------------- 2 files changed, 19 insertions(+), 121 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 39bd662a..2948b747 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -34,24 +34,6 @@ function durationConverter(time) { * @param {String} songId - the ID of the song to play */ -// ..psuedo : -// replace playSong with setTimeout (playSong, songDuration that matches id) -// at the end of playSong function increment index++ -// keep index like this: -// setTimeout(func, 2500, par1, par2) -// let tempId = null -// const arrayOfIds = [4,5,7,6,3,2,1] -// function testFunc (duration, id) { -// id -// setTimeout(playSong, duration, arrayOfIds[index]) -// index++ -// } -// let index = 0 -// function engulfingFunction (songId, duration) { -// index = arrayOfIds.indexOf(songId) -// const doesSomething = setTimeout(playSong,duration*1000, songId) -// } - function originalPlaySong(songId) { const resetSongs = document.querySelectorAll(".song-element") resetSongs.forEach((song) => { @@ -63,7 +45,6 @@ function originalPlaySong(songId) { soughtSong.setAttribute("style", "background-color: rgb(96, 150, 163)") soughtSong.setAttribute("style", "cursor: pointer") soughtSong.classList.add("current-song") - console.log(`${song.title} is playing`); } }) // index++ @@ -160,15 +141,6 @@ 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 = {}) { - const element = document.createElement(tagName) - children.forEach((child) => element.append(child)) - element.classList = classes.join(" ") - for (const attr in attributes) { - element.setAttribute(attr, attributes[attr]) - } - return element; -} // You can write more code below this line diff --git a/scripts/index.new.js b/scripts/index.new.js index a842cd33..db7f2717 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -1,11 +1,6 @@ // adding an event listener to call other functions: document.addEventListener('click', handleSongClickEvent); -// code to help automatically play next song -// const arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1]; -// let index; -// let interval2; - /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -13,7 +8,7 @@ document.addEventListener('click', handleSongClickEvent); * @param {Number} songId - the ID of the song to play */ function playSong(songId) { - // Your code here + // using activateSong } /** @@ -48,16 +43,8 @@ function removeSong(id) { function generateNewId () { const arrayOfSongs = document.querySelectorAll('.song-element'); const arrayOfIds = []; - for (let song of arrayOfSongs) { - arrayOfIds.push(song.className[song.className.length-1]) - if (arrayOfIds.length > 9) { - arrayOfIds.push((String(arrayOfIds.length)[0] * 10) + - Number(song.className[song.className.length-1])) - } - // match(/(\d+)/)[0] use this. - // reference in line 80 - + arrayOfIds.push(song.className.match(/(\d+)/)[0]) } const newId = Math.max(...arrayOfIds) + 1; return newId @@ -68,13 +55,7 @@ function generateNewId () { function addSong({id, title, album, artist, duration, coverArt }) { const newSong = createSongElement(arguments[0]); newSong.classList.add('song' + id) - // try calling the function each time, this way maybe it will reamin sorted. - appendToSongsDiv(); - - - // appendToSongsDiv() // this re appends everything. - // why is color off ? } /** @@ -86,7 +67,6 @@ function addSong({id, title, album, artist, duration, coverArt }) { function handleSongClickEvent(event) { const removeButton = event.target.closest('.remove-button'); const playButton = event.target.closest('.play-button'); - const addButton = event.target.closest('.add-button') // later will add this if (removeButton) { // this next line takes the id of the song: @@ -95,9 +75,6 @@ function handleSongClickEvent(event) { } if (playButton) { const id = playButton.className.match(/(\d+)/)[0]; - // console.log(id); - // index = arrayOfSongIds.indexOf(+id) - // interval2 = setInterval(activateSong, 1000*getSongDuration(id), id) return activateSong(id) } } @@ -137,22 +114,14 @@ function handleAddSongEvent(event) { * Creates a song DOM element based on a song object. */ function createSongElement2({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = [] - const attrs = {} - const eventListeners = {} - return createElement("div", children, classes, attrs, eventListeners) + // using old createSongElement function } /** * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { - const children = [] - const classes = [] - const attrs = {} - const eventListeners = {} - return createElement("div", children, classes, attrs, eventListeners) + // using old createSongElement function } /** @@ -168,27 +137,33 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element * @param {Object} eventListeners - the event listeners on the element */ -function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) { - // Your code here -} +function createElement(tagName, children = [], classes = [], attributes = {}) { + const element = document.createElement(tagName) + children.forEach((child) => element.append(child)) + element.classList = classes.join(" ") + for (const attr in attributes) { + element.setAttribute(attr, attributes[attr]) + } + return element; +} /** * Inserts all songs in the player as DOM elements into the songs list. */ function generateSongs() { - // Your code here + /// using appendToSongsDiv } /** * Inserts all playlists in the player as DOM elements into the playlists list. */ function generatePlaylists() { - // Your code here + // using appendToPlaylistsDiv } // Creating the page structure -generateSongs() -generatePlaylists() +// generateSongs() +// generatePlaylists() // Making the add-song-button actually do something document.getElementById("add-button").addEventListener("click", handleAddSongEvent) @@ -202,25 +177,17 @@ function makeProgressBar () { return myProgress } -// let tempVar; -// const setToZero = () => tempVar = 0; -// const timeoutSetToZero = setTimeout(setToZero, 1000 * duration) // makes -// sure only one song can be in the progress -// bar at a time. + function activateSong(id) { const duration = getSongDuration(id) - // arrayOfSongIds.splice(index, 1) // this line only relevant for timeout - // id = arrayOfSongIds[index] // this line only relevant for timeout let tempVar = 0; function progress () { if (tempVar == 0) { tempVar = 1; const myBar = document.querySelector(".myBar"); if (!myBar.getAttribute("style")) { - console.log('something'); } else { - console.log('something2'); document.querySelector('.myBar').remove() document.body.insertBefore(makeProgressBar(), songs) activateSong(id) @@ -240,10 +207,7 @@ function activateSong(id) { } } progress() - // if (!arrayOfSongIds[index]) { // this line only relevant for timeout - // console.log('This is the clear interval'); - // clearTimeout(interval2) - // } + } function getSongDuration (id) { @@ -256,44 +220,6 @@ function getSongDuration (id) { return duration } -// there is a current-song class FYI -// maybe keep a global variable named duration/songDuration -// -// psuedo for bonus: -// when you click a song an interval is called with the songs duration -// something like: const interval = setInterval(activateSong, getSongDuration(id), id) - -// BOTTOM LINE THE 2 IMPORTANT THINGS TO DO AT END OF -// ACTIVATESONG FUNCTION ARE -// 1.SPLICE(INDEX, 1) -// 2. ID = ARRAYOFSONGS[INDEX] -// 3. BEFORE SPLICE PUT: -// if (!arrayOfIds[index]) clearInterval(interval) -// this will make sure it stops when it gets to the end - -// const arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1]; -// let index; // let's say id is 7 - -// put this code inside handleSongClickEvent: -// index = arrayOfSongs.indexOf(id) // in that case index is 2 -// at the bottom of the function (after the splice!) this will go: -// id = arrayOfSongs[index] - - -// there will be a global variable (sorted by order) -// arrayOfSongIds: e.g [4, 5, 7, 6, 3, 2, 1] -// each time at the end of this function it will: -// arrayOfSongIds.splice(index, 1) // eliminate song from array -// this way you don't have to increment index -// if you eliminate 7 at index 2 now 6 is the song you want -// at index 2 - -// make sure to keep index and arrayOfSongIds global vars - -// id = 7 -// arrayOfSongIds = [4, 5, 7, 6, 3, 2, 1] -// let index = arrayOfSongIds.indexOf(id) - document.querySelector('.click-to-add').addEventListener('click', showInputs) function showInputs () { const inputDiv = document.querySelector('#inputs') From 5aaa57a4da221d94e8cea94936c12e9243152c8d Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 19 Sep 2021 09:49:54 +0300 Subject: [PATCH 27/29] Final commit Final bonus req accomplished. songs automatically continue playing until the end --- scripts/index.new.js | 17 ++++++++++++++++- scripts/player.js | 14 +++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index db7f2717..d0a21ff0 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -207,7 +207,9 @@ function activateSong(id) { } } progress() - + if (getNextId(id)) { + const timeoutInterval = setTimeout(activateSong, duration*1000, getNextId(id)) + } } function getSongDuration (id) { @@ -232,4 +234,17 @@ function showInputs () { addButton.style.visibility = 'hidden' } +} + +function getNextId (id) { + let nextId; + const songElements = document.querySelectorAll('.song-element') + for (let i = 0; i < songElements.length; i++) { + console.log(); + const currentId = songElements[i].className.match(/(\d+)/)[0]; + if (currentId == id && + currentId != songElements[songElements.length-1].className.match(/(\d+)/)[0]) { + return nextId = songElements[i+1].className.match(/(\d+)/)[0]; + } + } } \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index e927aaec..09fa102e 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -5,7 +5,7 @@ const player = { title: "Vortex", album: "Wallflowers", artist: "Jinjer", - duration: 242, + duration: 3, coverArt: "./images/cover_art/jinjer_vortex.jpg", }, { @@ -13,7 +13,7 @@ const player = { title: "Vinda", album: "Godtfolk", artist: "Songleikr", - duration: 160, + duration: 5, coverArt: "./images/cover_art/songleikr_vinda.jpg", }, { @@ -21,7 +21,7 @@ const player = { title: "Shiroyama", album: "The Last Stand", artist: "Sabaton", - duration: 213, + duration: 4, coverArt: "./images/cover_art/sabaton_shiroyama.jpg", }, { @@ -29,7 +29,7 @@ const player = { title: "Thunderstruck", album: "The Razors Edge", artist: "AC/DC", - duration: 292, + duration: 6, coverArt: "./images/cover_art/acdc_thunderstruck.jpg", }, { @@ -37,7 +37,7 @@ const player = { title: "All is One", album: "All is One", artist: "Orphaned Land", - duration: 270, + duration: 2, coverArt: "./images/cover_art/orphaned_land_all_is_one.jpg", }, { @@ -45,7 +45,7 @@ const player = { title: "As a Stone", album: "Show Us What You Got", artist: "Full Trunk", - duration: 259, + duration: 3, coverArt: "./images/cover_art/full_trunk_as_a_stone.jpg", }, { @@ -53,7 +53,7 @@ const player = { title: "Sons of Winter and Stars", album: "Time I", artist: "Wintersun", - duration: 300, + duration: 7, coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", }, ], From dc206352324a7b6fa2fdecfb3f21fbe4205337f1 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 19 Sep 2021 09:53:43 +0300 Subject: [PATCH 28/29] Forgot songs duration Revert Back to real songs duration --- scripts/player.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/scripts/player.js b/scripts/player.js index 09fa102e..5a85f825 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -5,7 +5,7 @@ const player = { title: "Vortex", album: "Wallflowers", artist: "Jinjer", - duration: 3, + duration: 242, coverArt: "./images/cover_art/jinjer_vortex.jpg", }, { @@ -13,7 +13,7 @@ const player = { title: "Vinda", album: "Godtfolk", artist: "Songleikr", - duration: 5, + duration: 160, coverArt: "./images/cover_art/songleikr_vinda.jpg", }, { @@ -21,7 +21,7 @@ const player = { title: "Shiroyama", album: "The Last Stand", artist: "Sabaton", - duration: 4, + duration: 213, coverArt: "./images/cover_art/sabaton_shiroyama.jpg", }, { @@ -29,7 +29,7 @@ const player = { title: "Thunderstruck", album: "The Razors Edge", artist: "AC/DC", - duration: 6, + duration: 292, coverArt: "./images/cover_art/acdc_thunderstruck.jpg", }, { @@ -37,7 +37,7 @@ const player = { title: "All is One", album: "All is One", artist: "Orphaned Land", - duration: 2, + duration: 270, coverArt: "./images/cover_art/orphaned_land_all_is_one.jpg", }, { @@ -45,7 +45,7 @@ const player = { title: "As a Stone", album: "Show Us What You Got", artist: "Full Trunk", - duration: 3, + duration: 259, coverArt: "./images/cover_art/full_trunk_as_a_stone.jpg", }, { @@ -53,7 +53,7 @@ const player = { title: "Sons of Winter and Stars", album: "Time I", artist: "Wintersun", - duration: 7, + duration: 811, coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", }, ], From 75cd5fe88264b65be77811ddd1eb7c7c0ea4f113 Mon Sep 17 00:00:00 2001 From: gabbyMill Date: Sun, 19 Sep 2021 12:41:33 +0300 Subject: [PATCH 29/29] Little Fix Paint songs back to their original color after last song finished playing --- scripts/index.new.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/index.new.js b/scripts/index.new.js index d0a21ff0..29d2bbf3 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -209,6 +209,8 @@ function activateSong(id) { progress() if (getNextId(id)) { const timeoutInterval = setTimeout(activateSong, duration*1000, getNextId(id)) + } else { + const finishInterval = setTimeout(appendToSongsDiv, duration*1000) } }