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.html b/index.html index c55fb48..796bd06 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,11 @@
+

songs

+

playlists

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.js b/scripts/index.js index 6842c79..96dbae2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,16 +5,22 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - // Your code here + for (let song of player.songs){ + document.getElementById(song.id).style.background="white" + if(song.id===songId){ + document.getElementById(song.id).style.background="lightblue" + } + } } /** * 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",id:id } return createElement("div", children, classes, attrs) } @@ -22,8 +28,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,7 +48,85 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - // 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 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}) +} + +/** + * Creates a song DOM element based on a song object. + */ +function createSongElement({ id, title, album, artist, duration, coverArt }) { + // 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) +} + +/** + * 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 + let element= document.createElement(tagName) + classes.forEach(c =>element.classList.add(c)) + const attribute=Object.keys(attributes) + for(let i=0;i.list") +for(let i=songsExist;i10){ return minutes+":"+(seconds-(minutes*60)) + } + else return "0"+minutes+":"+(seconds-(minutes*60)) + } + +// for(let i=0;i.list{ + align-content: space-around; + +} +.song{ + display: flex; + flex-direction: column; + background-color: lightgray; + border-radius:10px; + /* padding-bottom: 20px; */ + margin-right: 70%; + margin-top: 20px; + margin-bottom: 20px; +}