From fb0f07ea2276cc57171b2c2c55f22aac3f9d42f9 Mon Sep 17 00:00:00 2001 From: IdanHerman12 Date: Sun, 12 Sep 2021 15:17:41 +0300 Subject: [PATCH 1/9] editing createElement --- scripts/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 6842c79..abb5b1f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,7 +5,7 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - // Your code here + } /** @@ -41,7 +41,16 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here + const element= document.createElement(tagName) + classes.forEach(c =>element.classList.add(c)) + const attribute=Object.keys(attributes) + for(let i=0;i Date: Sun, 12 Sep 2021 21:38:53 +0300 Subject: [PATCH 2/9] completed few of the functions --- index.html | 2 ++ scripts/index.js | 88 ++++++++++++++++++++++++++++++++++++++++++----- scripts/player.js | 49 ++++++++++++++++++++++++++ style.css | 13 +++++++ 4 files changed, 143 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index c55fb48..796bd06 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,11 @@
+

songs

+

playlists

diff --git a/scripts/index.js b/scripts/index.js index abb5b1f..a5b3977 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,9 +12,10 @@ function playSong(songId) { * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = [] - const attrs = { onclick: `playSong(${id})` } + const song=arguments[0] + const children = songList(song) + const classes = ["song"] + const attrs = { onclick: `playSong(${id})`,cursor:"pointer" } return createElement("div", children, classes, attrs) } @@ -22,8 +23,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { - const children = [] - const classes = [] + const playlist=arguments[0] + const children = playPlaylist(playlist) + const classes = ["playlist"] const attrs = {} return createElement("div", children, classes, attrs) } @@ -41,16 +43,84 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - const element= document.createElement(tagName) + let element= document.createElement(tagName) classes.forEach(c =>element.classList.add(c)) const attribute=Object.keys(attributes) for(let i=0;i10){ return minutes+":"+(seconds-(minutes*60)) + } + else return "0"+minutes+":"+(seconds-(minutes*60)) + } + +// for(let i=0;i Date: Sun, 12 Sep 2021 21:47:00 +0300 Subject: [PATCH 3/9] finished createPlayListElment --- scripts/index.js | 5 +++-- scripts/player.js | 8 ++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index a5b3977..9b3f995 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -82,7 +82,7 @@ return list function playPlaylist(playlist){ const list=[] - const sumDuration =playlistDuration(playlist) + let sumDuration =playlistDuration(playlist) for(let key in playlist){ if(key.toString()!=="songs"){ const li=document.createElement('li') @@ -98,7 +98,8 @@ function playPlaylist(playlist){ } // let sumDuration=playlistDuration(playlist[key]); const li=document.createElement("li") - li.innerText=`duration: ${sumDuration}`; + li.innerText=`duration: ${(sumDuration)}`; + sumDuration=convertDuriation(sumDuration) list.push(sumDuration) return list } diff --git a/scripts/player.js b/scripts/player.js index 641632e..2d2f4dc 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -101,10 +101,10 @@ function convertDuriation(duration){ function playlistDuration(playlist) { let sumDuration=0 - for (let key in player.playlists){ - if(player.playlists[key]===playlist.name){ - for(let i=0;i Date: Sun, 12 Sep 2021 21:50:22 +0300 Subject: [PATCH 4/9] cosmetic changes --- scripts/index.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 9b3f995..4fa2ae4 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -15,7 +15,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const song=arguments[0] const children = songList(song) const classes = ["song"] - const attrs = { onclick: `playSong(${id})`,cursor:"pointer" } + const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id:id } return createElement("div", children, classes, attrs) } @@ -96,22 +96,13 @@ function playPlaylist(playlist){ } } - // let sumDuration=playlistDuration(playlist[key]); const li=document.createElement("li") - li.innerText=`duration: ${(sumDuration)}`; sumDuration=convertDuriation(sumDuration) - list.push(sumDuration) + li.innerText=`duration: ${(sumDuration)}`; + list.push(li) return list } -// function sumPlaylist(playlist){ -// let sumDuration=0 -// for(let i=0;i Date: Sun, 12 Sep 2021 21:58:01 +0300 Subject: [PATCH 5/9] adding sortArray function --- scripts/index.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 4fa2ae4..96dbae2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,7 +5,12 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - + for (let song of player.songs){ + document.getElementById(song.id).style.background="white" + if(song.id===songId){ + document.getElementById(song.id).style.background="lightblue" + } + } } /** @@ -106,7 +111,7 @@ function playPlaylist(playlist){ - + player.songs.sort(sortArray); const x=document.getElementById("songs") for(let i=0;i Date: Tue, 14 Sep 2021 12:48:44 +0300 Subject: [PATCH 6/9] adding the changes for the new assigenment --- README.md | 9 ++++ index.new.html | 61 +++++++++++++++++++++++++ scripts/index.new.js | 104 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 174 insertions(+) create mode 100644 index.new.html create mode 100644 scripts/index.new.js diff --git a/README.md b/README.md index d12d8eb..3ed9a82 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,13 @@ Your task is to create a webpage that conveniently displays the songs and playli 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: @@ -44,6 +51,8 @@ Every playlist list item should display the following information: - 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 diff --git a/index.new.html b/index.new.html new file mode 100644 index 0000000..eba39f1 --- /dev/null +++ b/index.new.html @@ -0,0 +1,61 @@ + + + + + Awesome MP3 Player + + + + + + +

Awesome Player!!!

+
+

Add a new song

+
+ + + + + +
+ +
+
+

Songs

+
+ +
+
+
+

Playlists

+
+ +
+
+ + diff --git a/scripts/index.new.js b/scripts/index.new.js new file mode 100644 index 0000000..c3a39c8 --- /dev/null +++ b/scripts/index.new.js @@ -0,0 +1,104 @@ +/** + * Plays a song from the player. + * Playing a song means changing the visual indication of the currently playing song. + * + * @param {Number} songId - the ID of the song to play + */ +function playSong(songId) { + // Your code here +} + +/** + * 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) { + // Your code here +} + +/** + * Adds a song to the player, and updates the DOM to match. + */ +function addSong({ title, album, artist, duration, coverArt }) { + // Your code here +} + +/** + * 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) { + // Your code here +} + +/** + * Handles a click event on the button that adds songs. + * + * @param {MouseEvent} event - the click event + */ +function handleAddSongEvent(event) { + // 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 = [] + const attrs = {} + const eventListeners = {} + return createElement("div", children, classes, attrs, eventListeners) +} + +/** + * Creates a playlist DOM element based on a playlist object. + */ +function createPlaylistElement({ id, name, songs }) { + const children = [] + const classes = [] + const attrs = {} + const eventListeners = {} + return createElement("div", children, classes, attrs, eventListeners) +} + +/** + * Creates a new DOM element. + * + * Example usage: + * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"}, {click: (...) => {...}}) + * + * @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 + * @param {Object} eventListeners - the event listeners on the element + */ +function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) { + // Your code here +} + +/** + * Inserts all songs in the player as DOM elements into the songs list. + */ +function generateSongs() { + // Your code here +} + +/** + * Inserts all playlists in the player as DOM elements into the playlists list. + */ +function generatePlaylists() { + // Your code here +} + +// Creating the page structure +generateSongs() +generatePlaylists() + +// Making the add-song-button actually do something +document.getElementById("add-button").addEventListener("click", handleAddSongEvent) From e441538035f78bf3d029d743b76e451b23d690a1 Mon Sep 17 00:00:00 2001 From: IdanHerman12 Date: Tue, 14 Sep 2021 14:39:51 +0300 Subject: [PATCH 7/9] bulding basic style --- scripts/index.new.js | 78 +++++++++++++++++++++++++++++++++++++++++--- scripts/player.js | 17 ++++++++++ style.css | 15 ++++++--- 3 files changed, 101 insertions(+), 9 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index c3a39c8..3858768 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -22,7 +22,23 @@ function removeSong(songId) { */ function addSong({ title, album, artist, duration, coverArt }) { // Your code here -} + const id=randomID(player.songs) + let format=duration.split(":") + let minutes=parseInt(format.slice(0,1)) + let seconds=parseInt(format.slice(1)) + duration=(minutes*60)+seconds + let song={ + "id":id, + "title":title, + "album":album, + "artist":artist, + "duration": duration, + "coverArt":coverArt + } + player.songs.push(song) + return player.songs[player.songs.length-1].id + } + /** * Acts on a click event on an element inside the songs list. @@ -47,9 +63,13 @@ function handleAddSongEvent(event) { * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = [] - const attrs = {} + // const artistEl=createElement("span",[artist]); + // const titleEl=createElement("span",[title]); + // const durationEl=createElement("span",[title]); + const song=arguments[0] + const children = songList(song) + const classes = ["song"] + const attrs = {id:(`song_${id}`)} const eventListeners = {} return createElement("div", children, classes, attrs, eventListeners) } @@ -80,13 +100,28 @@ function createPlaylistElement({ id, name, songs }) { */ function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) { // Your code here + let element= document.createElement(tagName) + classes.forEach(c =>element.classList.add(c)) + const attribute=Object.keys(attributes) + for(let i=0;i Date: Tue, 14 Sep 2021 16:03:26 +0300 Subject: [PATCH 8/9] addSong function complete with its handler --- scripts/index.new.js | 35 ++++++++++++++++++++++------------- scripts/player.js | 3 --- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 3858768..4dac326 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -22,8 +22,9 @@ function removeSong(songId) { */ function addSong({ title, album, artist, duration, coverArt }) { // Your code here + console.log(title, album, artist, duration, coverArt) const id=randomID(player.songs) - let format=duration.split(":") + const format=duration.split(":") let minutes=parseInt(format.slice(0,1)) let seconds=parseInt(format.slice(1)) duration=(minutes*60)+seconds @@ -36,7 +37,9 @@ function addSong({ title, album, artist, duration, coverArt }) { "coverArt":coverArt } player.songs.push(song) - return player.songs[player.songs.length-1].id + alert("songs added") + generateSongs() + // return player.songs[player.songs.length-1].id } @@ -57,6 +60,14 @@ function handleSongClickEvent(event) { */ function handleAddSongEvent(event) { // Your code here + const titleEl=document.querySelector("#inputs > input:nth-child(1)").value + const albumEl=document.querySelector("#inputs > input:nth-child(2)").value + const artistEl=document.querySelector("#inputs > input:nth-child(3)").value + let durationEl=document.querySelector("#inputs > input:nth-child(4)").value + console.log(durationEl) + const coverArtEl=document.querySelector("#inputs > input:nth-child(5)").value + console.log({titleEl,albumEl,artistEl,durationEl,coverArtEl}) + addSong({title:titleEl,album:albumEl,artist:artistEl,duration:durationEl,coverArt:coverArtEl}) } /** @@ -116,11 +127,13 @@ function createElement(tagName, children = [], classes = [], attributes = {}, ev /** * Inserts all songs in the player as DOM elements into the songs list. */ +let songsExist=0 function generateSongs() { // Your code here const x=document.getElementById("songs") -for(let i=0;i Date: Tue, 14 Sep 2021 19:29:45 +0300 Subject: [PATCH 9/9] editing for the si=ongs to be in div list and basic CSS design --- scripts/index.new.js | 8 +++----- style.css | 23 ++++++++++++++--------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 4dac326..34637d2 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -130,7 +130,7 @@ function createElement(tagName, children = [], classes = [], attributes = {}, ev let songsExist=0 function generateSongs() { // Your code here - const x=document.getElementById("songs") + const x=document.querySelector("#songs>.list") for(let i=songsExist;i.list{ + align-content: space-around; + } .song{ - background-color: lightgray; + display: flex; + flex-direction: column; + background-color: lightgray; border-radius:10px; - padding-bottom: 20px; - margin-right: 40%; + /* padding-bottom: 20px; */ + margin-right: 70%; + margin-top: 20px; + margin-bottom: 20px; }