From 9f9189f0f979a0c7f24b892600d643d1aa5ac18e Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:17:01 +0300 Subject: [PATCH 01/24] deleted all comments deleted all not necessary comments --- scripts/index.js | 29 ++++------------------------- scripts/player.js | 2 ++ style.css | 23 ++++++++++++++++++++++- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 6842c794..2f03e05e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,16 +1,9 @@ -/** - * Plays a song from the player. - * Playing a song means changing the visual indication of the currently playing song. - * - * @param {String} songId - the ID of the song to play - */ + function playSong(songId) { // Your code here } -/** - * Creates a song DOM element based on a song object. - */ + function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = [] @@ -18,9 +11,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { return createElement("div", children, classes, attrs) } -/** - * Creates a playlist DOM element based on a playlist object. - */ + function createPlaylistElement({ id, name, songs }) { const children = [] const classes = [] @@ -28,20 +19,8 @@ function createPlaylistElement({ id, name, songs }) { return createElement("div", children, classes, attrs) } -/** - * Creates a new DOM element. - * - * Example usage: - * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"}) - * - * @param {String} tagName - the type of the element - * @param {Array} children - the child elements for the new element. - * Each child can be a DOM element, or a string (if you just want a text element). - * @param {Array} classes - the class list of the new element - * @param {Object} attributes - the attributes for the new element - */ + function createElement(tagName, children = [], classes = [], attributes = {}) { // Your code here } -// You can write more code below this line diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..059a8c43 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,5 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } + + diff --git a/style.css b/style.css index f4645fe9..d23bcd67 100644 --- a/style.css +++ b/style.css @@ -1 +1,22 @@ -/* Your code here */ +html, +body { + text-align: center; + margin: 0px; + padding: 0px; +} +h1 { + text-align: center; +} +ul { + list-style-type: none; + margin-right: 2%; +} +.songs { + font-size: larger; +} +.playlists { + font-size: larger; +} +.selected { + background-color: lawngreen; +} \ No newline at end of file From 3a0e44c734a7d49997422e1f6e7bec6f68755530 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:19:17 +0300 Subject: [PATCH 02/24] PlaySong added --- scripts/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index 2f03e05e..e18a014a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,6 +1,14 @@ function playSong(songId) { - // Your code here + const selectedSong = document.getElementById(songId); + const classes = [] + classes.push(["selected"]) + + const songs = document.getElementsByClassName("song"); + for (let song of songs) { + song.classList.remove(classes) + } + selectedSong.classList.add(classes); } From fa34d57367f66c1eb165e0ae822ebe57c92fba6f Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:19:53 +0300 Subject: [PATCH 03/24] convertDuration added --- scripts/index.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index e18a014a..a02176c0 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,15 @@ - +const convertDuration = (duration) => { + + let min = String(Math.floor(duration / 60)); + let sec = String(duration % 60); + + min < 10 ? (min = '0' + String(min)) : min + sec < 10 ? (sec = '0' + String(sec)) : sec + + return min + ':' + sec + + } + function playSong(songId) { const selectedSong = document.getElementById(songId); const classes = [] From ef56d998b640e8264236581cf92fb66692b890d1 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:20:48 +0300 Subject: [PATCH 04/24] createSongElement added --- scripts/index.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index a02176c0..cefe993a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -9,7 +9,7 @@ const convertDuration = (duration) => { return min + ':' + sec } - + function playSong(songId) { const selectedSong = document.getElementById(songId); const classes = [] @@ -24,10 +24,30 @@ function playSong(songId) { function createSongElement({ id, title, album, artist, duration, coverArt }) { + const children = [] + const wrap = document.createElement("div"); + const titlePlayList = document.createElement("h1"); + titlePlayList.append("PlayLists"); + for (let i = 0; i < 5; i++) + { + if (arguments[i] === arguments[4]) + { + arguments[i] = convertDuration(arguments[4]); + } + let list = document.createElement("li"); + list.innerText = arguments[i] + wrap.append(list); + } + let currentImg= document.createElement("img"); + currentImg.src= arguments[5]; + wrap.appendChild(currentImg); + + children.push(wrap) const classes = [] - const attrs = { onclick: `playSong(${id})` } - return createElement("div", children, classes, attrs) + classes.push(["song"]) // CSS later + const attrs = { onclick: `playSong(${arguments[0]})`,} + return createElement("div", children, classes, attrs, arguments[0]) } From 93930ffcd5b8eb8f2fd56554d97358e7d26367ef Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:21:36 +0300 Subject: [PATCH 05/24] createPlaylistElement added --- scripts/index.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index cefe993a..39f01f06 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -52,10 +52,21 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { function createPlaylistElement({ id, name, songs }) { - const children = [] - const classes = [] + const children = []; + const wrapper = document.createElement("div"); + for(let arrgIndex = 0; arrgIndex < 3; arrgIndex++){ + + let par = arguments[arrgIndex] === arguments[1] ? document.createElement("h1") : document.createElement("p"); + par.innerHTML = arguments[arrgIndex]; + wrapper.appendChild(par); + } + children.push(wrapper); + const classes = []; + + classes.push(["playlist"]) const attrs = {} - return createElement("div", children, classes, attrs) + return createElement("div", children, classes, attrs, id) + } From 3a3df66b9a57cbf358f4d4fd298177a1c5537a4a Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:22:05 +0300 Subject: [PATCH 06/24] createElement added --- scripts/index.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 39f01f06..2a663df8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -70,7 +70,19 @@ function createPlaylistElement({ id, name, songs }) { } -function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here -} +function createElement(tagName, children = [], classes = [], attributes = {}, id) { + const element = document.createElement(tagName); + for (let child of children) + { + element.appendChild(child); + } + element.classList.add(classes); + Object.entries(attributes).forEach(([key,value]) => { + if (key !== undefined) { + element.setAttribute(key, value); + } + }) + element.id = id; + return element; +} From 4112f9feac86b1d5590fb7bb592053711ba6be0c Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:22:42 +0300 Subject: [PATCH 07/24] sort song and playlist was added --- scripts/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/scripts/index.js b/scripts/index.js index 2a663df8..2f14584d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -86,3 +86,10 @@ function createElement(tagName, children = [], classes = [], attributes = {}, id element.id = id; return element; } + +const sortBySong = () => { + player.songs.sort((a, b) => (a.title > b.title) * 2 - 1); +} +const sortByPlayList = () => { + player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); +} \ No newline at end of file From 35cdb2c3230721beb951379c35c4283fb30ac1af Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:23:38 +0300 Subject: [PATCH 08/24] extra func printAllSongs added --- scripts/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/scripts/index.js b/scripts/index.js index 2f14584d..bfff00d5 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -92,4 +92,13 @@ const sortBySong = () => { } const sortByPlayList = () => { player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); +} +const printAllSongs = () => { + const songPrint = document.getElementById("songs"); + + for(let song of player.songs){ + const { id,title, album, artist,duration,coverArt} = song; + const songElemnt = createSongElement(id, title, album, artist, duration, coverArt); + songPrint.appendChild(songElemnt); + } } \ No newline at end of file From 9500e709c876986b829f182eb59fda9019357d31 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:24:44 +0300 Subject: [PATCH 09/24] called all extra functions --- scripts/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index bfff00d5..72ecdf51 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -101,4 +101,6 @@ const printAllSongs = () => { const songElemnt = createSongElement(id, title, album, artist, duration, coverArt); songPrint.appendChild(songElemnt); } -} \ No newline at end of file +} +sortBySong(); +printAllSongs(); \ No newline at end of file From b244b5f2f29825bd27778438fb3c981f2f964b86 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:25:48 +0300 Subject: [PATCH 10/24] printAllPlaylists added --- scripts/index.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index 72ecdf51..04386909 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -102,5 +102,15 @@ const printAllSongs = () => { songPrint.appendChild(songElemnt); } } +const printAllPlaylists = () => { + const playlistPrint = document.getElementById("playlists") + + for (let playlist of player.playlists) { + const {id, name,songs} = playlist; + const playlistElem = createPlaylistElement(id, name, songs); + playlistPrint.appendChild(playlistElem); + } +} sortBySong(); -printAllSongs(); \ No newline at end of file +printAllSongs(); +printAllPlaylists(); \ No newline at end of file From 6a1aef52083d1ec2e13914c45805a208a08afe4a Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 07:37:42 +0300 Subject: [PATCH 11/24] beutify css --- scripts/index.js | 5 ++++- style.css | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index 04386909..51a180cc 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -45,7 +45,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { children.push(wrap) const classes = [] - classes.push(["song"]) // CSS later + classes.push(["song"]) const attrs = { onclick: `playSong(${arguments[0]})`,} return createElement("div", children, classes, attrs, arguments[0]) } @@ -110,6 +110,9 @@ const printAllPlaylists = () => { const playlistElem = createPlaylistElement(id, name, songs); playlistPrint.appendChild(playlistElem); } +} +const durationTime = (duration) =>{ + } sortBySong(); printAllSongs(); diff --git a/style.css b/style.css index d23bcd67..fec9e0f3 100644 --- a/style.css +++ b/style.css @@ -18,5 +18,7 @@ ul { font-size: larger; } .selected { + width: 40%; background-color: lawngreen; + margin: auto; } \ No newline at end of file From 7bb4b8a2011c6bbe110462b57ab4fb8960bc736a Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 15:20:40 +0300 Subject: [PATCH 12/24] Tomer code added and deleted almost all of my code --- .vscode/launch.json | 16 ++++ scripts/index.js | 174 ++++++++++++++++++++++++++------------------ style.css | 3 + 3 files changed, 121 insertions(+), 72 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..ba515d0e --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://127.0.0.1:5500/index.html", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 51a180cc..7c0dad89 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,4 @@ +// converting duration const convertDuration = (duration) => { let min = String(Math.floor(duration / 60)); @@ -7,113 +8,142 @@ const convertDuration = (duration) => { sec < 10 ? (sec = '0' + String(sec)) : sec return min + ':' + sec - } - + function playSong(songId) { - const selectedSong = document.getElementById(songId); - const classes = [] - classes.push(["selected"]) - - const songs = document.getElementsByClassName("song"); - for (let song of songs) { - song.classList.remove(classes) - } - selectedSong.classList.add(classes); + // const selectedSong = document.getElementById(songId); + // const classes = [] + // classes.push(["selected"]) + + // const songs = document.getElementsByClassName("song"); + // for (let song of songs) { + + // setInterval(function(){ song.classList.remove(classes); }, 3000); + // } + // selectedSong.classList.add(classes); } + const coverArtfun = (id) =>{ + for(let coverA of player.songs){ + if(coverA.id === id){ + return coverA.id[coverArt]; + } + } + } +// gives platlist duration +function playlistDuration(id) { + const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); + + // Reduce function to sum all the song durations, by finding each of them, and then adding to the sum + return foundPlaylist.songs.reduce((sum, currSong) => + sum + player.songs.find(song => song.id === currSong).duration, 0); + } function createSongElement({ id, title, album, artist, duration, coverArt }) { - - const children = [] - const wrap = document.createElement("div"); - const titlePlayList = document.createElement("h1"); - titlePlayList.append("PlayLists"); - for (let i = 0; i < 5; i++) - { - if (arguments[i] === arguments[4]) - { - arguments[i] = convertDuration(arguments[4]); - } - let list = document.createElement("li"); - list.innerText = arguments[i] - wrap.append(list); - } - let currentImg= document.createElement("img"); - currentImg.src= arguments[5]; - wrap.appendChild(currentImg); - - children.push(wrap) - const classes = [] - classes.push(["song"]) - const attrs = { onclick: `playSong(${arguments[0]})`,} - return createElement("div", children, classes, attrs, arguments[0]) -} + const artistEl = createElement("span", [artist]); + const durationEl = createElement("span", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); + return createElement("div", ["Artist: ", artistEl, "Duration: ", durationEl, imgEl]); + } -function createPlaylistElement({ id, name, songs }) { +function createPlaylistElement({id,name, songs = []} ) { const children = []; - const wrapper = document.createElement("div"); - for(let arrgIndex = 0; arrgIndex < 3; arrgIndex++){ - - let par = arguments[arrgIndex] === arguments[1] ? document.createElement("h1") : document.createElement("p"); - par.innerHTML = arguments[arrgIndex]; - wrapper.appendChild(par); - } - children.push(wrapper); const classes = []; + const attrs = {}; + const idEl = createElement("span", ["" + id] ,["id"]); + const playListName = document.createElement("h1",[name]); + const PLsongs = document.createElement("p",[],[songs]); + const durationEl = createElement("span", ["" + convertDuration(playlistDuration(id))] ,["duration", "short-duration"]); + classes.push("playlist") + children.push(idEl,"Play list Name: ",playListName,"Songs: ", PLsongs," Duration: ", durationEl); + + return createElement("div", children, classes, attrs) + // for(let arrgIndex = 0; arrgIndex < 3; arrgIndex++){ + + // let par = arguments[arrgIndex] === arguments[1] ? document.createElement("h1") : document.createElement("p"); + // par.innerHTML = arguments[arrgIndex]; + // wrapper.appendChild(par); + // } + // children.push(wrapper); + // const classes = []; - classes.push(["playlist"]) - const attrs = {} - return createElement("div", children, classes, attrs, id) + // classes.push(["playlist"]) + // const attrs = {} + // return createElement("div", children, classes, attrs, id); } -function createElement(tagName, children = [], classes = [], attributes = {}, id) { - const element = document.createElement(tagName); - for (let child of children) - { - element.appendChild(child); +function createElement(tagName, children = [], classes = [], attributes = {}) { + const el = document.createElement(tagName); + + // Children + for(const child of children) { + el.append(child); } - element.classList.add(classes); - Object.entries(attributes).forEach(([key,value]) => { - if (key !== undefined) { - element.setAttribute(key, value); - } - }) - - element.id = id; - return element; -} - + + // Classes + for(const cls of classes) { + el.classList.add(cls); + } + + // Attributes + for (const attr in attributes) { + el.setAttribute(attr, attributes[attr]); + } + + return el; + } +// sorting songs const sortBySong = () => { player.songs.sort((a, b) => (a.title > b.title) * 2 - 1); } +// sorting platlists const sortByPlayList = () => { player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); } +// printing all songs const printAllSongs = () => { const songPrint = document.getElementById("songs"); for(let song of player.songs){ const { id,title, album, artist,duration,coverArt} = song; - const songElemnt = createSongElement(id, title, album, artist, duration, coverArt); + const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); songPrint.appendChild(songElemnt); } } +// printing all plalysts const printAllPlaylists = () => { - const playlistPrint = document.getElementById("playlists") + const playlistPrint = document.getElementById("playlists"); for (let playlist of player.playlists) { const {id, name,songs} = playlist; - const playlistElem = createPlaylistElement(id, name, songs); - playlistPrint.appendChild(playlistElem); + const playlistElem = createPlaylistElement({id, name, songs}); + playlistPrint.append(playlistElem); } } -const durationTime = (duration) =>{ - -} +// calling functions sortBySong(); printAllSongs(); -printAllPlaylists(); \ No newline at end of file +printAllPlaylists(); + + +// function createPlaylistElement({ id, name, songs }) { +// const children = [] +// const classes = [] +// const attrs = {} + +// // children +// const idEl = createElement("span", ["" + id] ,["id"]); +// const nameEl = createElement("span", ["" + name] ); +// const songsEl = createElement("span", ["" + songs] ,["songs"]); +// const durationEl = createElement("span", ["" + durationConvert(playlistDuration(id))] ,["duration", "short-duration"]); + +// // push childrens and classes +// children.push("Id: ",idEl, " name: ", nameEl, " The playlist songs: ",songsEl," Duration: ", durationEl); +// classes.push("playlist") + +// return createElement("div", children, classes, attrs) +// } \ No newline at end of file diff --git a/style.css b/style.css index fec9e0f3..83f23795 100644 --- a/style.css +++ b/style.css @@ -21,4 +21,7 @@ ul { width: 40%; background-color: lawngreen; margin: auto; +} + .id { + visibility: hidden; } \ No newline at end of file From 5da778370f73de383169c19b06a6cec5b9883b05 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 15:25:43 +0300 Subject: [PATCH 13/24] Playlists added --- scripts/index.js | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 7c0dad89..f5912e7f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -11,24 +11,20 @@ const convertDuration = (duration) => { } function playSong(songId) { - // const selectedSong = document.getElementById(songId); - // const classes = [] - // classes.push(["selected"]) + const selectedSong = document.getElementById(songId); + const classes = [] + classes.push(["selected"]) - // const songs = document.getElementsByClassName("song"); - // for (let song of songs) { + const songs = document.getElementsByClassName("song"); + for (let song of songs) { - // setInterval(function(){ song.classList.remove(classes); }, 3000); - // } - // selectedSong.classList.add(classes); + setInterval(function(){ song.classList.remove(classes); }, 3000); + } + selectedSong.classList.add(classes); } - const coverArtfun = (id) =>{ - for(let coverA of player.songs){ - if(coverA.id === id){ - return coverA.id[coverArt]; - } - } - } + + + // gives platlist duration function playlistDuration(id) { const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); @@ -53,8 +49,8 @@ function createPlaylistElement({id,name, songs = []} ) { const classes = []; const attrs = {}; const idEl = createElement("span", ["" + id] ,["id"]); - const playListName = document.createElement("h1",[name]); - const PLsongs = document.createElement("p",[],[songs]); + const playListName = createElement("h1",[name]); + const PLsongs = createElement("p",[songs]); const durationEl = createElement("span", ["" + convertDuration(playlistDuration(id))] ,["duration", "short-duration"]); classes.push("playlist") children.push(idEl,"Play list Name: ",playListName,"Songs: ", PLsongs," Duration: ", durationEl); From 4c6a34ec5d4caddbb8981619a98222a817b167a1 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 23:20:34 +0300 Subject: [PATCH 14/24] updated m playSong --- README.md | 2 +- scripts/index.js | 70 +++++++++++++----------------------------------- style.css | 5 ++-- 3 files changed, 21 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index d12d8eb8..4065bb08 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ You are provided with a template for your project: - an HTML file (`index.html`) - a linked, empty CSS file (`style.css`) - a linked JS script with a sample `player` object (`player.js`) -- a linked JS script with a template for your code (`index.js`) +- 7ya linked JS script with a template for your code (`index.js`) - an `images` folder with the webpage icon and song cover art The HTML defines the basic structure of the page. There are 2 container elements - one for the songs and one for the playlists. You may add more structural elements to the HTML (headings etc.), but the songs and playlists themselves must be generated using JS, based on the `player` object. diff --git a/scripts/index.js b/scripts/index.js index f5912e7f..1beb5d16 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -10,17 +10,11 @@ const convertDuration = (duration) => { return min + ':' + sec } -function playSong(songId) { - const selectedSong = document.getElementById(songId); - const classes = [] - classes.push(["selected"]) - - const songs = document.getElementsByClassName("song"); - for (let song of songs) { - - setInterval(function(){ song.classList.remove(classes); }, 3000); - } - selectedSong.classList.add(classes); +function playSong(id) { + console.log(`here is my id :${id}`); +document.getElementById(`${id}`).style.backgroundColor = "green"; + + } @@ -34,18 +28,20 @@ function playlistDuration(id) { sum + player.songs.find(song => song.id === currSong).duration, 0); } - -function createSongElement({ id, title, album, artist, duration, coverArt }) { - const artistEl = createElement("span", [artist]); - const durationEl = createElement("span", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); +function createSongElement({ id,artist,duration, coverArt }) { + const getId = createElement('p',[id]); + const artistEl = createElement("p", [artist]); + const durationEl = createElement("p", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); - return createElement("div", ["Artist: ", artistEl, "Duration: ", durationEl, imgEl]); + const attrs = { onclick: `playSong(${id})`} + + return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],[],attrs); } function createPlaylistElement({id,name, songs = []} ) { - const children = []; + const children = [];ד const classes = []; const attrs = {}; const idEl = createElement("span", ["" + id] ,["id"]); @@ -55,26 +51,15 @@ function createPlaylistElement({id,name, songs = []} ) { classes.push("playlist") children.push(idEl,"Play list Name: ",playListName,"Songs: ", PLsongs," Duration: ", durationEl); - return createElement("div", children, classes, attrs) - // for(let arrgIndex = 0; arrgIndex < 3; arrgIndex++){ - - // let par = arguments[arrgIndex] === arguments[1] ? document.createElement("h1") : document.createElement("p"); - // par.innerHTML = arguments[arrgIndex]; - // wrapper.appendChild(par); - // } - // children.push(wrapper); - // const classes = []; - - // classes.push(["playlist"]) - // const attrs = {} - // return createElement("div", children, classes, attrs, id); + return createElement( "div",children, classes, attrs,id) + } function createElement(tagName, children = [], classes = [], attributes = {}) { const el = document.createElement(tagName); - + // Children for(const child of children) { el.append(child); @@ -101,11 +86,11 @@ const sortByPlayList = () => { player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); } // printing all songs -const printAllSongs = () => { +const printAllSongs = (id) => { const songPrint = document.getElementById("songs"); for(let song of player.songs){ - const { id,title, album, artist,duration,coverArt} = song; + const { title, album, artist,duration,id,coverArt} = song; const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); songPrint.appendChild(songElemnt); } @@ -124,22 +109,3 @@ const printAllPlaylists = () => { sortBySong(); printAllSongs(); printAllPlaylists(); - - -// function createPlaylistElement({ id, name, songs }) { -// const children = [] -// const classes = [] -// const attrs = {} - -// // children -// const idEl = createElement("span", ["" + id] ,["id"]); -// const nameEl = createElement("span", ["" + name] ); -// const songsEl = createElement("span", ["" + songs] ,["songs"]); -// const durationEl = createElement("span", ["" + durationConvert(playlistDuration(id))] ,["duration", "short-duration"]); - -// // push childrens and classes -// children.push("Id: ",idEl, " name: ", nameEl, " The playlist songs: ",songsEl," Duration: ", durationEl); -// classes.push("playlist") - -// return createElement("div", children, classes, attrs) -// } \ No newline at end of file diff --git a/style.css b/style.css index 83f23795..bef172dc 100644 --- a/style.css +++ b/style.css @@ -22,6 +22,5 @@ ul { background-color: lawngreen; margin: auto; } - .id { - visibility: hidden; -} \ No newline at end of file + /* .id { + visibility: hidden; */ From e7742d2db88dd7c2f02de224e7860d97af52afc6 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 13 Sep 2021 23:39:56 +0300 Subject: [PATCH 15/24] fixied playSong --- scripts/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 1beb5d16..cc0a003a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -11,10 +11,7 @@ const convertDuration = (duration) => { } function playSong(id) { - console.log(`here is my id :${id}`); document.getElementById(`${id}`).style.backgroundColor = "green"; - - } @@ -31,10 +28,10 @@ function playlistDuration(id) { function createSongElement({ id,artist,duration, coverArt }) { const getId = createElement('p',[id]); const artistEl = createElement("p", [artist]); - const durationEl = createElement("p", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); + const durationEl = createElement("p"S, ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); - const attrs = { onclick: `playSong(${id})`} + const attrs = { onclick: `playSong(${id})`,id} return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],[],attrs); } From f59dbd46c453134326f7bcdfb0217ccef7754a11 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Tue, 14 Sep 2021 13:07:03 +0300 Subject: [PATCH 16/24] add settimeout --- scripts/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index cc0a003a..38048dd1 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -9,9 +9,11 @@ const convertDuration = (duration) => { return min + ':' + sec } + const setTimer = () =>{} function playSong(id) { -document.getElementById(`${id}`).style.backgroundColor = "green"; + document.getElementById(id).style.backgroundColor = "green"; +setTimeout(function(){document.getElementById(id).style.backgroundColor = "white"; }, 3000); } @@ -28,7 +30,7 @@ function playlistDuration(id) { function createSongElement({ id,artist,duration, coverArt }) { const getId = createElement('p',[id]); const artistEl = createElement("p", [artist]); - const durationEl = createElement("p"S, ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); + const durationEl = createElement("p", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); const attrs = { onclick: `playSong(${id})`,id} From 88e68ac7d3e98a6698250dee8f2e5dd8f1edaa79 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Tue, 14 Sep 2021 13:28:22 +0300 Subject: [PATCH 17/24] added Timer thats waiting when one function end another one plays --- index.html | 4 ++-- scripts/index.js | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index c55fb482..e3d94604 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,10 @@
- +
- +
diff --git a/scripts/index.js b/scripts/index.js index 38048dd1..908ee370 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -9,11 +9,15 @@ const convertDuration = (duration) => { return min + ':' + sec } - const setTimer = () =>{} + + const Timer = (id) =>{ + setTimeout(function(){playSong(id+1) }, 3000); + } -function playSong(id) { + async function playSong(id) { document.getElementById(id).style.backgroundColor = "green"; -setTimeout(function(){document.getElementById(id).style.backgroundColor = "white"; }, 3000); + setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); + await Timer(id); } From 4684e39e315a25825a6c7ed0231082e07006bd91 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Wed, 15 Sep 2021 15:29:41 +0300 Subject: [PATCH 18/24] added color to the duration --- scripts/index.js | 81 ++++++++++++++++++++++++++++++++++++------------ style.css | 22 +++++++------ 2 files changed, 74 insertions(+), 29 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 908ee370..bfd2f0c4 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,26 +1,62 @@ // converting duration const convertDuration = (duration) => { - let min = String(Math.floor(duration / 60)); - let sec = String(duration % 60); - - min < 10 ? (min = '0' + String(min)) : min - sec < 10 ? (sec = '0' + String(sec)) : sec + const minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10) { + seconds = `0${seconds}`; + } - return min + ':' + sec + return `${minutes}:${seconds}`; } + + let timerInterval = null; + + document.getElementsByClassName("duration").innerHTML = `...`; - const Timer = (id) =>{ - setTimeout(function(){playSong(id+1) }, 3000); - } - async function playSong(id) { - document.getElementById(id).style.backgroundColor = "green"; - setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); - await Timer(id); -} + // function startTimer() { + // timerInterval = setInterval(() => { + // timePassed = timePassed += 1; + // timeLeft = TIME_LIMIT - timePassed; + // document.getElementById("short-duration").innerHTML = formatTime(timeLeft); + // }, 1000); + // } + + + + + let runLoop; + + + function playSong(id,newDuration) { + timerInterval = setInterval(() => { + timePassed = timePassed += 1; + timeLeft = TIME_LIMIT - timePassed; + document.getElementById("short-duration").innerHTML = formatTime(timeLeft); + }, 1000) + const TIME_LIMIT = newDuration; + let timePassed = 0; + let timeLeft = TIME_LIMIT; + if(id === 8){ //need to be set as length of all ids + id = 1; + } + + document.getElementById(id).style.backgroundColor = "green"; + if(document.getElementById(id).style.backgroundColor = "green"){ + document.getElementsByClassName('duration').style.color = "red"; + } + runLoop = setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); + + let time = setTimeout(function(){playSong(id+1) }, 3000); + + + ///needs to set as duration song + + } + // gives platlist duration function playlistDuration(id) { @@ -32,19 +68,24 @@ function playlistDuration(id) { } function createSongElement({ id,artist,duration, coverArt }) { + const colored = (duration) => { + return duration < 600 ? 'color:green':'color:red'; + } + const classes = []; const getId = createElement('p',[id]); const artistEl = createElement("p", [artist]); - const durationEl = createElement("p", ["" + convertDuration(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`}); + let newDuration = convertDuration(duration) + const durationEl = createElement("p", [ newDuration] ,["duration", "short-duration"],{style:colored(duration)}, {onclick: `console.log('${duration}')`}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); - const attrs = { onclick: `playSong(${id})`,id} - + const attrs = { onclick: `playSong(${id})`,id,class:`songs`} + classes.push("songs"); return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],[],attrs); } function createPlaylistElement({id,name, songs = []} ) { - const children = [];ד + const children = []; const classes = []; const attrs = {}; const idEl = createElement("span", ["" + id] ,["id"]); @@ -54,7 +95,7 @@ function createPlaylistElement({id,name, songs = []} ) { classes.push("playlist") children.push(idEl,"Play list Name: ",playListName,"Songs: ", PLsongs," Duration: ", durationEl); - return createElement( "div",children, classes, attrs,id) + return createElement( "div",children, classes, attrs,id); } @@ -93,7 +134,7 @@ const printAllSongs = (id) => { const songPrint = document.getElementById("songs"); for(let song of player.songs){ - const { title, album, artist,duration,id,coverArt} = song; + const { title, album, artist,duration = duration,id,coverArt} = song; const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); songPrint.appendChild(songElemnt); } diff --git a/style.css b/style.css index bef172dc..96754954 100644 --- a/style.css +++ b/style.css @@ -7,20 +7,24 @@ body { h1 { text-align: center; } -ul { - list-style-type: none; - margin-right: 2%; + +#songs { + display: flex; + grid-template-columns: 100px 50px 100px; + grid-template-rows: 80px auto 80px; + column-gap: 100px; + row-gap: 15px; + flex-wrap: wrap; + margin: auto; + margin-left: 250px; } .songs { - font-size: larger; + border: 1px solid black; + box-shadow: 10px 10px grey; } .playlists { font-size: larger; } -.selected { - width: 40%; - background-color: lawngreen; - margin: auto; -} + /* .id { visibility: hidden; */ From 7f5206a65470ab55cf545a58bdd1de47c1e3ad6b Mon Sep 17 00:00:00 2001 From: romans1995 Date: Sat, 18 Sep 2021 11:43:41 +0300 Subject: [PATCH 19/24] printaSong function added that makes the new changes get in to the dom --- index.html | 12 ++++ scripts/index.js | 157 +++++++++++++++++++++++++++++++---------------- style.css | 35 ++++++++++- 3 files changed, 147 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index e3d94604..1481e6ea 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,18 @@ +

Awesome Player!!!

+
+

Add a new song

+
+ + + + + +
+ +
diff --git a/scripts/index.js b/scripts/index.js index bfd2f0c4..02d10900 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -9,55 +9,91 @@ const convertDuration = (duration) => { return `${minutes}:${seconds}`; } + let runLoop; + function playSong(id,newDuration) { + if(id === player.songs.length+1){ + id = 1; + } + document.getElementById(id).style.backgroundColor = "#af934c"; + runLoop = setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); ///needs to set as duration song + let time = setTimeout(function(){playSong(id+1) }, 3000); + } - let timerInterval = null; - - document.getElementsByClassName("duration").innerHTML = `...`; +/** + * Removes a song from the player, and updates the DOM to match. + * + * @param {Number} songId - the ID of the song to remove + */ + function removeSong(songId) { + // console.log(songId.path[1].id); + // const foundSongId = player.songs.findIndex( + // (currSong) => currSong.id === songId.path[1].id); + + // // // Delete the song from the song list + + // player.songs[songId.path[1].id].remove(); + let index = player.songs.indexOf(songId.path[1].id.id); + console.log(player.songs[songId.path[1].id]); + let numberOfElementToRemove = 1; + if (index === -1) { player.songs.splice(index,numberOfElementToRemove)} + console.log(player.songs) + } - // function startTimer() { - // timerInterval = setInterval(() => { - // timePassed = timePassed += 1; - // timeLeft = TIME_LIMIT - timePassed; - // document.getElementById("short-duration").innerHTML = formatTime(timeLeft); - // }, 1000); - // } - - - - let runLoop; - +/** +* Adds a song to the player, and updates the DOM to match. +*/ - function playSong(id,newDuration) { - timerInterval = setInterval(() => { - timePassed = timePassed += 1; - timeLeft = TIME_LIMIT - timePassed; - document.getElementById("short-duration").innerHTML = formatTime(timeLeft); - }, 1000) - const TIME_LIMIT = newDuration; - let timePassed = 0; - let timeLeft = TIME_LIMIT; - if(id === 8){ //need to be set as length of all ids - id = 1; - } - - document.getElementById(id).style.backgroundColor = "green"; - if(document.getElementById(id).style.backgroundColor = "green"){ - document.getElementsByClassName('duration').style.color = "red"; - } - runLoop = setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); - - let time = setTimeout(function(){playSong(id+1) }, 3000); - + document.getElementById("add-button").addEventListener("click", function(){ + let ele = {}; + let id = player.songs.length + 1; + ele.id = id; + let title = document.querySelectorAll('input[name = title]')[0].value; + ele.title = title; + let album = document.querySelectorAll('input[name = album]')[0].value; + ele.album = album; + let artist = document.querySelectorAll('input[name = artist]')[0].value; + ele.artist = artist; + let duration = document.querySelectorAll('input[name = duration]')[0].value; + ele.duration = duration; + let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value; + ele.coverArt = coverArt; - - ///needs to set as duration song - - } - + addSong({ id, title ,album,artist,duration,coverArt}); + + console.log(player.songs); + +}); +function addSong({id, title, album, artist, duration, coverArt }) { + let allSongs = player.songs; + allSongs.push({ id, title ,album,artist,duration,coverArt}); + printaSong(id,title,album,artist,duration,coverArt); + + +} + + +/** +* Acts on a click event on an element inside the songs list. +* Should handle clicks on play buttons and remove buttons of songs. +* +* @param {MouseEvent} event - the click event +*/ +function handleSongClickEvent(event) { + +} + +/** +* Handles a click event on the button that adds songs. +* +* @param {MouseEvent} event - the click event +*/ +function handleAddSongEvent(event) { + // Your code here +} // gives platlist duration function playlistDuration(id) { const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); @@ -71,16 +107,19 @@ function createSongElement({ id,artist,duration, coverArt }) { const colored = (duration) => { return duration < 600 ? 'color:green':'color:red'; } - const classes = []; + // const classes = []; const getId = createElement('p',[id]); const artistEl = createElement("p", [artist]); let newDuration = convertDuration(duration) - const durationEl = createElement("p", [ newDuration] ,["duration", "short-duration"],{style:colored(duration)}, {onclick: `console.log('${duration}')`}); + const durationEl = createElement("p", [ newDuration] ,["duration", "short-duration"],{style:colored(duration)}, {}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); const attrs = { onclick: `playSong(${id})`,id,class:`songs`} - classes.push("songs"); - return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],[],attrs); + + const playButton = createElement('button',["❌"],['remove']); + playButton.addEventListener("click",removeSong),id; + // classes.push("songs"); + return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl,playButton],[],attrs,[]); } @@ -89,19 +128,18 @@ function createPlaylistElement({id,name, songs = []} ) { const classes = []; const attrs = {}; const idEl = createElement("span", ["" + id] ,["id"]); - const playListName = createElement("h1",[name]); + const playListName = createElement("p",[name]); const PLsongs = createElement("p",[songs]); - const durationEl = createElement("span", ["" + convertDuration(playlistDuration(id))] ,["duration", "short-duration"]); + const durationEl = createElement("p", ["" + convertDuration(playlistDuration(id))] ,["duration", "short-duration"]); classes.push("playlist") - children.push(idEl,"Play list Name: ",playListName,"Songs: ", PLsongs," Duration: ", durationEl); + children.push(idEl,"Play list Name: ",playListName, 'songs: ',PLsongs," time: ", durationEl); - return createElement( "div",children, classes, attrs,id); + return createElement( "div",children, classes, attrs,); } - -function createElement(tagName, children = [], classes = [], attributes = {}) { +function createElement(tagName, children = [], classes = [], attributes = {},) { const el = document.createElement(tagName); // Children @@ -118,7 +156,7 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { for (const attr in attributes) { el.setAttribute(attr, attributes[attr]); } - + return el; } // sorting songs @@ -136,9 +174,11 @@ const printAllSongs = (id) => { for(let song of player.songs){ const { title, album, artist,duration = duration,id,coverArt} = song; const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); - songPrint.appendChild(songElemnt); + songPrint.appendChild(songElemnt); + } + } -} + // printing all plalysts const printAllPlaylists = () => { const playlistPrint = document.getElementById("playlists"); @@ -149,7 +189,16 @@ const printAllPlaylists = () => { playlistPrint.append(playlistElem); } } + +const printaSong = (id,title,album,artist,duration,coverArt) =>{ + const songPrint = document.getElementById("songs"); +let song = ''; + const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); + console.log(song) + songPrint.appendChild(songElemnt) +} // calling functions sortBySong(); printAllSongs(); printAllPlaylists(); +document.getElementById("add-button").addEventListener("click", handleAddSongEvent); \ No newline at end of file diff --git a/style.css b/style.css index 96754954..3a20f680 100644 --- a/style.css +++ b/style.css @@ -21,10 +21,39 @@ h1 { .songs { border: 1px solid black; box-shadow: 10px 10px grey; + width: 301px; } -.playlists { - font-size: larger; +.playlist { + border: 1px solid black; + width: 380px; + height: 100px; + margin: auto; + display: inline-table; +} +#add-section { + background: whitesmoke; + border: 1px solid; + box-shadow: 10px 10px grey; + margin-bottom: 60px; +} +#add-button { + width: 100px; + height: 50px; + font-family: fangsong; +} +#playlists{ + padding: 100px; +} +.playlist > p { + +} +.remove { + float: left; + margin-top: -163.5%; +} +img{ + width: 100%; + height: 61%; } - /* .id { visibility: hidden; */ From aaba5b2ea4b021fb149d673829b30222f1d0359a Mon Sep 17 00:00:00 2001 From: romans1995 Date: Sat, 18 Sep 2021 22:08:34 +0300 Subject: [PATCH 20/24] add buttons and changed the plausong function code logic --- scripts/index.js | 366 +++++++++++++++++++++++++++++++---------------- style.css | 10 +- 2 files changed, 245 insertions(+), 131 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 02d10900..43881244 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,52 +1,88 @@ // converting duration const convertDuration = (duration) => { - const minutes = Math.floor(duration / 60); let seconds = duration % 60; if (seconds < 10) { seconds = `0${seconds}`; } - return `${minutes}:${seconds}`; +} +let runLoop; +// is playSong is runing ? +plrun = false; + +function playSong(id) { + + console.log(id.path[1].id); + if(plrun){ + document.getElementById(id.path[1].id).style.backgroundColor = "white"; + clearTimeout(runLoop); + plrun = false; + } + if (id === player.songs.length) { + id.path[1].id = 1; + } + if(plrun === false){ + let changeButton = document.getElementsByClassName("play")[0]; + document.getElementById(id.path[1].id).style.backgroundColor = "#af934c"; + changeButton.innerHTML = "⏸"; + plrun = true; + // after 3 sec or duration of song turn off song + runLoop = setTimeout(() => { + plrun = false; + document.getElementById(id.path[1].id).style.backgroundColor = "white"; + playsongnextSong(Math.abs(id.path[1].id )+ 1); + + }, 3000); //duration of song here + changeButton[0].innerHTML = "▶"; + } + ///needs to set as duration song +} +const playsongnextSong = (id) =>{ + console.log(id); + if(plrun){ + document.getElementById(id).style.backgroundColor = "white"; + clearTimeout(runLoop); + plrun = false; + } + if (id === player.songs.length) { + id = 1; + } + if(plrun === false){ + let changeButton = document.getElementsByClassName("play"); + + document.getElementById(id).style.backgroundColor = "#af934c"; + plrun = true; + // after 3 sec or duration of song turn off song + runLoop = setTimeout(() => { + changeButton[0].innerHTML = "⏸"; + plrun = false; + document.getElementById(id).style.backgroundColor = "white"; + playsongnextSong( id + 1); + + }, 3000); //duration of song here + changeButton[0].innerHTML = "▶"; } - let runLoop; - function playSong(id,newDuration) { - if(id === player.songs.length+1){ - id = 1; - } - document.getElementById(id).style.backgroundColor = "#af934c"; - runLoop = setTimeout(function(){document.getElementById(id).style.backgroundColor = "white" }, 3000); ///needs to set as duration song - let time = setTimeout(function(){playSong(id+1) }, 3000); - } + +} /** * Removes a song from the player, and updates the DOM to match. * * @param {Number} songId - the ID of the song to remove */ - function removeSong(songId) { - // console.log(songId.path[1].id); - // const foundSongId = player.songs.findIndex( - // (currSong) => currSong.id === songId.path[1].id); - - // // // Delete the song from the song list - - // player.songs[songId.path[1].id].remove(); - let index = player.songs.indexOf(songId.path[1].id.id); - console.log(player.songs[songId.path[1].id]); - let numberOfElementToRemove = 1; - if (index === -1) { player.songs.splice(index,numberOfElementToRemove)} - console.log(player.songs) - } - - - +function removeSong(songId) { + console.log(songId.path[1]); + const song = player.songs[songId.path[1].id] + let numberOfElementToRemove = 1; + player.songs.splice(songId.path[1].id , numberOfElementToRemove); + document.getElementById(songId.path[1].id).remove(); + console.log(player.songs); +} /** -* Adds a song to the player, and updates the DOM to match. -*/ - - - document.getElementById("add-button").addEventListener("click", function(){ + * Adds a song to the player, and updates the DOM to match. + */ +document.getElementById("add-button").addEventListener("click", function () { let ele = {}; let id = player.songs.length + 1; ele.id = id; @@ -54,146 +90,222 @@ const convertDuration = (duration) => { ele.title = title; let album = document.querySelectorAll('input[name = album]')[0].value; ele.album = album; - let artist = document.querySelectorAll('input[name = artist]')[0].value; + let artist = document.querySelectorAll('input[name = artist]')[0].value; ele.artist = artist; - let duration = document.querySelectorAll('input[name = duration]')[0].value; + let duration = document.querySelectorAll('input[name = duration]')[0].value; ele.duration = duration; - let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value; + duration = document.querySelectorAll('input[name = duration]')[0].value; + let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value; ele.coverArt = coverArt; - addSong({ id, title ,album,artist,duration,coverArt}); - - console.log(player.songs); - + addSong({ + id, + title, + album, + artist, + duration, + coverArt + }); + // make the input ready for new song + document.querySelectorAll('input[name = artist]')[0].value = ''; + document.querySelectorAll('input[name = duration]')[0].value = ''; + document.querySelectorAll('input[name = cover-art]')[0].value = ''; + document.querySelectorAll('input[name = album]')[0].value = ''; + document.querySelectorAll('input[name = title]')[0].value = ''; }); -function addSong({id, title, album, artist, duration, coverArt }) { + +function addSong({ + id, + title, + album, + artist, + duration, + coverArt +}) { let allSongs = player.songs; - allSongs.push({ id, title ,album,artist,duration,coverArt}); - printaSong(id,title,album,artist,duration,coverArt); - - + allSongs.push({ + id, + title, + album, + artist, + duration, + coverArt + }); + printaSong(id, title, album, artist, duration, coverArt); + + } /** -* Acts on a click event on an element inside the songs list. -* Should handle clicks on play buttons and remove buttons of songs. -* -* @param {MouseEvent} event - the click event -*/ + * Acts on a click event on an element inside the songs list. + * Should handle clicks on play buttons and remove buttons of songs. + * + * @param {MouseEvent} event - the click event + */ function handleSongClickEvent(event) { - + } /** -* Handles a click event on the button that adds songs. -* -* @param {MouseEvent} event - the click event -*/ + * Handles a click event on the button that adds songs. + * + * @param {MouseEvent} event - the click event + */ function handleAddSongEvent(event) { // Your code here } // gives platlist duration function playlistDuration(id) { - const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); - - // Reduce function to sum all the song durations, by finding each of them, and then adding to the sum - return foundPlaylist.songs.reduce((sum, currSong) => - sum + player.songs.find(song => song.id === currSong).duration, 0); - } + const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id); -function createSongElement({ id,artist,duration, coverArt }) { - const colored = (duration) => { - return duration < 600 ? 'color:green':'color:red'; - } - // const classes = []; - const getId = createElement('p',[id]); - const artistEl = createElement("p", [artist]); - let newDuration = convertDuration(duration) - const durationEl = createElement("p", [ newDuration] ,["duration", "short-duration"],{style:colored(duration)}, {}); - const coverImageArtUrl = coverArt; - const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl}); - const attrs = { onclick: `playSong(${id})`,id,class:`songs`} - - const playButton = createElement('button',["❌"],['remove']); - playButton.addEventListener("click",removeSong),id; - // classes.push("songs"); - return createElement("div",[getId,"Artist: ", artistEl, "Duration: ", durationEl, imgEl,playButton],[],attrs,[]); + // Reduce function to sum all the song durations, by finding each of them, and then adding to the sum + return foundPlaylist.songs.reduce((sum, currSong) => + sum + player.songs.find(song => song.id === currSong).duration, 0); +} + +function createSongElement({ + id, + artist, + duration, + coverArt +}) { + const colored = (duration) => { + return duration < 600 ? 'color:green' : 'color:red'; } + // const classes = []; + const getId = createElement('p', [id]); + const artistEl = createElement("p", [artist]); + let newDuration = convertDuration(duration) + const durationEl = createElement("p", [newDuration], ["duration", "short-duration"], { + style: colored(duration) + }, {}); + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [], ["album-art"], { + src: coverImageArtUrl + }); + const attrs = { + // onclick: `playSong(${id})`, + id, + class: `songs` + }; + const playButton = createElement('button', ["▶"],['play']); + playButton.addEventListener("click", playSong); + + + const removeButton = createElement('button', ["❌"], ['remove']); + removeButton.addEventListener("click", removeSong); + // classes.push("songs"); + return createElement("div", [getId, "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); +} + + +function createPlaylistElement({ + id, + name, + songs = [] +}) { + const children = []; + const classes = []; + const attrs = {}; + const idEl = createElement("span", ["" + id], ["id"]); + const playListName = createElement("p", [name]); + const PLsongs = createElement("p", [songs]); + const durationEl = createElement("p", ["" + convertDuration(playlistDuration(id))], ["duration", "short-duration"]); + classes.push("playlist") + children.push(idEl, "Play list Name: ", playListName, 'songs: ', PLsongs, " time: ", durationEl); + + return createElement("div", children, classes, attrs, ); -function createPlaylistElement({id,name, songs = []} ) { - const children = []; - const classes = []; - const attrs = {}; - const idEl = createElement("span", ["" + id] ,["id"]); - const playListName = createElement("p",[name]); - const PLsongs = createElement("p",[songs]); - const durationEl = createElement("p", ["" + convertDuration(playlistDuration(id))] ,["duration", "short-duration"]); - classes.push("playlist") - children.push(idEl,"Play list Name: ",playListName, 'songs: ',PLsongs," time: ", durationEl); - - return createElement( "div",children, classes, attrs,); - } -function createElement(tagName, children = [], classes = [], attributes = {},) { - const el = document.createElement(tagName); +function createElement(tagName, children = [], classes = [], attributes = {}, ) { + const el = document.createElement(tagName); - // Children - for(const child of children) { - el.append(child); - } - - // Classes - for(const cls of classes) { - el.classList.add(cls); - } - - // Attributes - for (const attr in attributes) { - el.setAttribute(attr, attributes[attr]); - } + // Children + for (const child of children) { + el.append(child); + } + + // Classes + for (const cls of classes) { + el.classList.add(cls); + } - return el; + // Attributes + for (const attr in attributes) { + el.setAttribute(attr, attributes[attr]); } + + return el; +} // sorting songs const sortBySong = () => { - player.songs.sort((a, b) => (a.title > b.title) * 2 - 1); + player.songs.sort((a, b) => (a.title > b.title) * 2 - 1); } // sorting platlists const sortByPlayList = () => { - player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); + player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1); } // printing all songs const printAllSongs = (id) => { - const songPrint = document.getElementById("songs"); + const songPrint = document.getElementById("songs"); - for(let song of player.songs){ - const { title, album, artist,duration = duration,id,coverArt} = song; - const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); - songPrint.appendChild(songElemnt); - } - - } + for (let song of player.songs) { + const { + title, + album, + artist, + duration = duration, + id, + coverArt + } = song; + const songElemnt = createSongElement({ + id, + title, + album, + artist, + duration, + coverArt + }); + songPrint.appendChild(songElemnt); + } + +} // printing all plalysts const printAllPlaylists = () => { - const playlistPrint = document.getElementById("playlists"); + const playlistPrint = document.getElementById("playlists"); - for (let playlist of player.playlists) { - const {id, name,songs} = playlist; - const playlistElem = createPlaylistElement({id, name, songs}); - playlistPrint.append(playlistElem); - } + for (let playlist of player.playlists) { + const { + id, + name, + songs + } = playlist; + const playlistElem = createPlaylistElement({ + id, + name, + songs + }); + playlistPrint.append(playlistElem); + } } -const printaSong = (id,title,album,artist,duration,coverArt) =>{ +const printaSong = (id, title, album, artist, duration, coverArt) => { const songPrint = document.getElementById("songs"); -let song = ''; - const songElemnt = createSongElement({id, title, album, artist, duration, coverArt}); + let song = ''; + const songElemnt = createSongElement({ + id, + title, + album, + artist, + duration, + coverArt + }); console.log(song) songPrint.appendChild(songElemnt) } diff --git a/style.css b/style.css index 3a20f680..d541dcef 100644 --- a/style.css +++ b/style.css @@ -32,9 +32,11 @@ h1 { } #add-section { background: whitesmoke; - border: 1px solid; - box-shadow: 10px 10px grey; - margin-bottom: 60px; + border: 1px solid; + box-shadow: 10px 10px grey; + width: 497px; + margin: auto; + margin-bottom: 30px; } #add-button { width: 100px; @@ -49,7 +51,7 @@ h1 { } .remove { float: left; - margin-top: -163.5%; + margin-top: -168.5%; } img{ width: 100%; From 7de414ae318b922adf8bab7a7ce1df6703ff5dc6 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Sun, 19 Sep 2021 07:50:00 +0300 Subject: [PATCH 21/24] improve playsong --- scripts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index 43881244..28702bc3 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -45,7 +45,7 @@ const playsongnextSong = (id) =>{ clearTimeout(runLoop); plrun = false; } - if (id === player.songs.length) { + if (id === player.songs.length+1) { id = 1; } if(plrun === false){ From 00810ecbf1af998e49abb124ad1cc318b909b5f9 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 20 Sep 2021 14:47:07 +0300 Subject: [PATCH 22/24] fixed playSongs function --- .vscode/settings.json | 3 +++ scripts/index.js | 30 +++++++++++++++--------------- style.css | 10 +++++++--- 3 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 28702bc3..d4afe966 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,8 +12,10 @@ let runLoop; plrun = false; function playSong(id) { - - console.log(id.path[1].id); + for (song of player.songs){ + document.getElementById(song.id).style.backgroundColor = "white"; + } + console.log(id); if(plrun){ document.getElementById(id.path[1].id).style.backgroundColor = "white"; clearTimeout(runLoop); @@ -23,9 +25,12 @@ function playSong(id) { id.path[1].id = 1; } if(plrun === false){ - let changeButton = document.getElementsByClassName("play")[0]; + let changeButton = document.getElementsByClassName("play"); + + changeButton.innerHTML = "⏸"; + document.getElementById(id.path[1].id).style.backgroundColor = "#af934c"; - changeButton.innerHTML = "⏸"; + plrun = true; // after 3 sec or duration of song turn off song runLoop = setTimeout(() => { @@ -34,10 +39,11 @@ function playSong(id) { playsongnextSong(Math.abs(id.path[1].id )+ 1); }, 3000); //duration of song here - changeButton[0].innerHTML = "▶"; + changeButton.innerHTML = "▶"; } - ///needs to set as duration song } + + const playsongnextSong = (id) =>{ console.log(id); if(plrun){ @@ -97,8 +103,6 @@ document.getElementById("add-button").addEventListener("click", function () { duration = document.querySelectorAll('input[name = duration]')[0].value; let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value; ele.coverArt = coverArt; - - addSong({ id, title, @@ -133,11 +137,7 @@ function addSong({ coverArt }); printaSong(id, title, album, artist, duration, coverArt); - - } - - /** * Acts on a click event on an element inside the songs list. * Should handle clicks on play buttons and remove buttons of songs. @@ -167,6 +167,7 @@ function playlistDuration(id) { function createSongElement({ id, + title, artist, duration, coverArt @@ -176,6 +177,7 @@ function createSongElement({ } // const classes = []; const getId = createElement('p', [id]); + const titleSong = createElement('span',[title]); const artistEl = createElement("p", [artist]); let newDuration = convertDuration(duration) const durationEl = createElement("p", [newDuration], ["duration", "short-duration"], { @@ -193,12 +195,10 @@ function createSongElement({ const playButton = createElement('button', ["▶"],['play']); playButton.addEventListener("click", playSong); - - const removeButton = createElement('button', ["❌"], ['remove']); removeButton.addEventListener("click", removeSong); // classes.push("songs"); - return createElement("div", [getId, "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); + return createElement("div", [getId,'Title: ',titleSong, "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); } diff --git a/style.css b/style.css index d541dcef..a21b1d43 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,8 @@ body { } h1 { text-align: center; + font-family: fantasy; + } #songs { @@ -16,12 +18,13 @@ h1 { row-gap: 15px; flex-wrap: wrap; margin: auto; - margin-left: 250px; + margin-left: 10%; } .songs { border: 1px solid black; box-shadow: 10px 10px grey; - width: 301px; + width: 272px; + padding: 48px; } .playlist { border: 1px solid black; @@ -51,7 +54,8 @@ h1 { } .remove { float: left; - margin-top: -168.5%; + margin-top: -197.5%; + margin-left: -34px; } img{ width: 100%; From c169ad7aaf09cfe64126014b63ddb330bdb3ff6d Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 20 Sep 2021 15:01:50 +0300 Subject: [PATCH 23/24] improve remove btn css --- scripts/index.js | 7 ++++--- style.css | 9 ++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index d4afe966..abc3eef7 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,10 +12,11 @@ let runLoop; plrun = false; function playSong(id) { + // make all song background white for (song of player.songs){ document.getElementById(song.id).style.backgroundColor = "white"; } - console.log(id); + if(plrun){ document.getElementById(id.path[1].id).style.backgroundColor = "white"; clearTimeout(runLoop); @@ -26,7 +27,7 @@ function playSong(id) { } if(plrun === false){ let changeButton = document.getElementsByClassName("play"); - + console.log(changeButton); changeButton.innerHTML = "⏸"; document.getElementById(id.path[1].id).style.backgroundColor = "#af934c"; @@ -45,7 +46,7 @@ function playSong(id) { const playsongnextSong = (id) =>{ - console.log(id); + if(plrun){ document.getElementById(id).style.backgroundColor = "white"; clearTimeout(runLoop); diff --git a/style.css b/style.css index a21b1d43..85f05f60 100644 --- a/style.css +++ b/style.css @@ -53,9 +53,12 @@ h1 { } .remove { - float: left; - margin-top: -197.5%; - margin-left: -34px; + display: inline-block; + border: 1px solid black; + position: relative; + float: left; + margin-left: -50px; + margin-top: -237px; } img{ width: 100%; From 3a7b3c9fbca4c8ac34aefb70aedbafa752e86658 Mon Sep 17 00:00:00 2001 From: romans1995 Date: Mon, 20 Sep 2021 17:17:58 +0300 Subject: [PATCH 24/24] improve playSong code by adding a func that gets id from event --- scripts/index.js | 51 +++++++++++------------------------------------- style.css | 2 +- 2 files changed, 12 insertions(+), 41 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index abc3eef7..9607dd53 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -10,43 +10,14 @@ const convertDuration = (duration) => { let runLoop; // is playSong is runing ? plrun = false; - +const getIdForPlaysong = (id) =>{ + return playSong(Math.abs(id.path[1].id)) +} function playSong(id) { // make all song background white for (song of player.songs){ document.getElementById(song.id).style.backgroundColor = "white"; } - - if(plrun){ - document.getElementById(id.path[1].id).style.backgroundColor = "white"; - clearTimeout(runLoop); - plrun = false; - } - if (id === player.songs.length) { - id.path[1].id = 1; - } - if(plrun === false){ - let changeButton = document.getElementsByClassName("play"); - console.log(changeButton); - changeButton.innerHTML = "⏸"; - - document.getElementById(id.path[1].id).style.backgroundColor = "#af934c"; - - plrun = true; - // after 3 sec or duration of song turn off song - runLoop = setTimeout(() => { - plrun = false; - document.getElementById(id.path[1].id).style.backgroundColor = "white"; - playsongnextSong(Math.abs(id.path[1].id )+ 1); - - }, 3000); //duration of song here - changeButton.innerHTML = "▶"; - } -} - - -const playsongnextSong = (id) =>{ - if(plrun){ document.getElementById(id).style.backgroundColor = "white"; clearTimeout(runLoop); @@ -57,22 +28,22 @@ const playsongnextSong = (id) =>{ } if(plrun === false){ let changeButton = document.getElementsByClassName("play"); + console.log(changeButton); + changeButton.innerHTML = "⏸"; document.getElementById(id).style.backgroundColor = "#af934c"; + plrun = true; // after 3 sec or duration of song turn off song runLoop = setTimeout(() => { - changeButton[0].innerHTML = "⏸"; plrun = false; document.getElementById(id).style.backgroundColor = "white"; - playsongnextSong( id + 1); + playSong(id+ 1); }, 3000); //duration of song here - changeButton[0].innerHTML = "▶"; + changeButton.innerHTML = "▶"; } - } - /** * Removes a song from the player, and updates the DOM to match. * @@ -178,7 +149,7 @@ function createSongElement({ } // const classes = []; const getId = createElement('p', [id]); - const titleSong = createElement('span',[title]); + const titleSong = createElement('p',[title]); const artistEl = createElement("p", [artist]); let newDuration = convertDuration(duration) const durationEl = createElement("p", [newDuration], ["duration", "short-duration"], { @@ -195,11 +166,11 @@ function createSongElement({ }; const playButton = createElement('button', ["▶"],['play']); - playButton.addEventListener("click", playSong); + playButton.addEventListener("click", getIdForPlaysong); const removeButton = createElement('button', ["❌"], ['remove']); removeButton.addEventListener("click", removeSong); // classes.push("songs"); - return createElement("div", [getId,'Title: ',titleSong, "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); + return createElement("div", [getId, "Title: ",titleSong , "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton, playButton], [], attrs, []); } diff --git a/style.css b/style.css index 85f05f60..d7b0363c 100644 --- a/style.css +++ b/style.css @@ -58,7 +58,7 @@ h1 { position: relative; float: left; margin-left: -50px; - margin-top: -237px; + margin-top: -306px; } img{ width: 100%;