From 527cab47f0a2980cb89d12fd20b0bccb5378434f Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Sun, 12 Sep 2021 16:08:49 +0300 Subject: [PATCH 01/12] start generating the page --- index.html | 22 +++++++--- scripts/index.js | 106 +++++++++++++++++++++++++++++++++++++++++++++-- style.css | 82 +++++++++++++++++++++++++++++++++++- 3 files changed, 201 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index c55fb482..93c5fb4a 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,23 @@ -
- -
-
- +
+
+ +
+
+
+ +
+
+ +
+
diff --git a/scripts/index.js b/scripts/index.js index 6842c794..db36ba13 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,61 @@ +function convertDuration(duration) { + //parameters - duration (type string('mm:ss') / number(seconds)) + //return string('mm:ss') if number was given + //return number(seconds) if string was given + if(typeof(duration) === 'number'){ + let min = Math.floor(duration / 60); + let sec = duration % 60; + if (min < 10) { + min = "0" + String(min); + } + if (sec < 10) { + sec = "0" + String(sec); + } + return min + ':' + sec; + } + else{//if its a string + return parseInt(duration.slice(3)) + parseInt(duration.slice(0,2)) * 60; + } +} + +function getEl(arr, id){ + //parameters - arr (type array(of objects)) + // id (type number) + //returns the object in the array that has the wanted id. + for(let el of arr){ + if(el.id === id){ + return el; + } + } + throw("couldn't find element where id=" + id); + } + +function newWindow(){ + let songEl = document.getElementById("songs") + while(songEl.firstChild){ + songEl.removeChild(songEl.firstChild); + } + + let plEl = document.getElementById("playlists") + while(plEl.firstChild){ + plEl.removeChild(plEl.firstChild); + } +} + +function songsHandler(){ + newWindow() + for(const song of player.songs){ + document.getElementById("songs").appendChild(createSongElement(song)) + } +} + +function playlistsHandler(){ + newWindow() + for(const playlist of player.playlists){ + document.getElementById("playlists").appendChild(createPlaylistElement(playlist)) + } +} + /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -13,8 +71,23 @@ function playSong(songId) { */ function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] - const classes = [] + const classes = ["song"] const attrs = { onclick: `playSong(${id})` } + + const topic = document.createElement("h1"); + topic.textContent = "song #" + id + "\n"; + children.push(topic) + + const info = document.createElement("p"); + info.textContent = "name: " + title + "\nalbum: " + album + "\nartist: " + artist + "\nduration: " + convertDuration(duration); + children.push(info) + + const img = document.createElement("img"); + img.src = coverArt; + children.push(img) + + //createElement('div',children,classes,attrs) + //document.getElementById("songs").appendChild(createElement("div", children, classes, attrs)); return createElement("div", children, classes, attrs) } @@ -23,8 +96,23 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { */ function createPlaylistElement({ id, name, songs }) { const children = [] - const classes = [] + const classes = ["playlist"] const attrs = {} + + const topic = createElement("header"); + topic.textContent = "playlist #" + id + " - " + name; + children.push(topic) + + const info = createElement("p"); + info.textContent = "songs -"; + children.push(info) + for(let i = 1; i <= songs.length; i++){ + + children.push(createSongElement(getEl(player.songs,songs[i-1]))); + } + + console.log(children); + return createElement("div", children, classes, attrs) } @@ -41,7 +129,19 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here + let newEl = document.createElement(tagName); + for(const child of children){ + newEl.appendChild(child); + } + for(const cls of classes){ + newEl.classList.add(cls); + } + newEl.attributes = attributes; + //document.getElementById("songs").appendChild(newEl); + return newEl } // You can write more code below this line +for(const song of player.songs){ + document.getElementById("songs").appendChild(createSongElement(song)); +} diff --git a/style.css b/style.css index f4645fe9..a1b24042 100644 --- a/style.css +++ b/style.css @@ -1 +1,81 @@ -/* Your code here */ +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap'); + +*{ + margin:0; + padding:0; + box-sizing: border-box; + list-style:none; + text-decoration: none; + font-family: 'Josefin Sans', sans-serif ; +} + +body{ + background: #f3f5f9; +} + +.wrapper{ + display:flex; + position:relative; +} + +.wrapper .navbardiv{ + position:fixed; + width:200px; + height: 100%; + background: #4b4276; +} + +nav ul li{ + padding:15px; + border-bottom: 1px solid rgba(0,0,0,0.05); + border-top: 1px solid rgba(225,225,225,0.05); +} + +.nav-link{ + color:#bdb8d7; + display: block; +} + +nav ul li:hover{ + background: #594f8d; +} + +/*the navigator's text turns white if we 'touch' it*/ +nav ul li:hover button{ + color: #fff; +} + +.wrapper .main-content{ + width:100%; + margin-left: 230px; +} + +header{ + font-size: 28; + padding: 20px; + background: #fff; + color:#717171; + border-bottom: 1px solid #e0e4e8; + border-top: 1px solid #e0e4e8; +} + +li ul li{ + size:70%; +} + +img{ + width:150px; + /* margin-left: 20px; + margin-bottom:-25px; */ +} +p{ + white-space: pre-line; +} + +.playlist>p{ + font-size: 25px; +} + +.playlist h1{ + font-size: 20px; +} \ No newline at end of file From 232f7f121a4e06de64ccf942c9862e71fb461121 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Sun, 12 Sep 2021 16:44:00 +0300 Subject: [PATCH 02/12] progress colors ficher --- index.html | 3 +++ scripts/index.js | 43 +++++++++++++++++++++++++++++++------------ 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 93c5fb4a..740fc3f2 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,9 @@
  • playlists
    • +
    +
    Playing Now
    +
    diff --git a/scripts/index.js b/scripts/index.js index db36ba13..0da2838d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -63,7 +63,23 @@ function playlistsHandler(){ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - // Your code here + const song = getEl(player.songs, songId); + let currDir = document.getElementById("playNow") + while(currDir.firstChild){ + currDir.removeChild(currDir.firstChild); + } + if(song.duration <= 120){ + currDir.style.background = "rgb(0,255,0)" + } + else if(song.duration >= 420){ + currDir.style.background = "rgb(255,0,0)" + } + else{ + const green = (300 - song.duration)*256/300 + const red = 256-green; + currDir.style.background = "rgb(" + red +"," + green + ",0)" + } + currDir.appendChild(createSongElement(song)) } /** @@ -74,21 +90,23 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const classes = ["song"] const attrs = { onclick: `playSong(${id})` } - const topic = document.createElement("h1"); + const topic = createElement("h1"); topic.textContent = "song #" + id + "\n"; children.push(topic) - const info = document.createElement("p"); + const info = createElement("p"); info.textContent = "name: " + title + "\nalbum: " + album + "\nartist: " + artist + "\nduration: " + convertDuration(duration); children.push(info) - const img = document.createElement("img"); + const img = createElement("img"); img.src = coverArt; children.push(img) //createElement('div',children,classes,attrs) //document.getElementById("songs").appendChild(createElement("div", children, classes, attrs)); - return createElement("div", children, classes, attrs) + const el = createElement("div", children, classes, attrs) + //console.log(el.attributes) + return el } /** @@ -106,13 +124,11 @@ function createPlaylistElement({ id, name, songs }) { const info = createElement("p"); info.textContent = "songs -"; children.push(info) - for(let i = 1; i <= songs.length; i++){ - + for(let i = 1; i <= songs.length; i++){//pushes every song as an element children.push(createSongElement(getEl(player.songs,songs[i-1]))); } - console.log(children); - + //console.log(children); return createElement("div", children, classes, attrs) } @@ -136,12 +152,15 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { for(const cls of classes){ newEl.classList.add(cls); } - newEl.attributes = attributes; - //document.getElementById("songs").appendChild(newEl); + for(const atr in attributes){ + newEl.setAttribute(atr,attributes[atr]) + } return newEl } // You can write more code below this line for(const song of player.songs){ - document.getElementById("songs").appendChild(createSongElement(song)); + let el = createSongElement(song) + document.getElementById("songs").appendChild(el); + //console.log(el.attributes); } From 5031853bd03341431970df216223dbf8004c8a00 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Sun, 12 Sep 2021 21:02:37 +0300 Subject: [PATCH 03/12] more updates --- index.html | 8 ++- scripts/index.js | 135 ++++++++++++++++++++++++++++++++++++++++++++--- style.css | 4 +- 3 files changed, 137 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 740fc3f2..3d8db310 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,13 @@
    diff --git a/scripts/index.js b/scripts/index.js index 0da2838d..d4fd7966 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -18,6 +18,33 @@ function convertDuration(duration) { } } +function generateID(arr, id){ + //parameters - arr (type array(of objects)) + // id (type number)(optional) + //if id is given - checks if it aviable id (if its not already used) + //if id isnt given - generate new id + //returns the id + + let ids = [];//an array that includes all the ids of the objects in arr + for(let cell of arr){ + ids.push(cell.id); + } + + if(!id){//if id is undifined (optional!) => creates new one + let i = 1; + while(ids.includes(i)){ + i++; + } + id = i; + } + else{//if id has been given, checks if it already used. + if(ids.includes(id)){ + throw(id + " id already exist!"); + } + } + return id; + } + function getEl(arr, id){ //parameters - arr (type array(of objects)) // id (type number) @@ -31,17 +58,104 @@ function getEl(arr, id){ } function newWindow(){ - let songEl = document.getElementById("songs") - while(songEl.firstChild){ - songEl.removeChild(songEl.firstChild); + let el = document.getElementById('main-content'); + while(el.firstChild){ + el.removeChild(el.firstChild); } + + el.appendChild(createElement("div",[],[],{'id':'songs' , 'class':'main-content'})) + el.appendChild(createElement("div",[],[],{'id':'playlists', 'class':'main-content'})) +} - let plEl = document.getElementById("playlists") - while(plEl.firstChild){ - plEl.removeChild(plEl.firstChild); - } +function addSongHandler(){ + newWindow(); + let children = [] + let text; + let td, td1; + + let head = document.createElement("h1"); + head.textContent = "Add Song" + + text = document.createElement("text"); + text.textContent = "Song's name" + td = createElement("td",[text]) + let title = createElement("input",[],[],{"type":"text", "name":"name", "placeholder":"Name", "required":"required"}); + td1 = createElement("td",[title]) + children.push(createElement("tr", [td,td1],[],{})) + + text = document.createElement("text"); + text.textContent = "Song's album" + td = createElement("td",[text]) + let album = createElement("input",[],[],{"type":"text", "name":"album", "placeholder":"album", "required":"required"}); + td1 = createElement("td",[album]) + children.push(createElement("tr", [td,td1],[],{})) + + text = document.createElement("text"); + text.textContent = "Artist" + td = createElement("td",[text]) + let Artist = createElement("input",[],[],{"type":"text", "name":"Artist", "placeholder":"Artist", "required":"required"}); + td1 = createElement("td",[Artist]) + children.push(createElement("tr", [td,td1],[],{})) + + text = document.createElement("text"); + text.textContent = "Duration" + td = createElement("td",[text]) + let Duration = createElement("input",[],[],{"type":"text", "name":"Duration", "placeholder":"Duration", "required":"required"}); + td1 = createElement("td",[Duration]) + children.push(createElement("tr", [td,td1],[],{})) + + text = document.createElement("text"); + text.textContent = "ID (optional)" + td = createElement("td",[text]) + let id = createElement("input", [],[],{"type":"text", "name":"id", "placeholder":"ID"}) + td1 = createElement("td",[id]) + children.push(createElement("tr", [td,td1],[],{})) + + + // create a submit button + let s = createElement("input",[],[],{"type":"submit", "value":"Add"/*, "onClick":"formSubmit()"*/}) + td = createElement("tr",[s]) + children.push(td); + + + //form.setAttribute("action", "submit.php"); + let tr = createElement("tr",children) + let table = createElement("table",[tr]) + let form = createElement("form",[head, table],["main-content"],{"onsubmit":"formSubmit()"}) + // Create a form synamically + form.setAttribute("method", "post"); + // let d = createElement("div",[form],["main-content"]) + document.getElementById("main-content").appendChild(form) } +function formSubmit(){ + console.log("WORK!!!!"); +} + +function addSong(title, album, artist, duration = "00:00", id) { + //parameters - title (type string) + // album (type string) + // artist (type string) + // duration (type string)(format 'mm:ss') + // id(type number)(optional) + //creates new song, add it to songs array. + //return his id + id = generateID(player.songs, id); + duration = convertDuration(duration); + //TODO: find a better way to generate the object + let newSong={ + id: id, + title: title, + album: album, + artist: artist, + duration: duration, + } + player.songs.push(newSong); + return id; + } + +//song on click. +//deletes everything and shows songs function songsHandler(){ newWindow() for(const song of player.songs){ @@ -68,6 +182,11 @@ function playSong(songId) { while(currDir.firstChild){ currDir.removeChild(currDir.firstChild); } + + const plyNow = createElement("header"); + plyNow.textContent = "Playing Now"; + currDir.appendChild(plyNow); + if(song.duration <= 120){ currDir.style.background = "rgb(0,255,0)" } @@ -75,7 +194,7 @@ function playSong(songId) { currDir.style.background = "rgb(255,0,0)" } else{ - const green = (300 - song.duration)*256/300 + const green = (420 - song.duration)*256/300 const red = 256-green; currDir.style.background = "rgb(" + red +"," + green + ",0)" } diff --git a/style.css b/style.css index a1b24042..e97b6694 100644 --- a/style.css +++ b/style.css @@ -24,6 +24,7 @@ body{ height: 100%; background: #4b4276; } +td { white-space:pre-wrap; word-wrap:break-word } nav ul li{ padding:15px; @@ -78,4 +79,5 @@ p{ .playlist h1{ font-size: 20px; -} \ No newline at end of file +} + From 58981c8740d91784a8f25e67f0d7db9e54eeeac2 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Sun, 12 Sep 2021 21:27:49 +0300 Subject: [PATCH 04/12] summaryt --- index.html | 2 +- scripts/index.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3d8db310..21bd650a 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ songs
  • playlists
    • diff --git a/scripts/index.js b/scripts/index.js index d4fd7966..1de1fedd 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -67,6 +67,20 @@ function newWindow(){ el.appendChild(createElement("div",[],[],{'id':'playlists', 'class':'main-content'})) } +function removeSongHandler(){ + newWindow(); + + let rad + let songEl + let form = createElement("form",[],['main-content'],{}) + for(let song of player.songs){ + songEl = createSongElement(song); + rad = createElement("input",[songEl],[],{'type':'checkbox'}) + form.appendChild(rad); + } + document.getElementById("main-content").appendChild(form); +} + function addSongHandler(){ newWindow(); let children = [] From f1e13c939afa729a810fd721102fa788f2f4a3e1 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Thu, 16 Sep 2021 20:26:03 +0300 Subject: [PATCH 05/12] Update index.js --- scripts/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 1de1fedd..4d25476a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -87,38 +87,38 @@ function addSongHandler(){ let text; let td, td1; - let head = document.createElement("h1"); + let head = createElement("h1"); head.textContent = "Add Song" - text = document.createElement("text"); + text = createElement("text"); text.textContent = "Song's name" td = createElement("td",[text]) let title = createElement("input",[],[],{"type":"text", "name":"name", "placeholder":"Name", "required":"required"}); td1 = createElement("td",[title]) children.push(createElement("tr", [td,td1],[],{})) - text = document.createElement("text"); + text = createElement("text"); text.textContent = "Song's album" td = createElement("td",[text]) let album = createElement("input",[],[],{"type":"text", "name":"album", "placeholder":"album", "required":"required"}); td1 = createElement("td",[album]) children.push(createElement("tr", [td,td1],[],{})) - text = document.createElement("text"); + text = createElement("text"); text.textContent = "Artist" td = createElement("td",[text]) let Artist = createElement("input",[],[],{"type":"text", "name":"Artist", "placeholder":"Artist", "required":"required"}); td1 = createElement("td",[Artist]) children.push(createElement("tr", [td,td1],[],{})) - text = document.createElement("text"); + text = createElement("text"); text.textContent = "Duration" td = createElement("td",[text]) let Duration = createElement("input",[],[],{"type":"text", "name":"Duration", "placeholder":"Duration", "required":"required"}); td1 = createElement("td",[Duration]) children.push(createElement("tr", [td,td1],[],{})) - text = document.createElement("text"); + text = createElement("text"); text.textContent = "ID (optional)" td = createElement("td",[text]) let id = createElement("input", [],[],{"type":"text", "name":"id", "placeholder":"ID"}) @@ -127,7 +127,7 @@ function addSongHandler(){ // create a submit button - let s = createElement("input",[],[],{"type":"submit", "value":"Add"/*, "onClick":"formSubmit()"*/}) + let s = createElement("input",[],[],{"type":"submit", "value":"Add", "onclick":"formSubmit"}) td = createElement("tr",[s]) children.push(td); @@ -135,7 +135,7 @@ function addSongHandler(){ //form.setAttribute("action", "submit.php"); let tr = createElement("tr",children) let table = createElement("table",[tr]) - let form = createElement("form",[head, table],["main-content"],{"onsubmit":"formSubmit()"}) + let form = createElement("form",[head, table],["main-content"]) // Create a form synamically form.setAttribute("method", "post"); // let d = createElement("div",[form],["main-content"]) From b4bd94ede3d98eaa9439ed50e199cbe6846be0c0 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 03:22:06 +0300 Subject: [PATCH 06/12] updates and optimization --- index.new.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.new.html b/index.new.html index eba39f17..ed4b9cae 100644 --- a/index.new.html +++ b/index.new.html @@ -24,7 +24,7 @@

    Add a new song

    Songs

    - +

    Playlists

    - +
    From 9208e3d9c3477ffac5861db460f64084f0666f1a Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 03:23:54 +0300 Subject: [PATCH 07/12] updates and optimizations --- index.html | 1 - scripts/index.js | 139 +++++++++++++++++++++++++++-------------------- 2 files changed, 81 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index 21bd650a..7db9c8bf 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,6 @@ songs
  • playlists
    • diff --git a/scripts/index.js b/scripts/index.js index 4d25476a..275d339f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -67,67 +67,64 @@ function newWindow(){ el.appendChild(createElement("div",[],[],{'id':'playlists', 'class':'main-content'})) } -function removeSongHandler(){ - newWindow(); +function removeSongHandler(id){ + //newWindow(); + let song2delete = getEl(player.songs,id); + const index = player.songs.indexOf(song2delete); + player.songs.splice(index,1); - let rad - let songEl - let form = createElement("form",[],['main-content'],{}) - for(let song of player.songs){ - songEl = createSongElement(song); - rad = createElement("input",[songEl],[],{'type':'checkbox'}) - form.appendChild(rad); + for(const pl of player.playlists){ + let songs = pl.songs; + const i = songs.indexOf(id); + if(i > -1){ + songs.splice(i,1); + } + } + + //if the song is currently playing: + const playNowDiv = document.getElementById("playNow").children[1]; + if(playNowDiv){ + if(playNowDiv.id === "song" + id){ + document.getElementById("playNow").removeChild(playNowDiv); + } } - document.getElementById("main-content").appendChild(form); + + songsHandler(); } function addSongHandler(){ newWindow(); let children = [] let text; + let keyInput; let td, td1; let head = createElement("h1"); head.textContent = "Add Song" - - text = createElement("text"); - text.textContent = "Song's name" - td = createElement("td",[text]) - let title = createElement("input",[],[],{"type":"text", "name":"name", "placeholder":"Name", "required":"required"}); - td1 = createElement("td",[title]) - children.push(createElement("tr", [td,td1],[],{})) - - text = createElement("text"); - text.textContent = "Song's album" - td = createElement("td",[text]) - let album = createElement("input",[],[],{"type":"text", "name":"album", "placeholder":"album", "required":"required"}); - td1 = createElement("td",[album]) - children.push(createElement("tr", [td,td1],[],{})) - text = createElement("text"); - text.textContent = "Artist" - td = createElement("td",[text]) - let Artist = createElement("input",[],[],{"type":"text", "name":"Artist", "placeholder":"Artist", "required":"required"}); - td1 = createElement("td",[Artist]) - children.push(createElement("tr", [td,td1],[],{})) - text = createElement("text"); - text.textContent = "Duration" - td = createElement("td",[text]) - let Duration = createElement("input",[],[],{"type":"text", "name":"Duration", "placeholder":"Duration", "required":"required"}); - td1 = createElement("td",[Duration]) - children.push(createElement("tr", [td,td1],[],{})) + const keys = ["name", "album", "artist", "duration"] + for(const key of keys){ + text = createElement("text"); + text.textContent = "Song's " + key; + td = createElement("td",[text]); + keyInput = createElement("input",[],[],{"id":key, "type":"text", "name":key, "placeholder":key, "required":"required"}); + td1 = createElement("td",[keyInput]) + children.push(createElement("tr", [td,td1],[],{})) + } text = createElement("text"); text.textContent = "ID (optional)" td = createElement("td",[text]) - let id = createElement("input", [],[],{"type":"text", "name":"id", "placeholder":"ID"}) + let id = createElement("input", [],[],{"type":"text", "id":"id", "placeholder":"ID"}) td1 = createElement("td",[id]) children.push(createElement("tr", [td,td1],[],{})) // create a submit button - let s = createElement("input",[],[],{"type":"submit", "value":"Add", "onclick":"formSubmit"}) + let s = createElement("input",[],[],{"type":"submit", "value":"Add", "onclick":"formSubmit()"}) + /*playSong(${song.id})*/ + s.textContent = "Add" td = createElement("tr",[s]) children.push(td); @@ -143,7 +140,32 @@ function addSongHandler(){ } function formSubmit(){ - console.log("WORK!!!!"); + const name = document.getElementById("name").value; + const album = document.getElementById("album").value; + const artist = document.getElementById("artist").value; + const duration = document.getElementById("duration").value; + const id = document.getElementById("id").value; + + if(!name || !album || !artist || !duration) + return; + + const indexToCheck = [0,1,3,4] + if(duration.length != 5){ + alert("Unvalide Duration!") + return; + } + if((duration[0] < '0' || duration[0] > '9') || + (duration[1] < '0' || duration[1] > '9') || + (duration[3] < '0' || duration[3] >= '6') || + (duration[4] < '0' || duration[4] > '9') || + duration[2] != ":"){ + alert("Unvalide Duration!") + return; + } + + addSong(name, album, artist, duration, id); + + songsHandler(); } function addSong(title, album, artist, duration = "00:00", id) { @@ -157,23 +179,25 @@ function addSong(title, album, artist, duration = "00:00", id) { id = generateID(player.songs, id); duration = convertDuration(duration); //TODO: find a better way to generate the object - let newSong={ - id: id, - title: title, - album: album, - artist: artist, - duration: duration, - } + let newSong={id, title, album, artist, duration} player.songs.push(newSong); return id; } -//song on click. -//deletes everything and shows songs function songsHandler(){ +//deletes everything and shows songs newWindow() for(const song of player.songs){ - document.getElementById("songs").appendChild(createSongElement(song)) + const playButt = createElement("button",[],[],{onclick: `playSong(${song.id})`, "value":"Play"}) + playButt.textContent = "Play"; + + const removeButt = createElement("button",[],[],{onclick: `removeSongHandler(${song.id})`, "value":"Remove"}) + removeButt.textContent= "Remove"; + + const songDiv = createSongElement(song) + songDiv.appendChild(playButt); + songDiv.appendChild(removeButt); + document.getElementById("songs").appendChild(songDiv) } } @@ -221,7 +245,7 @@ function playSong(songId) { function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] const classes = ["song"] - const attrs = { onclick: `playSong(${id})` } + const attrs = {"id":"song" + id} const topic = createElement("h1"); topic.textContent = "song #" + id + "\n"; @@ -231,9 +255,12 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { info.textContent = "name: " + title + "\nalbum: " + album + "\nartist: " + artist + "\nduration: " + convertDuration(duration); children.push(info) - const img = createElement("img"); - img.src = coverArt; - children.push(img) + if(coverArt){ + const img = createElement("img"); + img.src = coverArt; + children.push(img) + } + //createElement('div',children,classes,attrs) //document.getElementById("songs").appendChild(createElement("div", children, classes, attrs)); @@ -292,8 +319,4 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { } // You can write more code below this line -for(const song of player.songs){ - let el = createSongElement(song) - document.getElementById("songs").appendChild(el); - //console.log(el.attributes); -} +songsHandler() From f20115004ed40ce3f200b337dc631c40054deb1d Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 03:44:30 +0300 Subject: [PATCH 08/12] Update index.js --- scripts/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 275d339f..89de8e2c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -149,7 +149,6 @@ function formSubmit(){ if(!name || !album || !artist || !duration) return; - const indexToCheck = [0,1,3,4] if(duration.length != 5){ alert("Unvalide Duration!") return; @@ -195,7 +194,11 @@ function songsHandler(){ removeButt.textContent= "Remove"; const songDiv = createSongElement(song) + let br = createElement("br"); + songDiv.appendChild(br); songDiv.appendChild(playButt); + br = createElement("br"); + songDiv.appendChild(br); songDiv.appendChild(removeButt); document.getElementById("songs").appendChild(songDiv) } @@ -215,7 +218,7 @@ function playlistsHandler(){ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - const song = getEl(player.songs, songId); + let song = getEl(player.songs, songId); let currDir = document.getElementById("playNow") while(currDir.firstChild){ currDir.removeChild(currDir.firstChild); @@ -236,6 +239,10 @@ function playSong(songId) { const red = 256-green; currDir.style.background = "rgb(" + red +"," + green + ",0)" } + + // const stopButt = createElement("button",[],[],{"onclick":document.getElementById("playNow").removeChild(playNowDiv)}) + // song = createSongElement(song) + currDir.appendChild(createSongElement(song)) } @@ -284,7 +291,7 @@ function createPlaylistElement({ id, name, songs }) { const info = createElement("p"); info.textContent = "songs -"; children.push(info) - for(let i = 1; i <= songs.length; i++){//pushes every song as an element + for(let i = 1; i <= songs.length; i++){//pushes all the song in a playlist as an element children.push(createSongElement(getEl(player.songs,songs[i-1]))); } From 5ad1b818cbcd0e4283eb5033b1806803b03e80f3 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 17:47:47 +0300 Subject: [PATCH 09/12] Update index.js UPDATE ADD SONG+ STOP PLAING A SONG --- scripts/index.js | 36 +++++++++++++++++++++++------------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 89de8e2c..dbfe2349 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -103,7 +103,7 @@ function addSongHandler(){ head.textContent = "Add Song" - const keys = ["name", "album", "artist", "duration"] + const keys = ["name", "album", "artist", "duration", "image"] for(const key of keys){ text = createElement("text"); text.textContent = "Song's " + key; @@ -130,7 +130,7 @@ function addSongHandler(){ //form.setAttribute("action", "submit.php"); - let tr = createElement("tr",children) + //let tr = createElement("tr",children) let table = createElement("table",[tr]) let form = createElement("form",[head, table],["main-content"]) // Create a form synamically @@ -144,6 +144,7 @@ function formSubmit(){ const album = document.getElementById("album").value; const artist = document.getElementById("artist").value; const duration = document.getElementById("duration").value; + const img = document.getElementById("image").value; const id = document.getElementById("id").value; if(!name || !album || !artist || !duration) @@ -162,12 +163,12 @@ function formSubmit(){ return; } - addSong(name, album, artist, duration, id); + addSong(name, album, artist, duration, id, img); songsHandler(); } -function addSong(title, album, artist, duration = "00:00", id) { +function addSong(title, album, artist, duration = "00:00", id, coverArt) { //parameters - title (type string) // album (type string) // artist (type string) @@ -178,7 +179,7 @@ function addSong(title, album, artist, duration = "00:00", id) { id = generateID(player.songs, id); duration = convertDuration(duration); //TODO: find a better way to generate the object - let newSong={id, title, album, artist, duration} + let newSong={id, title, album, artist, duration, coverArt} player.songs.push(newSong); return id; } @@ -211,14 +212,7 @@ function playlistsHandler(){ } } -/** - * 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) { - let song = getEl(player.songs, songId); +function clearPlayingNow(){ let currDir = document.getElementById("playNow") while(currDir.firstChild){ currDir.removeChild(currDir.firstChild); @@ -227,7 +221,19 @@ function playSong(songId) { const plyNow = createElement("header"); plyNow.textContent = "Playing Now"; currDir.appendChild(plyNow); +} +/** + * 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) { + clearPlayingNow() + let song = getEl(player.songs, songId); + let currDir = document.getElementById("playNow") + if(song.duration <= 120){ currDir.style.background = "rgb(0,255,0)" } @@ -244,6 +250,10 @@ function playSong(songId) { // song = createSongElement(song) currDir.appendChild(createSongElement(song)) + + const stopButt = createElement("button",[],[],{onclick:"clearPlayingNow()"}); + stopButt.textContent = "Stop"; + currDir.appendChild(stopButt); } /** From de7a8d230d5335179b8e6021f6007a00ac29e4ec Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 22:37:03 +0300 Subject: [PATCH 10/12] Arrange Arranging the code in the files, fixing notes for each function --- index.html | 7 +- scripts/index.js | 208 ++++++++++++++++++++-------------------------- scripts/player.js | 109 ++++++++++++++++++++++++ 3 files changed, 205 insertions(+), 119 deletions(-) diff --git a/index.html b/index.html index 7db9c8bf..5f895ef7 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,12 @@
  • add song
    • -
  • playlists
    • +
  • + playlists + +
    • diff --git a/scripts/index.js b/scripts/index.js index dbfe2349..394a83a9 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,63 +1,8 @@ -function convertDuration(duration) { - //parameters - duration (type string('mm:ss') / number(seconds)) - //return string('mm:ss') if number was given - //return number(seconds) if string was given - if(typeof(duration) === 'number'){ - let min = Math.floor(duration / 60); - let sec = duration % 60; - if (min < 10) { - min = "0" + String(min); - } - if (sec < 10) { - sec = "0" + String(sec); - } - return min + ':' + sec; - } - else{//if its a string - return parseInt(duration.slice(3)) + parseInt(duration.slice(0,2)) * 60; - } -} - -function generateID(arr, id){ - //parameters - arr (type array(of objects)) - // id (type number)(optional) - //if id is given - checks if it aviable id (if its not already used) - //if id isnt given - generate new id - //returns the id - - let ids = [];//an array that includes all the ids of the objects in arr - for(let cell of arr){ - ids.push(cell.id); - } - - if(!id){//if id is undifined (optional!) => creates new one - let i = 1; - while(ids.includes(i)){ - i++; - } - id = i; - } - else{//if id has been given, checks if it already used. - if(ids.includes(id)){ - throw(id + " id already exist!"); - } - } - return id; - } - -function getEl(arr, id){ - //parameters - arr (type array(of objects)) - // id (type number) - //returns the object in the array that has the wanted id. - for(let el of arr){ - if(el.id === id){ - return el; - } - } - throw("couldn't find element where id=" + id); - } - +/** + * removes all the elements from main content block + */ function newWindow(){ + let el = document.getElementById('main-content'); while(el.firstChild){ el.removeChild(el.firstChild); @@ -67,19 +12,15 @@ function newWindow(){ el.appendChild(createElement("div",[],[],{'id':'playlists', 'class':'main-content'})) } +/** + * called when a remove button has been clicked. + * removes the song, removes it from the playlists(if exists). + * if the song is currently playing, stops it. + * + * @param {number} id - the id of clicked song + */ function removeSongHandler(id){ - //newWindow(); - let song2delete = getEl(player.songs,id); - const index = player.songs.indexOf(song2delete); - player.songs.splice(index,1); - - for(const pl of player.playlists){ - let songs = pl.songs; - const i = songs.indexOf(id); - if(i > -1){ - songs.splice(i,1); - } - } + removeSong(id); //if the song is currently playing: const playNowDiv = document.getElementById("playNow").children[1]; @@ -92,6 +33,10 @@ function removeSongHandler(id){ songsHandler(); } +/** + * called when 'add song' clicked. + * opens a form to add a song. + */ function addSongHandler(){ newWindow(); let children = [] @@ -102,7 +47,7 @@ function addSongHandler(){ let head = createElement("h1"); head.textContent = "Add Song" - + //the loop generates the form inside a table by the keys. const keys = ["name", "album", "artist", "duration", "image"] for(const key of keys){ text = createElement("text"); @@ -113,6 +58,7 @@ function addSongHandler(){ children.push(createElement("tr", [td,td1],[],{})) } + //generates the id as an optional input in the form text = createElement("text"); text.textContent = "ID (optional)" td = createElement("td",[text]) @@ -120,25 +66,23 @@ function addSongHandler(){ td1 = createElement("td",[id]) children.push(createElement("tr", [td,td1],[],{})) - - // create a submit button + // create a submit button let s = createElement("input",[],[],{"type":"submit", "value":"Add", "onclick":"formSubmit()"}) - /*playSong(${song.id})*/ s.textContent = "Add" td = createElement("tr",[s]) children.push(td); - - //form.setAttribute("action", "submit.php"); - //let tr = createElement("tr",children) - let table = createElement("table",[tr]) + let table = createElement("table",children) let form = createElement("form",[head, table],["main-content"]) - // Create a form synamically + // Create a form dynamically form.setAttribute("method", "post"); - // let d = createElement("div",[form],["main-content"]) document.getElementById("main-content").appendChild(form) } +/** + * called when add-song form is submited. + * checks some of the values and cretes new song. + */ function formSubmit(){ const name = document.getElementById("name").value; const album = document.getElementById("album").value; @@ -147,11 +91,14 @@ function formSubmit(){ const img = document.getElementById("image").value; const id = document.getElementById("id").value; - if(!name || !album || !artist || !duration) + if(!name || !album || !artist || !duration){ + addSongHandler(); return; + } if(duration.length != 5){ alert("Unvalide Duration!") + addSongHandler(); return; } if((duration[0] < '0' || duration[0] > '9') || @@ -160,6 +107,7 @@ function formSubmit(){ (duration[4] < '0' || duration[4] > '9') || duration[2] != ":"){ alert("Unvalide Duration!") + addSongHandler(); return; } @@ -168,25 +116,11 @@ function formSubmit(){ songsHandler(); } -function addSong(title, album, artist, duration = "00:00", id, coverArt) { - //parameters - title (type string) - // album (type string) - // artist (type string) - // duration (type string)(format 'mm:ss') - // id(type number)(optional) - //creates new song, add it to songs array. - //return his id - id = generateID(player.songs, id); - duration = convertDuration(duration); - //TODO: find a better way to generate the object - let newSong={id, title, album, artist, duration, coverArt} - player.songs.push(newSong); - return id; - } - -function songsHandler(){ -//deletes everything and shows songs - newWindow() +/** + * @returns {array} songsElems - array of html elements that represents all the songs + */ +function getSongsElems(){ + let songsElems = []; for(const song of player.songs){ const playButt = createElement("button",[],[],{onclick: `playSong(${song.id})`, "value":"Play"}) playButt.textContent = "Play"; @@ -195,16 +129,44 @@ function songsHandler(){ removeButt.textContent= "Remove"; const songDiv = createSongElement(song) + + songsElems.push(songDiv); + } + return songsElems; +} + +/** + * called when 'songs' button (nav-bar) clicked + * resets the main content and shows the songs + */ +function songsHandler(){ + newWindow(); + let songsElems = getSongsElems(); + // console.log(songsElems) + for(const songEl of songsElems){ + // console.log(songEl.id) + const id = parseInt(songEl.id.slice(4, songEl.id.length)) + // console.log(songEl.id + " - " + id + " - " + (songEl.id.length)); + const playButt = createElement("button",[],[],{onclick: `playSong(${id})`, "value":"Play"}) + playButt.textContent = "Play"; + + const removeButt = createElement("button",[],[],{onclick: `removeSongHandler(${id})`, "value":"Remove"}) + removeButt.textContent= "Remove"; + let br = createElement("br"); - songDiv.appendChild(br); - songDiv.appendChild(playButt); + songEl.appendChild(br); + songEl.appendChild(playButt); br = createElement("br"); - songDiv.appendChild(br); - songDiv.appendChild(removeButt); - document.getElementById("songs").appendChild(songDiv) + songEl.appendChild(br); + songEl.appendChild(removeButt); + document.getElementById("songs").appendChild(songEl) } } +/** + * called when 'playlists' button (nav-bar) clicked + * resets the main content and shows the playLists + */ function playlistsHandler(){ newWindow() for(const playlist of player.playlists){ @@ -212,6 +174,14 @@ function playlistsHandler(){ } } +function addSongToPlaylist(){ + newWindow(); + +} + +/** + * clears the playing-now div (at the bottom of the nav-bar) + */ function clearPlayingNow(){ let currDir = document.getElementById("playNow") while(currDir.firstChild){ @@ -225,8 +195,7 @@ function clearPlayingNow(){ /** * Plays a song from the player. - * Playing a song means changing the visual indication of the currently playing song. - * + * Playing a song means showing the song in the 'playing now' section (at the bottom of the nav-bar) * @param {String} songId - the ID of the song to play */ function playSong(songId) { @@ -246,18 +215,20 @@ function playSong(songId) { currDir.style.background = "rgb(" + red +"," + green + ",0)" } - // const stopButt = createElement("button",[],[],{"onclick":document.getElementById("playNow").removeChild(playNowDiv)}) - // song = createSongElement(song) - currDir.appendChild(createSongElement(song)) + const br = createElement("br") + currDir.childNodes[1].appendChild(br); + const stopButt = createElement("button",[],[],{onclick:"clearPlayingNow()"}); - stopButt.textContent = "Stop"; - currDir.appendChild(stopButt); + stopButt.textContent = "Stop Playing"; + currDir.childNodes[1].appendChild(stopButt); } /** * Creates a song DOM element based on a song object. + * @param {object} song - gets a song + * @returns {HTMLElement} div - includes all the song's details */ function createSongElement({ id, title, album, artist, duration, coverArt }) { const children = [] @@ -277,17 +248,15 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { img.src = coverArt; children.push(img) } - - //createElement('div',children,classes,attrs) - //document.getElementById("songs").appendChild(createElement("div", children, classes, attrs)); const el = createElement("div", children, classes, attrs) - //console.log(el.attributes) return el } /** * Creates a playlist DOM element based on a playlist object. + * @param {object} playlist + * @returns {HTMLElement} div - a div that includes playlist's details and song */ function createPlaylistElement({ id, name, songs }) { const children = [] @@ -305,7 +274,6 @@ function createPlaylistElement({ id, name, songs }) { children.push(createSongElement(getEl(player.songs,songs[i-1]))); } - //console.log(children); return createElement("div", children, classes, attrs) } @@ -320,6 +288,8 @@ function createPlaylistElement({ id, name, songs }) { * 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 + * + * @returns {HTMLElement} newEl - the element that has been created */ function createElement(tagName, children = [], classes = [], attributes = {}) { let newEl = document.createElement(tagName); @@ -336,4 +306,6 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { } // You can write more code below this line +player.songs.sort((s1,s2) => s1.title.localeCompare(s2.title)); +player.playlists.sort((pl1,pl2) => pl1.name.localeCompare(pl2.name)); songsHandler() diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..378e5c81 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,112 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } + +/** + * gets specific object in an array by id. + * throws exception if not found. + * @param {array} arr - songs array or playlist array to seek in. + * @param {number} id - the wanted id of the object + * @returns {object} - the object in the array that has the wanted id. + */ +function getEl(arr, id){ + for(let el of arr){ + if(el.id === id){ + return el; + } + } + throw("couldn't find element where id=" + id); +} + +/** + * gets an array of objects and id(optional) + * if id is given - checks if it aviable id (if its not already used) + * if id isnt given - generate new id + * @param {array} arr + * @param {number} id + * @returns {number} id + */ +function generateID(arr, id){ + let ids = [];//an array that includes all the ids of the objects in arr + for(let cell of arr){ + ids.push(cell.id); + } + + if(!id){//if id is undifined (optional!) => creates new one + let i = 1; + while(ids.includes(i)){ + i++; + } + id = i; + } + else{//if id has been given, checks if it already used. + if(ids.includes(id)){ + throw(id + " id already exist!"); + } + } + return id; +} + +/** + * return string('mm:ss') if number was given + * return number(seconds) if string was given + * @param {string|number} duration (string('mm:ss') / number(seconds)) + * @returns {string|number} duration + */ +function convertDuration(duration) { + if(typeof(duration) === 'number'){ + let min = Math.floor(duration / 60); + let sec = duration % 60; + if (min < 10) { + min = "0" + String(min); + } + if (sec < 10) { + sec = "0" + String(sec); + } + return min + ':' + sec; + } + else{//if its a string + return parseInt(duration.slice(3)) + parseInt(duration.slice(0,2)) * 60; + } +} + +/** + * creates new song, add it to songs array. + * @param {string} title - song's title. + * @param {string} album - song's album. + * @param {string} artist - song's artist. + * @param {string} duration - song's duration. patern - "MM:SS" + * @param {number} id - optional. the id of the song. if not given, generates new one. (should be uniqe.) + * @param {string} coverArt - path to image of the song.(local or from the network). + * @returns {number} id - the id of the new object + */ +function addSong(title, album, artist, duration = "00:00", id, coverArt) { + id = generateID(player.songs, id); + duration = convertDuration(duration); + let newSong={id, title, album, artist, duration, coverArt} + player.songs.push(newSong); + player.songs.sort((s1,s2) => s1.title.localeCompare(s2.title)); + return id; +} + +/** + * removes a song by the given id. + * if the song doesn't exist - throws exception + * @param {number} id + */ +function removeSong(id) { + //parameters - id (type number) + //removes the song with the wanted id(from songs array and from all the playlists) + let song2delete = getEl(player.songs,id); + const index = player.songs.indexOf(song2delete); + player.songs.splice(index,1); //deletes the wanted song from the songs array. + + //searches and deletes the id of the song from all the playlists + for(const pl of player.playlists){ + let songs = pl.songs; + const i = songs.indexOf(id); + if(i > -1){ + songs.splice(i,1); + } + } + } From 46389d8249b66c7731733040ce16cbdd8b66dc81 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Fri, 17 Sep 2021 22:47:30 +0300 Subject: [PATCH 11/12] readme file --- README.md | 98 ++++++++++-------------------------------------------- README2.md | 82 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 81 deletions(-) create mode 100644 README2.md diff --git a/README.md b/README.md index 3ed9a821..915d4464 100644 --- a/README.md +++ b/README.md @@ -1,82 +1,18 @@ -# MP3 DOM +Name - Dayan Badalbaev. +Welcome to my MP3 player! + +explanatin about what's going on in this repo. +I started to work on this project at the beggining of the first assinment of DOM. +I wanted to continue it in my own way, this is why its not following the given tamplate. +Also I splited the function between the js files including my logic, while im designing my style as a programmer. +Functions that work with the Player object are in `player.js` with the object. +Function that works with the DOM and the event listeners and so on are in `index.js`. +Hope you will appreciate my way and decisions as a programer. + +The site supports- + - Show all the songs. + - Show all the playlists. + - Add a new song. + - remov a song. + - play a song (with a color ficher). -The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI! - -Your task is to create a webpage that conveniently displays the songs and playlists in a player object. The player object will have the same structure as in your previous assignment. - -## General Instructions - -1. Fork this repo into your account. -2. Clone the forked repo to your computer. -3. Create a new git branch for your work. -4. Complete the requirements. -5. Submit your work. -6. May the odds be ever in your favor! - -## New Requirements! -- There is now a section for adding new songs to the player. Make it work! -- Add a play button to every song. Clicking it will play that song. -- Add a remove button to every song. Clicking it will remove the song from the playlist. -- There should be only one event listener on the entire songs list, that handles all play and remove events of songs. -- You are given new template files to use: `index.new.html` and `index.new.js`. - -## Webpage Requirements - -Your webpage should contain 2 lists: - -- A list of the `songs` in the player, sorted by their titles -- A list of the `playlists` in the player, sorted by their names - -### Songs - -Each song list item shall display the following details: - -- song `title` -- `album` name -- `artist` name -- an image with the album's cover art (`coverArt`) -- song `duration` (in `mm:ss` format, of course) - -One song can be played at a time. There should be some indication of the currently playing song (the specific indication is up to you). Clicking on a song will change the indication of the currently playing song. We have already provided code that handles the click event for you. - -### Playlists - -Every playlist list item should display the following information: - -- playlist `name` -- the number of songs in the playlist -- the total duration of the playlist - -## Bonus Requirements - -- After a song begins to play, it automatically switches to the next one when the song duration has passed. -- The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min. -- When a song is removed, all playlists in the page will also be updated. -- When adding a new song, the songs list will remain sorted by title. -- Anything else you can think of... - -## Technical Instructions - -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`) -- 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. - -## Submission - -1. On GitHub, open a pull request from your branch to the main branch. -2. **Do not merge the pull request!** -3. Add the user `Cyber4sPopo` as collaborator to your repo. -4. Submit a link to the pull request in Google Classroom. - -## Additional Remarks - -- **Avoid duplication!** Use JS functions and CSS classes wisely. -- Maintain high coding standards. Keep your code readable, indented properly, commented and indicative. -- Maintain a proper git workflow. Commit often, push often, write informative commit messages. -- You are free to style your webpage however you like. Make it BEAUTIFUL! diff --git a/README2.md b/README2.md new file mode 100644 index 00000000..3ed9a821 --- /dev/null +++ b/README2.md @@ -0,0 +1,82 @@ +# MP3 DOM + +The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI! + +Your task is to create a webpage that conveniently displays the songs and playlists in a player object. The player object will have the same structure as in your previous assignment. + +## General Instructions + +1. Fork this repo into your account. +2. Clone the forked repo to your computer. +3. Create a new git branch for your work. +4. Complete the requirements. +5. Submit your work. +6. May the odds be ever in your favor! + +## New Requirements! +- There is now a section for adding new songs to the player. Make it work! +- Add a play button to every song. Clicking it will play that song. +- Add a remove button to every song. Clicking it will remove the song from the playlist. +- There should be only one event listener on the entire songs list, that handles all play and remove events of songs. +- You are given new template files to use: `index.new.html` and `index.new.js`. + +## Webpage Requirements + +Your webpage should contain 2 lists: + +- A list of the `songs` in the player, sorted by their titles +- A list of the `playlists` in the player, sorted by their names + +### Songs + +Each song list item shall display the following details: + +- song `title` +- `album` name +- `artist` name +- an image with the album's cover art (`coverArt`) +- song `duration` (in `mm:ss` format, of course) + +One song can be played at a time. There should be some indication of the currently playing song (the specific indication is up to you). Clicking on a song will change the indication of the currently playing song. We have already provided code that handles the click event for you. + +### Playlists + +Every playlist list item should display the following information: + +- playlist `name` +- the number of songs in the playlist +- the total duration of the playlist + +## Bonus Requirements + +- After a song begins to play, it automatically switches to the next one when the song duration has passed. +- The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min. +- When a song is removed, all playlists in the page will also be updated. +- When adding a new song, the songs list will remain sorted by title. +- Anything else you can think of... + +## Technical Instructions + +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`) +- 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. + +## Submission + +1. On GitHub, open a pull request from your branch to the main branch. +2. **Do not merge the pull request!** +3. Add the user `Cyber4sPopo` as collaborator to your repo. +4. Submit a link to the pull request in Google Classroom. + +## Additional Remarks + +- **Avoid duplication!** Use JS functions and CSS classes wisely. +- Maintain high coding standards. Keep your code readable, indented properly, commented and indicative. +- Maintain a proper git workflow. Commit often, push often, write informative commit messages. +- You are free to style your webpage however you like. Make it BEAUTIFUL! From d7acc47dd729d380af057651a3994702ac2928e9 Mon Sep 17 00:00:00 2001 From: Dayan135 Date: Sun, 19 Sep 2021 01:08:54 +0300 Subject: [PATCH 12/12] last changes fix eventListeners --- README.md | 2 +- README2.md | 82 ------------------------------ scripts/index.js | 126 ++++++++++++++++++++++++++++------------------ scripts/player.js | 25 +++++++-- 4 files changed, 99 insertions(+), 136 deletions(-) delete mode 100644 README2.md diff --git a/README.md b/README.md index 915d4464..5bed95e6 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,6 @@ The site supports- - Show all the songs. - Show all the playlists. - Add a new song. - - remov a song. + - remove a song. - play a song (with a color ficher). diff --git a/README2.md b/README2.md deleted file mode 100644 index 3ed9a821..00000000 --- a/README2.md +++ /dev/null @@ -1,82 +0,0 @@ -# MP3 DOM - -The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI! - -Your task is to create a webpage that conveniently displays the songs and playlists in a player object. The player object will have the same structure as in your previous assignment. - -## General Instructions - -1. Fork this repo into your account. -2. Clone the forked repo to your computer. -3. Create a new git branch for your work. -4. Complete the requirements. -5. Submit your work. -6. May the odds be ever in your favor! - -## New Requirements! -- There is now a section for adding new songs to the player. Make it work! -- Add a play button to every song. Clicking it will play that song. -- Add a remove button to every song. Clicking it will remove the song from the playlist. -- There should be only one event listener on the entire songs list, that handles all play and remove events of songs. -- You are given new template files to use: `index.new.html` and `index.new.js`. - -## Webpage Requirements - -Your webpage should contain 2 lists: - -- A list of the `songs` in the player, sorted by their titles -- A list of the `playlists` in the player, sorted by their names - -### Songs - -Each song list item shall display the following details: - -- song `title` -- `album` name -- `artist` name -- an image with the album's cover art (`coverArt`) -- song `duration` (in `mm:ss` format, of course) - -One song can be played at a time. There should be some indication of the currently playing song (the specific indication is up to you). Clicking on a song will change the indication of the currently playing song. We have already provided code that handles the click event for you. - -### Playlists - -Every playlist list item should display the following information: - -- playlist `name` -- the number of songs in the playlist -- the total duration of the playlist - -## Bonus Requirements - -- After a song begins to play, it automatically switches to the next one when the song duration has passed. -- The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min. -- When a song is removed, all playlists in the page will also be updated. -- When adding a new song, the songs list will remain sorted by title. -- Anything else you can think of... - -## Technical Instructions - -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`) -- 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. - -## Submission - -1. On GitHub, open a pull request from your branch to the main branch. -2. **Do not merge the pull request!** -3. Add the user `Cyber4sPopo` as collaborator to your repo. -4. Submit a link to the pull request in Google Classroom. - -## Additional Remarks - -- **Avoid duplication!** Use JS functions and CSS classes wisely. -- Maintain high coding standards. Keep your code readable, indented properly, commented and indicative. -- Maintain a proper git workflow. Commit often, push often, write informative commit messages. -- You are free to style your webpage however you like. Make it BEAUTIFUL! diff --git a/scripts/index.js b/scripts/index.js index 394a83a9..3b443c17 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,7 +1,15 @@ +/** + * @todo + * * add song to playlist + * * add a new plalist + * * remove a song from playlist + * * remove a playlist + */ + /** * removes all the elements from main content block */ -function newWindow(){ +function resetWindow(){ let el = document.getElementById('main-content'); while(el.firstChild){ @@ -29,7 +37,7 @@ function removeSongHandler(id){ document.getElementById("playNow").removeChild(playNowDiv); } } - + songsHandler(); } @@ -38,7 +46,7 @@ function removeSongHandler(id){ * opens a form to add a song. */ function addSongHandler(){ - newWindow(); + resetWindow(); let children = [] let text; let keyInput; @@ -67,8 +75,9 @@ function addSongHandler(){ children.push(createElement("tr", [td,td1],[],{})) // create a submit button - let s = createElement("input",[],[],{"type":"submit", "value":"Add", "onclick":"formSubmit()"}) + let s = createElement("input",[],[],{"type":"submit", "value":"Add"}) s.textContent = "Add" + s.addEventListener("click",eventLesitener) td = createElement("tr",[s]) children.push(td); @@ -116,18 +125,40 @@ function formSubmit(){ songsHandler(); } +/** + * Creates a song DOM element based on a song object. + * @param {object} song - gets a song + * @returns {HTMLElement} div - includes all the song's details + */ + function createSongElement({ id, title, album, artist, duration, coverArt }) { + const children = [] + const classes = ["song"] + const attrs = {"id":"song" + id} + + const topic = createElement("h1"); + topic.textContent = "song #" + id + "\n"; + children.push(topic) + + const info = createElement("p"); + info.textContent = "name: " + title + "\nalbum: " + album + "\nartist: " + artist + "\nduration: " + convertDuration(duration); + children.push(info) + + if(coverArt){ + const img = createElement("img"); + img.src = coverArt; + children.push(img) + } + + const el = createElement("div", children, classes, attrs) + return el +} + /** * @returns {array} songsElems - array of html elements that represents all the songs */ function getSongsElems(){ let songsElems = []; for(const song of player.songs){ - const playButt = createElement("button",[],[],{onclick: `playSong(${song.id})`, "value":"Play"}) - playButt.textContent = "Play"; - - const removeButt = createElement("button",[],[],{onclick: `removeSongHandler(${song.id})`, "value":"Remove"}) - removeButt.textContent= "Remove"; - const songDiv = createSongElement(song) songsElems.push(songDiv); @@ -140,18 +171,17 @@ function getSongsElems(){ * resets the main content and shows the songs */ function songsHandler(){ - newWindow(); + resetWindow(); let songsElems = getSongsElems(); - // console.log(songsElems) for(const songEl of songsElems){ - // console.log(songEl.id) - const id = parseInt(songEl.id.slice(4, songEl.id.length)) - // console.log(songEl.id + " - " + id + " - " + (songEl.id.length)); - const playButt = createElement("button",[],[],{onclick: `playSong(${id})`, "value":"Play"}) + const id = parseInt(songEl.id.slice(4, songEl.id.length)); + const playButt = createElement("button",[],[],{"value":"Play"}); playButt.textContent = "Play"; + playButt.addEventListener("click",eventLesitener) - const removeButt = createElement("button",[],[],{onclick: `removeSongHandler(${id})`, "value":"Remove"}) + const removeButt = createElement("button",[],[],{"value":"Remove"}); removeButt.textContent= "Remove"; + removeButt.addEventListener("click",eventLesitener); let br = createElement("br"); songEl.appendChild(br); @@ -163,20 +193,47 @@ function songsHandler(){ } } +function eventLesitener(event){ + const callerVal = event.target.value; + let id = event.target.parentElement.id; + id = parseInt(id.slice(4,id.length)); + if(callerVal === "Play"){ + playSong(id); + } + else if(callerVal === "Remove"){ + removeSongHandler(id); + } + else if(callerVal === "Add"){ + formSubmit(); + } + else if(callerVal === "Stop"){ + clearPlayingNow(); + } +} + /** * called when 'playlists' button (nav-bar) clicked * resets the main content and shows the playLists */ function playlistsHandler(){ - newWindow() + resetWindow() for(const playlist of player.playlists){ document.getElementById("playlists").appendChild(createPlaylistElement(playlist)) } } function addSongToPlaylist(){ - newWindow(); + resetWindow(); + + + let checkbox, id; + let songsElems = getSongsElems(); + for(let songElem of songsElems){ + id = songElem.id.slice(4, songElem.id.length) + checkbox = createElement("input", [songElem], [], {"id":"cb" + id, "type":"checkbox", "name":"cb" + id}) + console.log(checkbox); + } } /** @@ -220,39 +277,12 @@ function playSong(songId) { const br = createElement("br") currDir.childNodes[1].appendChild(br); - const stopButt = createElement("button",[],[],{onclick:"clearPlayingNow()"}); + const stopButt = createElement("button",[],[],{"value":"Stop"}); + stopButt.addEventListener("click",eventLesitener) stopButt.textContent = "Stop Playing"; currDir.childNodes[1].appendChild(stopButt); } -/** - * Creates a song DOM element based on a song object. - * @param {object} song - gets a song - * @returns {HTMLElement} div - includes all the song's details - */ -function createSongElement({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = ["song"] - const attrs = {"id":"song" + id} - - const topic = createElement("h1"); - topic.textContent = "song #" + id + "\n"; - children.push(topic) - - const info = createElement("p"); - info.textContent = "name: " + title + "\nalbum: " + album + "\nartist: " + artist + "\nduration: " + convertDuration(duration); - children.push(info) - - if(coverArt){ - const img = createElement("img"); - img.src = coverArt; - children.push(img) - } - - const el = createElement("div", children, classes, attrs) - return el -} - /** * Creates a playlist DOM element based on a playlist object. * @param {object} playlist diff --git a/scripts/player.js b/scripts/player.js index 378e5c81..a75b374d 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -164,10 +164,25 @@ function removeSong(id) { //searches and deletes the id of the song from all the playlists for(const pl of player.playlists){ - let songs = pl.songs; - const i = songs.indexOf(id); - if(i > -1){ - songs.splice(i,1); - } + let songs = pl.songs; + const i = songs.indexOf(id); + if(i > -1){ + songs.splice(i,1); + } + if(songs.length === 0){ + removePlaylist(pl.id); + } } +} + +/** + * removes a playlist by an id + * @param {number} id + */ +function removePlaylist(id) { + //parameters - id(type number) + //removes the playlist with the wanted id + let pl = getEl(player.playlists, id); + const index = player.playlists.indexOf(pl); + player.playlists.splice(index,1); }