From 425e06023e8c97f9da15c32b15a93e5f45f38b11 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Sun, 12 Sep 2021 21:14:07 +0300 Subject: [PATCH 01/16] I created a DOM file to manipulate the DOM from it, I also started to create the functions in the index. However, I haven't finished them yet. --- index.html | 5 +- scripts/DOM-control.js | 141 +++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 49 ++++++++++---- scripts/player.js | 5 ++ 4 files changed, 187 insertions(+), 13 deletions(-) create mode 100644 scripts/DOM-control.js diff --git a/index.html b/index.html index c55fb482..65d29294 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,11 @@ + - +
- +
diff --git a/scripts/DOM-control.js b/scripts/DOM-control.js new file mode 100644 index 00000000..94156eb7 --- /dev/null +++ b/scripts/DOM-control.js @@ -0,0 +1,141 @@ +/* +import{ + songId, + tagName, + children, + classes, + attributes, + createSongElement, + createPlaylistElement, + createElement, + player +} from '/.index' +import { player } from '/.player'; +*/ + +//Get existing elements in the html index and place them in variables +let body = document.getElementById('body'); +let songsElement = document.getElementById('songs'); +let playlistsElement = document.getElementById("playlists"); + +//-----------Create essential elements------\\ + +//---------MAIN--------\\ +//Container element (
) for main +//Create element +let mainContainer = document.createElement('div'); +//Add class +mainContainer.className = "container"; +//Add ID +mainContainer.id = "main-container"; + + //Header element (
) for main + let mainHeader = document.createElement('header'); + mainHeader.id = "main-header"; + + //Headline element (

) for main + let mainH1 = document.createElement('h1'); + mainH1.id = "main-headline"; + + //Intro element (

) for main + let intro = document.createElement('p'); + intro.className = "paragraph"; + intro.id = "intro"; + + +//---------SONGS--------\\ +//Container element (

) for songs +songsElement.className = "container"; + + //Header element (
) for songs + let songsHeader = document.createElement('header'); + songsHeader.className = "sub-header"; + songsHeader.id = "songs-header"; + + //Headline element (

) for songs + let songsH2 = document.createElement('h2'); + songsH2.className = "sub-headline"; + songsH2.id = "songs-headline"; + + //List element (
    ) for songs + let listOfSongs = document.createElement('ul'); + listOfSongs.className = "list"; + listOfSongs.id = "songs-list"; + + //Item for each song + +//-------PLAYLISTS-------\\ +//Container element (
    ) for playlists +playlistsElement.className = "container"; + + //Header element (
    ) for playlists + let playlistsHeader = document.createElement('header'); + playlistsHeader.className = "sub-header"; + playlistsHeader.id = "playlists-header"; + + //Headline element (

    ) for playlists + let playlistsH3 = document.createElement('h3'); + playlistsH3.className = "sub-headline"; + playlistsH3.id = "playlists-headline"; + + //List element (
      ) for playlists + let listOfPlaylists = document.createElement('ul'); + listOfPlaylists.className = "list"; + listOfPlaylists.id = "playlists-list"; + + //Item for each playlist + +//-----------Appendment and placement of elements------\\ +//---------MAIN--------\\ +body.appendChild(mainContainer); +body.insertBefore(mainContainer, songsElement); + mainContainer.appendChild(mainHeader); + mainHeader.appendChild(mainH1); + + mainContainer.appendChild(intro); + mainContainer.insertBefore(mainHeader, intro); + mainHeader.insertBefore(mainH1, mainHeader.lastChild); + +//---------SONGS--------\\ +songsElement.appendChild(songsHeader); + songsHeader.appendChild(songsH2); + +songsElement.appendChild(listOfSongs); + +//-------PLAYLISTS-------\\ + +playlistsElement.appendChild(playlistsHeader); + playlistsHeader.appendChild(playlistsH3); + +playlistsElement.appendChild(listOfPlaylists); + +//-----------Content of elements------\\ +//---------MAIN--------\\ +//Main headline +mainH1.innerHTML = "Aviv's MP3 Player"; +mainH1.style.color = "black"; + +//Intro paragraph +intro.innerHTML = "This MP3 player was created to light up your mood, do not hesitate to use it :)" + +//---------SONGS--------\\ +//Songs headline +songsH2.innerHTML = "Songs"; + + +//-------PLAYLISTS-------\\ +//playlists headline +playlistsH3.innerHTML = "Playlists"; + + +//console.log(body); +//console.log(mainContainer); +//console.log(mainH1); +//console.log(intro); +//console.log(songsElement); +//console.log(songsHeader); +//console.log(playlistsElement); +//console.log(playlistsHeader); +//console.log(songsH2); +//console.log(playlistsH3); + diff --git a/scripts/index.js b/scripts/index.js index 6842c794..21ccc82b 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,28 +5,30 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - // Your code here + let song = getElementById(songId); + song.style.backgroundColor = "dark grey"; } /** * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { - const children = [] - const classes = [] + const children = []; + const classes = []; const attrs = { onclick: `playSong(${id})` } + // Your code here 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 = [] - const attrs = {} - return createElement("div", children, classes, attrs) -} + const children = []; + const classes = []; + const attrs = {}; + return createElement("div", children, classes, attrs); +}; /** * Creates a new DOM element. @@ -40,8 +42,33 @@ function createPlaylistElement({ id, name, songs }) { * @param {Array} classes - the class list of the new element * @param {Object} attributes - the attributes for the new element */ + function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here -} + let element = document.creatElement(tagName); + for(let child of children){ + element.appendChild(child); + } + for(let clas of classes){ + element.className(clas); + } + for(let attribute of attributes){ + element.setAttribute(attribute); + } + return element; +}; // You can write more code below this line + + +/* +export{ + songId, + tagName, + children, + classes, + attributes, + createSongElement + createPlaylistElement, + createElement, +} +*/ \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..569203ef 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,8 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } +/* +export{ +player +} +*/ \ No newline at end of file From fb854c56f2e1093fd520b51224b7d938cd95f380 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Sun, 12 Sep 2021 22:27:12 +0300 Subject: [PATCH 02/16] I tried to change the file again, still not finished --- index.html | 1 - scripts/DOM-control.js | 141 ------------------------------- scripts/index.js | 185 +++++++++++++++++++++++++++++++++++++---- scripts/player.js | 5 -- style.css | 39 +++++++++ 5 files changed, 206 insertions(+), 165 deletions(-) delete mode 100644 scripts/DOM-control.js diff --git a/index.html b/index.html index 65d29294..02049414 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -
      diff --git a/scripts/DOM-control.js b/scripts/DOM-control.js deleted file mode 100644 index 94156eb7..00000000 --- a/scripts/DOM-control.js +++ /dev/null @@ -1,141 +0,0 @@ -/* -import{ - songId, - tagName, - children, - classes, - attributes, - createSongElement, - createPlaylistElement, - createElement, - player -} from '/.index' -import { player } from '/.player'; -*/ - -//Get existing elements in the html index and place them in variables -let body = document.getElementById('body'); -let songsElement = document.getElementById('songs'); -let playlistsElement = document.getElementById("playlists"); - -//-----------Create essential elements------\\ - -//---------MAIN--------\\ -//Container element (
      ) for main -//Create element -let mainContainer = document.createElement('div'); -//Add class -mainContainer.className = "container"; -//Add ID -mainContainer.id = "main-container"; - - //Header element (
      ) for main - let mainHeader = document.createElement('header'); - mainHeader.id = "main-header"; - - //Headline element (

      ) for main - let mainH1 = document.createElement('h1'); - mainH1.id = "main-headline"; - - //Intro element (

      ) for main - let intro = document.createElement('p'); - intro.className = "paragraph"; - intro.id = "intro"; - - -//---------SONGS--------\\ -//Container element (

      ) for songs -songsElement.className = "container"; - - //Header element (
      ) for songs - let songsHeader = document.createElement('header'); - songsHeader.className = "sub-header"; - songsHeader.id = "songs-header"; - - //Headline element (

      ) for songs - let songsH2 = document.createElement('h2'); - songsH2.className = "sub-headline"; - songsH2.id = "songs-headline"; - - //List element (
        ) for songs - let listOfSongs = document.createElement('ul'); - listOfSongs.className = "list"; - listOfSongs.id = "songs-list"; - - //Item for each song - -//-------PLAYLISTS-------\\ -//Container element (
        ) for playlists -playlistsElement.className = "container"; - - //Header element (
        ) for playlists - let playlistsHeader = document.createElement('header'); - playlistsHeader.className = "sub-header"; - playlistsHeader.id = "playlists-header"; - - //Headline element (

        ) for playlists - let playlistsH3 = document.createElement('h3'); - playlistsH3.className = "sub-headline"; - playlistsH3.id = "playlists-headline"; - - //List element (
          ) for playlists - let listOfPlaylists = document.createElement('ul'); - listOfPlaylists.className = "list"; - listOfPlaylists.id = "playlists-list"; - - //Item for each playlist - -//-----------Appendment and placement of elements------\\ -//---------MAIN--------\\ -body.appendChild(mainContainer); -body.insertBefore(mainContainer, songsElement); - mainContainer.appendChild(mainHeader); - mainHeader.appendChild(mainH1); - - mainContainer.appendChild(intro); - mainContainer.insertBefore(mainHeader, intro); - mainHeader.insertBefore(mainH1, mainHeader.lastChild); - -//---------SONGS--------\\ -songsElement.appendChild(songsHeader); - songsHeader.appendChild(songsH2); - -songsElement.appendChild(listOfSongs); - -//-------PLAYLISTS-------\\ - -playlistsElement.appendChild(playlistsHeader); - playlistsHeader.appendChild(playlistsH3); - -playlistsElement.appendChild(listOfPlaylists); - -//-----------Content of elements------\\ -//---------MAIN--------\\ -//Main headline -mainH1.innerHTML = "Aviv's MP3 Player"; -mainH1.style.color = "black"; - -//Intro paragraph -intro.innerHTML = "This MP3 player was created to light up your mood, do not hesitate to use it :)" - -//---------SONGS--------\\ -//Songs headline -songsH2.innerHTML = "Songs"; - - -//-------PLAYLISTS-------\\ -//playlists headline -playlistsH3.innerHTML = "Playlists"; - - -//console.log(body); -//console.log(mainContainer); -//console.log(mainH1); -//console.log(intro); -//console.log(songsElement); -//console.log(songsHeader); -//console.log(playlistsElement); -//console.log(playlistsHeader); -//console.log(songsH2); -//console.log(playlistsH3); - diff --git a/scripts/index.js b/scripts/index.js index 21ccc82b..702f15ef 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,18 @@ +//Duration convertor (from seconds to mm:ss) +function durationConvertor(duration){ + let minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10){ + seconds = "0" + seconds; + } + if (minutes < 10){ + minutes = "0" + minutes; + } + return minutes + ":" + seconds; + } + + + /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -12,23 +27,48 @@ 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 = []; + + //-------Song elements-------\\ + const songTitle = createElement("header"); + songTitle.innerHTML = title; + songTitle = className = "song-title"; + const songAlbum = createElement("li"); + songAlbum.innerHTML = album; + songAlbum = className = "song-item"; + const songArtist = createElement("li"); + songArtist.innerHTML = artist; + songArtist = className = "song-item"; + const songDuration = createElement("li"); + songDuration.innerHTML = durationConvertor(duration); + songDuration = className = "song-duration"; + const songCover = createElement("img"); + songCover.innerHTML = coverArt; + songCover = className = "song-cover" + + const children = [songTitle, songAlbum, songArtist, songDuration, songCover]; + const classes = ["song-class"]; const attrs = { onclick: `playSong(${id})` } - // Your code here + + newSong.innerHTML = 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 = []; const attrs = {}; return createElement("div", children, classes, attrs); }; +*/ /** * Creates a new DOM element. @@ -43,10 +83,13 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ + /* + function createElement(tagName, children = [], classes = [], attributes = {}) { let element = document.creatElement(tagName); - for(let child of children){ - element.appendChild(child); + for(let i = 0; i < children.length; i++){ + element.appendChild(childen[i]); + element.insertBefore(children[i], element.lastChild); } for(let clas of classes){ element.className(clas); @@ -54,21 +97,127 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { for(let attribute of attributes){ element.setAttribute(attribute); } - return element; }; +let newSong = createSongElement(1, "Vortex", "Wallflowers", "Jinjer", 242, "./images/cover_art/jinjer_vortex.jpg"); + +*/ + // You can write more code below this line +//Get existing elements in the html index and place them in variables +let body = document.getElementById('body'); +let songsElement = document.getElementById('songs'); +let playlistsElement = document.getElementById("playlists"); +//-----------Create essential elements------\\ -/* -export{ - songId, - tagName, - children, - classes, - attributes, - createSongElement - createPlaylistElement, - createElement, -} -*/ \ No newline at end of file +//---------MAIN--------\\ +//Container element (
          ) for main +//Create element +let mainContainer = document.createElement('div'); +//Add class +mainContainer.className = "container"; +//Add ID +mainContainer.id = "main-container"; + + //Header element (
          ) for main + let mainHeader = document.createElement('header'); + mainHeader.id = "main-header"; + + //Headline element (

          ) for main + let mainH1 = document.createElement('h1'); + mainH1.id = "main-headline"; + + //Intro element (

          ) for main + let intro = document.createElement('p'); + intro.className = "paragraph"; + intro.id = "intro"; + + +//---------SONGS--------\\ +//Container element (

          ) for songs +songsElement.className = "container"; + + //Header element (
          ) for songs + let songsHeader = document.createElement('header'); + songsHeader.className = "sub-header"; + songsHeader.id = "songs-header"; + + //Headline element (

          ) for songs + let songsH2 = document.createElement('h2'); + songsH2.className = "sub-headline"; + songsH2.id = "songs-headline"; + + //List element (
            ) for songs + let listOfSongs = document.createElement('ul'); + listOfSongs.className = "list"; + listOfSongs.id = "songs-list"; + + //Item for each song + +//-------PLAYLISTS-------\\ +//Container element (
            ) for playlists +playlistsElement.className = "container"; + + //Header element (
            ) for playlists + let playlistsHeader = document.createElement('header'); + playlistsHeader.className = "sub-header"; + playlistsHeader.id = "playlists-header"; + + //Headline element (

            ) for playlists + let playlistsH3 = document.createElement('h3'); + playlistsH3.className = "sub-headline"; + playlistsH3.id = "playlists-headline"; + + //List element (
              ) for playlists + let listOfPlaylists = document.createElement('ul'); + listOfPlaylists.className = "list"; + listOfPlaylists.id = "playlists-list"; + + //Item for each playlist + +//-----------Appendment and placement of elements------\\ +//---------MAIN--------\\ +body.appendChild(mainContainer); +body.insertBefore(mainContainer, songsElement); + mainContainer.appendChild(mainHeader); + mainHeader.appendChild(mainH1); + + mainContainer.appendChild(intro); + mainContainer.insertBefore(mainHeader, intro); + mainHeader.insertBefore(mainH1, mainHeader.lastChild); + +//---------SONGS--------\\ +songsElement.appendChild(songsHeader); + songsHeader.appendChild(songsH2); + +songsElement.appendChild(listOfSongs); + listOfSongs.appendChild(newSong); + listOfSongs.insertBefore(newSong, listOfSongs.lastChild); + +//-------PLAYLISTS-------\\ + +playlistsElement.appendChild(playlistsHeader); + playlistsHeader.appendChild(playlistsH3); + +playlistsElement.appendChild(listOfPlaylists); + +//-----------Content of elements------\\ +//---------MAIN--------\\ +//Main headline +mainH1.innerHTML = "Aviv's MP3 Player"; +mainH1.style.color = "black"; + +//Intro paragraph +intro.innerHTML = "This MP3 player was created to light up your mood, do not hesitate to use it :)" + +//---------SONGS--------\\ +//Songs headline +songsH2.innerHTML = "Songs"; + + +//-------PLAYLISTS-------\\ +//playlists headline +playlistsH3.innerHTML = "Playlists"; + +console.log(listOfSongs); \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 569203ef..5a85f825 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,8 +62,3 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } -/* -export{ -player -} -*/ \ No newline at end of file diff --git a/style.css b/style.css index f4645fe9..95fb51a2 100644 --- a/style.css +++ b/style.css @@ -1 +1,40 @@ /* Your code here */ +/* +.container{ + +} + +.paragraph{ + +} + +.sub-header{ + +} + +.sub-headline{ + +} + +.list{ + +} + +#main-container{ + +} + +#main-header{ + +} + +#main-headline{ + +} + +#intro{ + +} +*/ + + From 8e48350f9349367d1d575f059013f41962921c1f Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Sun, 12 Sep 2021 23:52:16 +0300 Subject: [PATCH 03/16] I made it ! I created a function that generates the arguments which creates a parent song element
              and placed it inside a songs list (row 210). inside each song there's children(title, album...). the parent of the song is the list song, the parent of the list songs is the container and the list has a sibling of a header with a h2 as a child. I could not figure out how to pass the attribute from the object (missing one argument error) --- index.html | 2 ++ scripts/index.js | 74 +++++++++++++++++++++++++++++------------------ scripts/player.js | 1 + 3 files changed, 49 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 02049414..509257d3 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + +
              diff --git a/scripts/index.js b/scripts/index.js index 702f15ef..bd1f55df 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,3 +1,5 @@ + + //Duration convertor (from seconds to mm:ss) function durationConvertor(duration){ let minutes = Math.floor(duration / 60); @@ -28,32 +30,36 @@ function playSong(songId) { * Creates a song DOM element based on a song object. */ - /* + function createSongElement({ id, title, album, artist, duration, coverArt }) { //-------Song elements-------\\ - const songTitle = createElement("header"); + const songTitle = document.createElement("header"); songTitle.innerHTML = title; - songTitle = className = "song-title"; - const songAlbum = createElement("li"); + songTitle.className = "song-title"; + + const songAlbum = document.createElement("li"); songAlbum.innerHTML = album; - songAlbum = className = "song-item"; - const songArtist = createElement("li"); + songAlbum.className = "song-item"; + + const songArtist = document.createElement("li"); songArtist.innerHTML = artist; - songArtist = className = "song-item"; - const songDuration = createElement("li"); + songArtist.className = "song-item"; + + const songDuration = document.createElement("li"); songDuration.innerHTML = durationConvertor(duration); - songDuration = className = "song-duration"; - const songCover = createElement("img"); + songDuration.className = "song-duration"; + + const songCover = document.createElement("img"); songCover.innerHTML = coverArt; - songCover = className = "song-cover" + songCover.className = "song-cover"; + const children = [songTitle, songAlbum, songArtist, songDuration, songCover]; const classes = ["song-class"]; const attrs = { onclick: `playSong(${id})` } - newSong.innerHTML = title + album + artist + duration + coverArt; return createElement("div", children, classes, attrs) }; @@ -61,14 +67,14 @@ 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 attrs = {}; return createElement("div", children, classes, attrs); }; -*/ + /** * Creates a new DOM element. @@ -83,27 +89,31 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ - /* function createElement(tagName, children = [], classes = [], attributes = {}) { - let element = document.creatElement(tagName); + let element = document.createElement(tagName); for(let i = 0; i < children.length; i++){ - element.appendChild(childen[i]); - element.insertBefore(children[i], element.lastChild); + element.appendChild(children[i]); } - for(let clas of classes){ - element.className(clas); + for(let i = 0; i < classes.length; i++){ + element.className = classes[i]; } - for(let attribute of attributes){ - element.setAttribute(attribute); + + //coudln't figure this out + /* + for(let attri of attributes){ + element.setAttribute(attri); } -}; + */ -let newSong = createSongElement(1, "Vortex", "Wallflowers", "Jinjer", 242, "./images/cover_art/jinjer_vortex.jpg"); + return element; +}; -*/ // You can write more code below this line + +//console.log(player); + //Get existing elements in the html index and place them in variables let body = document.getElementById('body'); let songsElement = document.getElementById('songs'); @@ -152,8 +162,10 @@ songsElement.className = "container"; let listOfSongs = document.createElement('ul'); listOfSongs.className = "list"; listOfSongs.id = "songs-list"; + //Item for each song + //-------PLAYLISTS-------\\ //Container element (
              ) for playlists @@ -175,6 +187,7 @@ playlistsElement.className = "container"; listOfPlaylists.id = "playlists-list"; //Item for each playlist + //-----------Appendment and placement of elements------\\ //---------MAIN--------\\ @@ -192,8 +205,12 @@ songsElement.appendChild(songsHeader); songsHeader.appendChild(songsH2); songsElement.appendChild(listOfSongs); - listOfSongs.appendChild(newSong); - listOfSongs.insertBefore(newSong, listOfSongs.lastChild); +console.log(songsElement); +for(let song of player.songs){ + listOfSongs.appendChild(createSongElement(song)); +} + //listOfSongs.appendChild(newSong); + //listOfSongs.insertBefore(newSong, listOfSongs.lastChild); //-------PLAYLISTS-------\\ @@ -216,8 +233,9 @@ intro.innerHTML = "This MP3 player was created to light up your mood, do not hes songsH2.innerHTML = "Songs"; + + //-------PLAYLISTS-------\\ //playlists headline playlistsH3.innerHTML = "Playlists"; -console.log(listOfSongs); \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..f7029e3b 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,4 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } + From a5f3b5b1d1a568725432ad5c862299e3b16fea5b Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Mon, 13 Sep 2021 00:20:05 +0300 Subject: [PATCH 04/16] I styled the web a bit. --- scripts/index.js | 7 ++--- style.css | 75 +++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 66 insertions(+), 16 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index bd1f55df..02fdfa6b 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -125,9 +125,7 @@ let playlistsElement = document.getElementById("playlists"); //Container element (
              ) for main //Create element let mainContainer = document.createElement('div'); -//Add class -mainContainer.className = "container"; -//Add ID + mainContainer.id = "main-container"; //Header element (
              ) for main @@ -162,7 +160,7 @@ songsElement.className = "container"; let listOfSongs = document.createElement('ul'); listOfSongs.className = "list"; listOfSongs.id = "songs-list"; - + console.log(listOfSongs) //Item for each song @@ -205,7 +203,6 @@ songsElement.appendChild(songsHeader); songsHeader.appendChild(songsH2); songsElement.appendChild(listOfSongs); -console.log(songsElement); for(let song of player.songs){ listOfSongs.appendChild(createSongElement(song)); } diff --git a/style.css b/style.css index 95fb51a2..e73d05c3 100644 --- a/style.css +++ b/style.css @@ -1,40 +1,93 @@ /* Your code here */ -/* -.container{ -} + .paragraph{ } -.sub-header{ + +#main-container{ + background-color: #39F2CC; + color: rgb(0, 0, 0); + font-size: 1em; + text-align: center; + border: 1px black; + border-style: solid; + margin: 0%; + padding: 0%; +} + +#main-header{ + font-family: 'Orbitron', sans-serif; } -.sub-headline{ +#main-headline{ } -.list{ +#intro{ } -#main-container{ +.sub-header{ + background: #77EDEF; + color: slategray(0, 0, 0); + font-size: 1em; + text-align: center; + border: 1px black; + border-style: solid; + margin: 0%; + padding: 0%; + justify-content: center; + justify-content: stretch; +} +.container{ + background: #77EDEF; + box-shadow: 2px 0 4px rgba(0,0,0,0.5); + border-radius: 2px; + border: 1px black; + border-style: solid; + display: flex; + flex-flow: column wrap; + justify-content: center; + justify-content: stretch; } -#main-header{ +.sub-headline{ + } -#main-headline{ +.list{ + list-style-type: none; } -#intro{ +.song-class{ + margin-right: 4%;; + padding: 0%; + border:20px white; + font-family: 'Oswald', sans-serif; + font-size: 1em; + font-weight: bold; + text-align:center !important; + color: white; +} +.song-item{ + color: gray; + } -*/ +.song-title{ + color: slategray; + font-size: 1.5em; +} +.song-duration{ +color: #5d8680; +font-style: italic; +} \ No newline at end of file From cbbe2cb03f68b454b179bf73d595fa175e0dc8f7 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Tue, 14 Sep 2021 19:46:58 +0300 Subject: [PATCH 05/16] Create .DS_Store --- .DS_Store | Bin 0 -> 6148 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..16c7534e1c9cc354679bc7a18a34a743c738bdaa GIT binary patch literal 6148 zcmeHK%We}f6unME;|W4!fdpM3dBZM>k_d=cAPpg1bb*8z1PegzOebnanvSE)giu1z z?E44pNAMr~0N=t2jvrKcP?iW$U+MbzagQAzJNB4}SbrLKh#Ex1;R-7rlHZtWSH58t zTT=rv-N%sfy;L4Xsf;$FUB$nsfLgn4O6ZtEI-=F}Q=8%my!Aty{`qypW)vgx1GQ*G z1(@m5nk&wiHI7FwXcs*V=ozpDM!d>kch?v-%IT0M7;B6XmiH9;XQzLTj%NAT?!d3n zI8E}R-TuZZTh(jZHO}k2exv>_7|B^sgvB)Phm$v|^gJv^kgcil}pjkmDlwxgK zP%q!m?K`5D*Ahi%P64OD6;;5VHT?P&oxhv5Q@|;3xdQ5Z5O9UQ#nPZYI*{lm0I-T` zZOE%nK*bRjeT$_*w7{650u7bfCk8Wg)C(KuTPzJ4Ix+kBV0L6?UnoqEj{b!XC*~V; zsZ+oyu&Th8DK^yozkB)nf0g7)P64ODf29Dc4uU}+Q?hsK#^lspE8qukWh$;TctJr% iU&V-3SMeRVHq;B10s0n8gQ$VI4*@NMOPm6KRe_&_SCr=f literal 0 HcmV?d00001 From 5bd2077d6d4c0cc2a7f9432de07674c573b2f829 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Wed, 15 Sep 2021 15:30:04 +0300 Subject: [PATCH 06/16] I changed the code to suit the new lesson(I made my first version as a comment) --- index.new.html | 2 + scripts/index.js | 142 +++++++++++++++++++++++++++++------------------ style.css | 27 ++++----- 3 files changed, 104 insertions(+), 67 deletions(-) diff --git a/index.new.html b/index.new.html index eba39f17..521a4eb9 100644 --- a/index.new.html +++ b/index.new.html @@ -6,7 +6,9 @@ + +

              Awesome Player!!!

              diff --git a/scripts/index.js b/scripts/index.js index 02fdfa6b..99db314f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,20 +1,3 @@ - - -//Duration convertor (from seconds to mm:ss) -function durationConvertor(duration){ - let minutes = Math.floor(duration / 60); - let seconds = duration % 60; - if (seconds < 10){ - seconds = "0" + seconds; - } - if (minutes < 10){ - minutes = "0" + minutes; - } - return minutes + ":" + seconds; - } - - - /** * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. @@ -30,38 +13,55 @@ function playSong(songId) { * Creates a song DOM element based on a song object. */ - - +/* First try function createSongElement({ id, title, album, artist, duration, coverArt }) { - //-------Song elements-------\\ - const songTitle = document.createElement("header"); - songTitle.innerHTML = title; - songTitle.className = "song-title"; + -------Song elements-------\\ + const songTitle = document.createElement("header"); + songTitle.innerHTML = title; + songTitle.className = "song-title"; - const songAlbum = document.createElement("li"); - songAlbum.innerHTML = album; - songAlbum.className = "song-item"; + const songAlbum = document.createElement("li"); + songAlbum.innerHTML = album; + songAlbum.className = "song-item"; - const songArtist = document.createElement("li"); - songArtist.innerHTML = artist; - songArtist.className = "song-item"; + const songArtist = document.createElement("li"); + songArtist.innerHTML = artist; + songArtist.className = "song-item"; - const songDuration = document.createElement("li"); - songDuration.innerHTML = durationConvertor(duration); - songDuration.className = "song-duration"; + const songDuration = document.createElement("li"); + songDuration.innerHTML = durationConvertor(duration); + songDuration.className = "song-duration"; - const songCover = document.createElement("img"); - songCover.innerHTML = coverArt; - songCover.className = "song-cover"; + const songCover = document.createElement("img"); + songCover.innerHTML = coverArt; + songCover.className = "song-cover"; - const children = [songTitle, songAlbum, songArtist, songDuration, songCover]; - const classes = ["song-class"]; - const attrs = { onclick: `playSong(${id})` } + const children = [songTitle, songAlbum, songArtist, songDuration, songCover]; + const classes = ["song-class"]; + const attrs = { onclick: `playSong(${id})` } - return createElement("div", children, classes, attrs) + return createElement("div", children, classes, attrs) }; +*/ + +// Second try +function createSongElement({ id, title, album, artist, duration, coverArt }) { + // Song title (
              ) + const titleEl = createElement("header", [title], ["title-class"]); + // Song album (
            • ) + const albumEl = createElement("li", ["From: ", album], ["item-class"]); + // Song artist (
            • ) + const artistEl = createElement("li", ["By: ", artist], ["item-class"]); + // Song duration (
            • ) + const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${duration}')`}); + + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); + + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl]); + } /** * Creates a playlist DOM element based on a playlist object. @@ -89,30 +89,64 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ +/* First try +function createElement(tagName, children = [], classes = [], attributes = {}) { + let element = document.createElement(tagName); + for(let child of children){ + element.appendChild(child); + } + for(let clas of classes){ + element.className = clas; + } + + //coudln't figure this out + + for(let attri in attributes){ + element.setAttribute(attri, attributes[attri]); + } + return element; +}; +*/ +// Second try function createElement(tagName, children = [], classes = [], attributes = {}) { - let element = document.createElement(tagName); - for(let i = 0; i < children.length; i++){ - element.appendChild(children[i]); + //Create element + const el = document.createElement(tagName); + + // Children + for(const child of children) { + el.append(child); } - for(let i = 0; i < classes.length; i++){ - element.className = classes[i]; + + // Classes + for(const cls of classes) { + el.classList.add(cls); } - - //coudln't figure this out - /* - for(let attri of attributes){ - element.setAttribute(attri); + + // Attributes + for (const attr in attributes) { + el.setAttribute(attr, attributes[attr]); } - */ - - return element; -}; + + return el; + } // You can write more code below this line -//console.log(player); +//Duration convertor (from seconds to mm:ss) +function durationConvertor(duration){ + let minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10){ + seconds = "0" + seconds; + } + if (minutes < 10){ + minutes = "0" + minutes; + } + return minutes + ":" + seconds; + } + //Get existing elements in the html index and place them in variables let body = document.getElementById('body'); diff --git a/style.css b/style.css index e73d05c3..92963a08 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,4 @@ -/* Your code here */ - - - -.paragraph{ - -} - - - +/* ------Main------ */ #main-container{ background-color: #39F2CC; color: rgb(0, 0, 0); @@ -27,6 +18,16 @@ } +.paragraph{ + +} + + + + + + + #intro{ } @@ -77,17 +78,17 @@ color: white; } -.song-item{ +.item-class{ color: gray; } -.song-title{ +.title-class{ color: slategray; font-size: 1.5em; } -.song-duration{ +.duration-class{ color: #5d8680; font-style: italic; } \ No newline at end of file From 6bbb45ba67e959d9b5c0b9f0a8e838e50258f358 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Wed, 15 Sep 2021 16:37:38 +0300 Subject: [PATCH 07/16] I edited the rest of the code to use the create element function --- scripts/index.js | 145 ++++++++++------------------------------------- style.css | 55 +++++------------- 2 files changed, 44 insertions(+), 156 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 99db314f..b8d52515 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,8 +5,10 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - let song = getElementById(songId); - song.style.backgroundColor = "dark grey"; + for(let song of player){ + song[id].style.backgroundColor = "dark grey"; + } + } /** @@ -55,12 +57,13 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { // Song artist (
            • ) const artistEl = createElement("li", ["By: ", artist], ["item-class"]); // Song duration (
            • ) - const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${duration}')`}); + const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`}); const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl]); + // return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], {onclick: `console.log('${playSong(id)}`}); } /** @@ -150,123 +153,37 @@ function durationConvertor(duration){ //Get existing elements in the html index and place them in variables let body = document.getElementById('body'); -let songsElement = document.getElementById('songs'); -let playlistsElement = document.getElementById("playlists"); - -//-----------Create essential elements------\\ - -//---------MAIN--------\\ -//Container element (
              ) for main -//Create element -let mainContainer = document.createElement('div'); - -mainContainer.id = "main-container"; - - //Header element (
              ) for main - let mainHeader = document.createElement('header'); - mainHeader.id = "main-header"; - - //Headline element (

              ) for main - let mainH1 = document.createElement('h1'); - mainH1.id = "main-headline"; - - //Intro element (

              ) for main - let intro = document.createElement('p'); - intro.className = "paragraph"; - intro.id = "intro"; - - -//---------SONGS--------\\ -//Container element (

              ) for songs -songsElement.className = "container"; - - //Header element (
              ) for songs - let songsHeader = document.createElement('header'); - songsHeader.className = "sub-header"; - songsHeader.id = "songs-header"; - - //Headline element (

              ) for songs - let songsH2 = document.createElement('h2'); - songsH2.className = "sub-headline"; - songsH2.id = "songs-headline"; - - //List element (
                ) for songs - let listOfSongs = document.createElement('ul'); - listOfSongs.className = "list"; - listOfSongs.id = "songs-list"; - console.log(listOfSongs) - - //Item for each song - - -//-------PLAYLISTS-------\\ -//Container element (
                ) for playlists -playlistsElement.className = "container"; +let songsContainer = document.getElementById('songs'); +let playlistsContainer = document.getElementById("playlists"); - //Header element (
                ) for playlists - let playlistsHeader = document.createElement('header'); - playlistsHeader.className = "sub-header"; - playlistsHeader.id = "playlists-header"; - - //Headline element (

                ) for playlists - let playlistsH3 = document.createElement('h3'); - playlistsH3.className = "sub-headline"; - playlistsH3.id = "playlists-headline"; - - //List element (
                  ) for playlists - let listOfPlaylists = document.createElement('ul'); - listOfPlaylists.className = "list"; - listOfPlaylists.id = "playlists-list"; +//-----------Main container------\\ - //Item for each playlist - - -//-----------Appendment and placement of elements------\\ -//---------MAIN--------\\ +const intro = createElement("p", ["This MP3 player was created to light up your mood, do not hesitate to use it :)"], ["paragraph"], {}); +const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {}); +const mainHeader = createElement("header", [mainH1], ["header"], {}); +const mainContainer = createElement("div", [mainHeader, intro], ["container"], {}); +//console.log(mainContainer); body.appendChild(mainContainer); -body.insertBefore(mainContainer, songsElement); - mainContainer.appendChild(mainHeader); - mainHeader.appendChild(mainH1); - - mainContainer.appendChild(intro); - mainContainer.insertBefore(mainHeader, intro); - mainHeader.insertBefore(mainH1, mainHeader.lastChild); +body.insertBefore(mainContainer, songsContainer); -//---------SONGS--------\\ -songsElement.appendChild(songsHeader); - songsHeader.appendChild(songsH2); +//-----------Songs container------\\ -songsElement.appendChild(listOfSongs); +const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); +const songsHeader = createElement("header", [songsH2], ["header"], {}); +const listOfSongs = createElement("ul", [], ["list"], {}); for(let song of player.songs){ listOfSongs.appendChild(createSongElement(song)); } - //listOfSongs.appendChild(newSong); - //listOfSongs.insertBefore(newSong, listOfSongs.lastChild); - -//-------PLAYLISTS-------\\ - -playlistsElement.appendChild(playlistsHeader); - playlistsHeader.appendChild(playlistsH3); - -playlistsElement.appendChild(listOfPlaylists); - -//-----------Content of elements------\\ -//---------MAIN--------\\ -//Main headline -mainH1.innerHTML = "Aviv's MP3 Player"; -mainH1.style.color = "black"; - -//Intro paragraph -intro.innerHTML = "This MP3 player was created to light up your mood, do not hesitate to use it :)" - -//---------SONGS--------\\ -//Songs headline -songsH2.innerHTML = "Songs"; - - - - -//-------PLAYLISTS-------\\ -//playlists headline -playlistsH3.innerHTML = "Playlists"; +songsContainer.className = "container"; +songsContainer.appendChild(songsHeader); +songsContainer.appendChild(listOfSongs); + +//-----------Playlists container------\\ +const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {}); +const playlistsHeader = createElement("header", [playlistsH3], ["header"], {}); +const listOfPlaylists = createElement("ul", [], ["list"], {}); + +playlistsContainer.className = "container"; +playlistsContainer.appendChild(playlistsHeader); +playlistsContainer.appendChild(listOfPlaylists); diff --git a/style.css b/style.css index 92963a08..c8984ea0 100644 --- a/style.css +++ b/style.css @@ -1,38 +1,19 @@ /* ------Main------ */ -#main-container{ - background-color: #39F2CC; - color: rgb(0, 0, 0); - font-size: 1em; - text-align: center; +#container{ + background: #77EDEF; + box-shadow: 2px 0 4px rgba(0,0,0,0.5); + border-radius: 2px; border: 1px black; border-style: solid; - margin: 0%; - padding: 0%; -} - -#main-header{ - font-family: 'Orbitron', sans-serif; -} - -#main-headline{ - + display: flex; + flex-flow: column wrap; + justify-content: center; + justify-content: stretch; } - -.paragraph{ - } - - - - - - -#intro{ - -} - -.sub-header{ +#header{ + font-family: 'Orbitron', sans-serif; background: #77EDEF; color: slategray(0, 0, 0); font-size: 1em; @@ -45,24 +26,14 @@ justify-content: stretch; } -.container{ - background: #77EDEF; - box-shadow: 2px 0 4px rgba(0,0,0,0.5); - border-radius: 2px; - border: 1px black; - border-style: solid; - display: flex; - flex-flow: column wrap; - justify-content: center; - justify-content: stretch; +#headline{ + } +.paragraph{ -.sub-headline{ - } - .list{ list-style-type: none; } From ea3042add5a3f8c672687cb2d41a8ff5600f7673 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Wed, 15 Sep 2021 17:17:55 +0300 Subject: [PATCH 08/16] I added the playlist element for each playlist in player by the requirements --- scripts/index.js | 88 ++++++++++++++++++++++++++++++++++++++---------- style.css | 6 ++-- 2 files changed, 74 insertions(+), 20 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index b8d52515..28e64739 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -72,12 +72,20 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { function createPlaylistElement({ id, name, songs }) { - const children = []; - const classes = []; - const attrs = {}; - return createElement("div", children, classes, attrs); + // Playlist's name (
                  ) + const nameEl = createElement("header", [name], ["title-class"]); + //Playlist's amount of songs + const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]); + //Playlist's duration (
                • ) + const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]); + + + return createElement("div", [nameEl, noOfSongsEl, durationsEl]); }; +//console.log(createPlaylistElement({id: 5, name: "Israeli"})); +//console.log(playlistDuration(5)); + /** * Creates a new DOM element. @@ -138,17 +146,7 @@ function createElement(tagName, children = [], classes = [], attributes = {}) { // You can write more code below this line //Duration convertor (from seconds to mm:ss) -function durationConvertor(duration){ - let minutes = Math.floor(duration / 60); - let seconds = duration % 60; - if (seconds < 10){ - seconds = "0" + seconds; - } - if (minutes < 10){ - minutes = "0" + minutes; - } - return minutes + ":" + seconds; - } + //Get existing elements in the html index and place them in variables @@ -166,7 +164,7 @@ const mainContainer = createElement("div", [mainHeader, intro], ["container"], { body.appendChild(mainContainer); body.insertBefore(mainContainer, songsContainer); -//-----------Songs container------\\ +//--------Songs container------\\ const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); const songsHeader = createElement("header", [songsH2], ["header"], {}); @@ -178,7 +176,7 @@ songsContainer.className = "container"; songsContainer.appendChild(songsHeader); songsContainer.appendChild(listOfSongs); -//-----------Playlists container------\\ +//--------Playlists container------\\ const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {}); const playlistsHeader = createElement("header", [playlistsH3], ["header"], {}); const listOfPlaylists = createElement("ul", [], ["list"], {}); @@ -186,4 +184,60 @@ const listOfPlaylists = createElement("ul", [], ["list"], {}); playlistsContainer.className = "container"; playlistsContainer.appendChild(playlistsHeader); playlistsContainer.appendChild(listOfPlaylists); +for(let playlist of player.playlists){ + listOfPlaylists.appendChild(createPlaylistElement(playlist)); +} + + +//-------Functions------\\ +//Converts the duration format to mm:ss +function durationConvertor(duration){ + let minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10){ + seconds = "0" + seconds; + } + if (minutes < 10){ + minutes = "0" + minutes; + } + return minutes + ":" + seconds; + }; + +//Returns the duration of a song +function getDuration(id){ + for(let song of player.songs){ + if(song.id == id){ + return song.duration; + } + } + }; + +//Counts the amount of songs in a playlist and returns the counter +function songsCounter(id){ + let count = 0; + for(let playlist of player.playlists){ + if(playlist.id == id){ + for(let i = 0; i < playlist.songs.length; i++){ + count++; + } + } + } + return count; +}; + +//Returns the duration of a playlist +function playlistDuration(id) { + + let durations = 0; + for(let playlist of player.playlists){ + if(playlist.id == id){ + for(let i = 0; i < playlist.songs.length; i++){ + durations += getDuration(playlist.songs[i]); + } + } + } + return durations; + }; + + diff --git a/style.css b/style.css index c8984ea0..dcda537b 100644 --- a/style.css +++ b/style.css @@ -10,7 +10,7 @@ justify-content: center; justify-content: stretch; } -} + #header{ font-family: 'Orbitron', sans-serif; @@ -26,13 +26,13 @@ justify-content: stretch; } -#headline{ +/* #headline{ } .paragraph{ -} +} */ .list{ list-style-type: none; From 841fad5ce1100a57ebee01139ec758c7ef8657dc Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Wed, 15 Sep 2021 19:11:09 +0300 Subject: [PATCH 09/16] I made the playsong function to change the background color of the playing song and to log the details of the song --- scripts/index.js | 27 ++++++++++++++++++--------- style.css | 2 +- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 28e64739..e51684fe 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -5,11 +5,11 @@ * @param {String} songId - the ID of the song to play */ function playSong(songId) { - for(let song of player){ - song[id].style.backgroundColor = "dark grey"; + let songEl = document.getElementById("song"+songId); + songEl.style.backgroundColor = "yellow"; + console.log("Now playing :", '\n' + songEl.innerText) } -} /** * Creates a song DOM element based on a song object. @@ -62,8 +62,8 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); - return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl]); - // return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], {onclick: `console.log('${playSong(id)}`}); + //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {onclick: `playSong(${id})`}); } /** @@ -80,7 +80,7 @@ function createPlaylistElement({ id, name, songs }) { const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]); - return createElement("div", [nameEl, noOfSongsEl, durationsEl]); + return createElement("div", [nameEl, noOfSongsEl, durationsEl], ["playlist-class"]); }; //console.log(createPlaylistElement({id: 5, name: "Israeli"})); @@ -160,7 +160,6 @@ const intro = createElement("p", ["This MP3 player was created to light up your const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {}); const mainHeader = createElement("header", [mainH1], ["header"], {}); const mainContainer = createElement("div", [mainHeader, intro], ["container"], {}); -//console.log(mainContainer); body.appendChild(mainContainer); body.insertBefore(mainContainer, songsContainer); @@ -170,7 +169,9 @@ const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); const songsHeader = createElement("header", [songsH2], ["header"], {}); const listOfSongs = createElement("ul", [], ["list"], {}); for(let song of player.songs){ - listOfSongs.appendChild(createSongElement(song)); + let songEl = createSongElement(song); + attachId(songEl, "song", song.id); + listOfSongs.appendChild(songEl); } songsContainer.className = "container"; songsContainer.appendChild(songsHeader); @@ -185,7 +186,9 @@ playlistsContainer.className = "container"; playlistsContainer.appendChild(playlistsHeader); playlistsContainer.appendChild(listOfPlaylists); for(let playlist of player.playlists){ - listOfPlaylists.appendChild(createPlaylistElement(playlist)); + let playlistEl = createPlaylistElement(playlist); + attachId(playlistEl, "playlist", playlist.id) + listOfPlaylists.appendChild(playlistEl); } @@ -239,5 +242,11 @@ function playlistDuration(id) { return durations; }; +//ID attacher +function attachId(element, string, id){ + element.id = string + id; +} +// let test = document.getElementById("song2"); +// test.style.backgroundColor = "yellow"; \ No newline at end of file diff --git a/style.css b/style.css index dcda537b..c96c98ab 100644 --- a/style.css +++ b/style.css @@ -38,7 +38,7 @@ list-style-type: none; } -.song-class{ +.song-class, .playlist-class{ margin-right: 4%;; padding: 0%; border:20px white; From 7c1d4f7f955d656ac5e8cae84543331f06d3a0ea Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Thu, 16 Sep 2021 16:05:12 +0300 Subject: [PATCH 10/16] I moved the functions to the new indexes that's been provided --- index.new.html | 40 +--------- scripts/index.new.js | 175 ++++++++++++++++++++++++++++++++++++++----- 2 files changed, 159 insertions(+), 56 deletions(-) diff --git a/index.new.html b/index.new.html index 521a4eb9..18e6e3ac 100644 --- a/index.new.html +++ b/index.new.html @@ -6,12 +6,10 @@ - - -

                  Awesome Player!!!

                  +

                  Add a new song

                  @@ -24,40 +22,10 @@

                  Add a new song

                  -

                  Songs

                  -
                  - -
                  +
                  -
                  -

                  Playlists

                  -
                  - -
                  +
                  +
                  diff --git a/scripts/index.new.js b/scripts/index.new.js index c3a39c8e..91973dc3 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -4,9 +4,11 @@ * * @param {Number} songId - the ID of the song to play */ -function playSong(songId) { - // Your code here -} + function playSong(songId) { + let songEl = document.getElementById("song"+songId); + songEl.style.backgroundColor = "yellow"; + console.log("Now playing :", '\n' + songEl.innerText) + } /** * Removes a song from the player, and updates the DOM to match. @@ -46,24 +48,37 @@ 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 eventListeners = {} - return createElement("div", children, classes, attrs, eventListeners) -} + function createSongElement({ id, title, album, artist, duration, coverArt }) { + // Song title (
                  ) + const titleEl = createElement("header", [title], ["title-class"]); + // Song album (
                • ) + const albumEl = createElement("li", ["From: ", album], ["item-class"]); + // Song artist (
                • ) + const artistEl = createElement("li", ["By: ", artist], ["item-class"]); + // Song duration (
                • ) + const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`}); + + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); + + //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {onclick: `playSong(${id})`}); + }; /** * 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) -} + function createPlaylistElement({ id, name, songs }) { + // Playlist's name (
                  ) + const nameEl = createElement("header", [name], ["title-class"]); + //Playlist's amount of songs + const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]); + //Playlist's duration (
                • ) + const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]); + + + return createElement("div", [nameEl, noOfSongsEl, durationsEl], ["playlist-class"]); +}; /** * Creates a new DOM element. @@ -78,9 +93,28 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element * @param {Object} eventListeners - the event listeners on the element */ -function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) { - // Your code here -} + + function createElement(tagName, children = [], classes = [], attributes = {}) { + //Create element + 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]); + } + + return el; + } /** * Inserts all songs in the player as DOM elements into the songs list. @@ -102,3 +136,104 @@ generatePlaylists() // Making the add-song-button actually do something document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + +const body = document.getElementById('body'); +const songsContainer = document.getElementById('songs'); +const playlistsContainer = document.getElementById("playlists"); +const songSection = document.getElementById("add-section"); +songSection.className = "container"; + + +//-----------Main container------\\ + +const intro = createElement("p", ["This MP3 player was created to light up your mood, do not hesitate to use it :)"], ["paragraph"], {}); +const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {}); +const mainHeader = createElement("header", [mainH1], ["header"], {}); +const mainContainer = createElement("div", [mainHeader, intro], ["container"], {}); +mainContainer.id = "main-container"; +body.appendChild(mainContainer); +body.insertBefore(mainContainer, body.firstElementChild); + +//--------Songs container------\\ + +const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); +const songsHeader = createElement("header", [songsH2], ["header"], {}); +const listOfSongs = createElement("ul", [], ["list"], {}); +for(let song of player.songs){ + let songEl = createSongElement(song); + attachId(songEl, "song", song.id); + listOfSongs.appendChild(songEl); +} +songsContainer.className = "container"; +songsContainer.appendChild(songsHeader); +songsContainer.appendChild(listOfSongs); + +//--------Playlists container------\\ +const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {}); +const playlistsHeader = createElement("header", [playlistsH3], ["header"], {}); +const listOfPlaylists = createElement("ul", [], ["list"], {}); + +playlistsContainer.className = "container"; +playlistsContainer.appendChild(playlistsHeader); +playlistsContainer.appendChild(listOfPlaylists); +for(let playlist of player.playlists){ + let playlistEl = createPlaylistElement(playlist); + attachId(playlistEl, "playlist", playlist.id) + listOfPlaylists.appendChild(playlistEl); +} + + +//-------Functions------\\ +//Converts the duration format to mm:ss +function durationConvertor(duration){ + let minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (seconds < 10){ + seconds = "0" + seconds; + } + if (minutes < 10){ + minutes = "0" + minutes; + } + return minutes + ":" + seconds; + }; + +//Returns the duration of a song +function getDuration(id){ + for(let song of player.songs){ + if(song.id == id){ + return song.duration; + } + } + }; + +//Counts the amount of songs in a playlist and returns the counter +function songsCounter(id){ + let count = 0; + for(let playlist of player.playlists){ + if(playlist.id == id){ + for(let i = 0; i < playlist.songs.length; i++){ + count++; + } + } + } + return count; +}; + +//Returns the duration of a playlist +function playlistDuration(id) { + + let durations = 0; + for(let playlist of player.playlists){ + if(playlist.id == id){ + for(let i = 0; i < playlist.songs.length; i++){ + durations += getDuration(playlist.songs[i]); + } + } + } + return durations; + }; + +//ID attacher +function attachId(element, string, id){ + element.id = string + id; +} \ No newline at end of file From 1f7f4fbb10283f64e9ba1f7fb021efbe38e9aeff Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Thu, 16 Sep 2021 16:45:42 +0300 Subject: [PATCH 11/16] I redesign the code structure to fit the new functions generate songs and generate playlists --- scripts/index.new.js | 63 ++++++++++++++++++++++++-------------------- style.css | 9 +++++-- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 91973dc3..7c83851d 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -116,36 +116,37 @@ function handleAddSongEvent(event) { return el; } + +// Making the add-song-button actually do something +document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + /** * Inserts all songs in the player as DOM elements into the songs list. */ -function generateSongs() { - // Your code here + function generateSongs(playerObj, songsList) { + for(let song of playerObj.songs){ + let songEl = createSongElement(song); + attachId(songEl, "song", song.id); + songsList.appendChild(songEl); + } } /** * Inserts all playlists in the player as DOM elements into the playlists list. */ -function generatePlaylists() { - // Your code here + function generatePlaylists(playerObj, playlistsList) { + for(let playlist of player.playlists){ + let playlistEl = createPlaylistElement(playlist); + attachId(playlistEl, "playlist", playlist.id) + playlistsList.appendChild(playlistEl); +} } -// Creating the page structure -generateSongs() -generatePlaylists() -// Making the add-song-button actually do something -document.getElementById("add-button").addEventListener("click", handleAddSongEvent) +//-----------Creatin page structure---------\\ +//-----------Main container---------\\ const body = document.getElementById('body'); -const songsContainer = document.getElementById('songs'); -const playlistsContainer = document.getElementById("playlists"); -const songSection = document.getElementById("add-section"); -songSection.className = "container"; - - -//-----------Main container------\\ - const intro = createElement("p", ["This MP3 player was created to light up your mood, do not hesitate to use it :)"], ["paragraph"], {}); const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {}); const mainHeader = createElement("header", [mainH1], ["header"], {}); @@ -154,21 +155,25 @@ mainContainer.id = "main-container"; body.appendChild(mainContainer); body.insertBefore(mainContainer, body.firstElementChild); -//--------Songs container------\\ +//---------Add a new song------\\ +const songSection = document.getElementById("add-section"); +songSection.className = "container"; +//--------Songs container------\\ +const songsContainer = document.getElementById('songs'); const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); const songsHeader = createElement("header", [songsH2], ["header"], {}); const listOfSongs = createElement("ul", [], ["list"], {}); -for(let song of player.songs){ - let songEl = createSongElement(song); - attachId(songEl, "song", song.id); - listOfSongs.appendChild(songEl); -} + songsContainer.className = "container"; songsContainer.appendChild(songsHeader); songsContainer.appendChild(listOfSongs); +generateSongs(player, listOfSongs); + + //--------Playlists container------\\ +const playlistsContainer = document.getElementById("playlists"); const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {}); const playlistsHeader = createElement("header", [playlistsH3], ["header"], {}); const listOfPlaylists = createElement("ul", [], ["list"], {}); @@ -176,14 +181,14 @@ const listOfPlaylists = createElement("ul", [], ["list"], {}); playlistsContainer.className = "container"; playlistsContainer.appendChild(playlistsHeader); playlistsContainer.appendChild(listOfPlaylists); -for(let playlist of player.playlists){ - let playlistEl = createPlaylistElement(playlist); - attachId(playlistEl, "playlist", playlist.id) - listOfPlaylists.appendChild(playlistEl); -} -//-------Functions------\\ +generatePlaylists(player, listOfPlaylists) + + + +//-------------Functions----------------\\ + //Converts the duration format to mm:ss function durationConvertor(duration){ let minutes = Math.floor(duration / 60); diff --git a/style.css b/style.css index c96c98ab..c3e4cf52 100644 --- a/style.css +++ b/style.css @@ -39,9 +39,9 @@ } .song-class, .playlist-class{ - margin-right: 4%;; + margin-right: 4%; padding: 0%; - border:20px white; + border: 3px black solid; font-family: 'Oswald', sans-serif; font-size: 1em; font-weight: bold; @@ -62,4 +62,9 @@ .duration-class{ color: #5d8680; font-style: italic; +} + +.image-class{ + height: 10em; + width: 10em; } \ No newline at end of file From 71b8c0b10a6aba1a0242f3ff865a5d651ecd1ac6 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Thu, 16 Sep 2021 18:58:52 +0300 Subject: [PATCH 12/16] I added the function add song so it will add a new song to the listOfSongs element and the player object --- scripts/index.new.js | 94 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 85 insertions(+), 9 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 7c83851d..784bfba3 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -5,9 +5,11 @@ * @param {Number} songId - the ID of the song to play */ function playSong(songId) { - let songEl = document.getElementById("song"+songId); - songEl.style.backgroundColor = "yellow"; - console.log("Now playing :", '\n' + songEl.innerText) + let id = songId.id.slice(4); + id = parseInt(id, 10); + console.log(id); + songId.style.backgroundColor = "yellow"; + console.log("Now playing :" + songId.innerText); } /** @@ -16,14 +18,34 @@ * @param {Number} songId - the ID of the song to remove */ function removeSong(songId) { - // Your code here + if(!idCheck(id)) throw new Error("Invalid ID"); + player.songs.splice(IndexOfSong(id), 1); + DeleteInPlayLists(id); } + /** * Adds a song to the player, and updates the DOM to match. */ -function addSong({ title, album, artist, duration, coverArt }) { - // Your code here +function addSong(title, album, artist, duration, coverArt, id = randomId()) { + duration = reverseDurationConvertor(duration); + //Random ID generator + while(idCheck(id)){ + id = randomId(); + } + //Add to player + player.songs.push({ + id: id, + title: title, + album: album, + artist: artist, + duration: duration + }); + //Create new DOM element and appen as child to listOfSongs, log the action + let newSongEl = createSongElement({ id, title, album, artist, duration, coverArt }); + attachId(newSongEl, "song", id); + listOfSongs.appendChild(newSongEl); + console.log("New song was added! " + title + " ID: " + id); } /** @@ -62,7 +84,7 @@ function handleAddSongEvent(event) { const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); - return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {onclick: `playSong(${id})`}); + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {onclick: `playSong(${"song"+id})`}); }; /** @@ -186,7 +208,7 @@ playlistsContainer.appendChild(listOfPlaylists); generatePlaylists(player, listOfPlaylists) - +addSong("Vzxzza", "Gzxzxzxfolk", "zxzxikr", "03:20", "./images/cover_art/songleikr_vinda.jpg") //-------------Functions----------------\\ //Converts the duration format to mm:ss @@ -202,6 +224,16 @@ function durationConvertor(duration){ return minutes + ":" + seconds; }; +//Duration reverse convertor (from mm:ss to seconds) + +function reverseDurationConvertor(duration){ + duration = duration.split(":"); + let minutes = parseInt(duration[0]) * 60; + let seconds = parseInt(duration[1]); + return minutes + seconds; +} + + //Returns the duration of a song function getDuration(id){ for(let song of player.songs){ @@ -241,4 +273,48 @@ function playlistDuration(id) { //ID attacher function attachId(element, string, id){ element.id = string + id; -} \ No newline at end of file +} + +//Returns true if id exists and false if not +function idCheck(id){ + for(let song of player.songs){ + if(song.id == id){ + return true; + } + } + return false; +} + +//Returns an index of a song in songs by id +function IndexOfSong(id) { + for(let song of player.songs){ + if(song.id == id){ + return player.songs.indexOf(song); + } + } + } + + //Deleting the specific song from playlists +function DeleteInPlayLists(id) { + for(let playlistSongs of player.playlists){ + for(let i = 0; i < playlistSongs.songs.length; i++){ + if(playlistSongs.songs[i] == id){ + playlistSongs.songs.splice(i, 1); + } + } + } + }; + + /* +function removeSong(id) { + if(!idCheck(id)) throw new Error("Invalid ID"); + player.songs.splice(IndexOfSong(id), 1); + DeleteInPlayLists(id); +} +*/ + +//Random ID generator between 1-100 +function randomId(){ + return Math.floor(Math.random() * 101); +} + From 94a96374438dd5f918e5242b31fe60cd71f38c63 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Thu, 16 Sep 2021 20:34:43 +0300 Subject: [PATCH 13/16] I added the remove song function --- scripts/index.new.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 784bfba3..14ad46d0 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -18,9 +18,17 @@ * @param {Number} songId - the ID of the song to remove */ function removeSong(songId) { - if(!idCheck(id)) throw new Error("Invalid ID"); - player.songs.splice(IndexOfSong(id), 1); - DeleteInPlayLists(id); + //ID checker + if(!idCheck(songId)) throw new Error("Invalid ID"); + //Delete from player + player.songs.splice(IndexOfSong(songId), 1); + DeleteInPlayLists(songId); + //Remove element from DOM + elementId = "song"+songId; + let songEl = document.getElementById(elementId); + songEl.remove(); + console.log(player); + console.log(listOfSongs); } @@ -209,6 +217,7 @@ generatePlaylists(player, listOfPlaylists) addSong("Vzxzza", "Gzxzxzxfolk", "zxzxikr", "03:20", "./images/cover_art/songleikr_vinda.jpg") + //-------------Functions----------------\\ //Converts the duration format to mm:ss From 49ba5e0dea9ea94098bafd67b66ef49fffba5219 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Fri, 17 Sep 2021 00:44:56 +0300 Subject: [PATCH 14/16] I made the add song section to work, I had a problem with getting the value by name so I attached an ID to the inputs through for loops in order to get the value of the inputs. I placed these values into the add song function to add the new song from the inputs. --- scripts/index.new.js | 147 ++++++++++++++++++++++++++++--------------- style.css | 4 ++ 2 files changed, 101 insertions(+), 50 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 14ad46d0..3e735651 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -5,11 +5,13 @@ * @param {Number} songId - the ID of the song to play */ function playSong(songId) { - let id = songId.id.slice(4); - id = parseInt(id, 10); - console.log(id); - songId.style.backgroundColor = "yellow"; - console.log("Now playing :" + songId.innerText); + //let id = songId.id.slice(4); + //id = parseInt(id, 10); + //console.log(id); + elementId = "song"+songId; + songEl = document.getElementById(elementId); + songEl.style.backgroundColor = "yellow"; + console.log("Now playing :" + songEl.innerText); } /** @@ -27,8 +29,7 @@ function removeSong(songId) { elementId = "song"+songId; let songEl = document.getElementById(elementId); songEl.remove(); - console.log(player); - console.log(listOfSongs); + console.log("A song was removed! " + "ID: " + songId); } @@ -49,12 +50,14 @@ function addSong(title, album, artist, duration, coverArt, id = randomId()) { artist: artist, duration: duration }); + //Create new DOM element and appen as child to listOfSongs, log the action let newSongEl = createSongElement({ id, title, album, artist, duration, coverArt }); attachId(newSongEl, "song", id); listOfSongs.appendChild(newSongEl); console.log("New song was added! " + title + " ID: " + id); -} +}; + /** * Acts on a click event on an element inside the songs list. @@ -62,8 +65,10 @@ function addSong(title, album, artist, duration, coverArt, id = randomId()) { * * @param {MouseEvent} event - the click event */ -function handleSongClickEvent(event) { - // Your code here +function handleSongClickEvent(e) { + if(e.target = playBtn){ + console.log(1); + } } /** @@ -71,43 +76,54 @@ function handleSongClickEvent(event) { * * @param {MouseEvent} event - the click event */ -function handleAddSongEvent(event) { - // Your code here +function handleAddSongEvent(e) { + e.preventDefault(); + let title = newTitle.value; + let album = newAlbum.value; + let artist = newArtist.value; + let duration = newDuration.value; + let coverArt = newCoverArt.value; + addSong(title, album, artist, duration, coverArt); } /** * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { - // Song title (
                  ) - const titleEl = createElement("header", [title], ["title-class"]); - // Song album (
                • ) - const albumEl = createElement("li", ["From: ", album], ["item-class"]); - // Song artist (
                • ) - const artistEl = createElement("li", ["By: ", artist], ["item-class"]); - // Song duration (
                • ) - const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`}); - - const coverImageArtUrl = coverArt; - const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); - - //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); - return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {onclick: `playSong(${"song"+id})`}); - }; + // Song title (
                  ) + const titleEl = createElement("header", [title], ["title-class"]); + // Song album (
                • ) + const albumEl = createElement("li", ["From: ", album], ["item-class"]); + // Song artist (
                • ) + const artistEl = createElement("li", ["By: ", artist], ["item-class"]); + // Song duration (
                • ) + const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`}); + //Song cover () + const coverImageArtUrl = coverArt; + const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); + //Play button + const playBtn = createElement("button", ["PLAY"], ["btn", "btn-play"], {action: "click", func: handleSongClickEvent}); + //Delete button + const removeBtn = createElement("button", ["X"], ["btn", "btn-remove"], {}); + //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl, playBtn, removeBtn], ["song-class"], {onclick: `playSong(${id})`}); +}; /** - * Creates a playlist DOM element based on a playlist object. - */ - function createPlaylistElement({ id, name, songs }) { - // Playlist's name (
                  ) - const nameEl = createElement("header", [name], ["title-class"]); - //Playlist's amount of songs - const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]); - //Playlist's duration (
                • ) - const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]); - - - return createElement("div", [nameEl, noOfSongsEl, durationsEl], ["playlist-class"]); +* Creates a playlist DOM element based on a playlist object. +*/ +function createPlaylistElement({ id, name, songs }) { + // Playlist's name (
                  ) + const nameEl = createElement("header", [name], ["title-class"]); + //Playlist's songs () + const playlistSongs = createElement("li", ["Songs: " + songs], ["item-class", "playlist-songs"]); + //Playlist's amount of songs + const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]); + //Playlist's duration (
                • ) + const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]); + + + return createElement("div", [nameEl, playlistSongs, noOfSongsEl, durationsEl], ["playlist-class"]); }; /** @@ -124,7 +140,7 @@ function handleAddSongEvent(event) { * @param {Object} eventListeners - the event listeners on the element */ - function createElement(tagName, children = [], classes = [], attributes = {}) { + function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) { //Create element const el = document.createElement(tagName); @@ -142,14 +158,22 @@ function handleAddSongEvent(event) { for (const attr in attributes) { el.setAttribute(attr, attributes[attr]); } - + + //Evenetlisteners ??? + for(const eventListener in eventListeners){ + el.addEventListener(action, func); + } return el; } +//Takes an input and creates + // Making the add-song-button actually do something document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + + /** * Inserts all songs in the player as DOM elements into the songs list. */ @@ -185,10 +209,38 @@ mainContainer.id = "main-container"; body.appendChild(mainContainer); body.insertBefore(mainContainer, body.firstElementChild); -//---------Add a new song------\\ +//------Add a new song container------\\ const songSection = document.getElementById("add-section"); songSection.className = "container"; +//I tried to take the value of the inputs but could not reach them + +//const newTitle = document.getElementsByName("title")[0].value; +//const newAlbum = document.getElementsByName("album")[0].value; +//const newArtist = document.getElementsByName("artist")[0].value; +//const newDuration = document.getElementsByName("duration")[0].value; +//const newCoverArt = document.getElementsByName("cover-art")[0].value; + +//So I'm making an array of inputs +inputCollection = document.getElementsByTagName("input"); +//Now I'm placing it in a regular arr +let inputArr = []; +for(input of inputCollection){ + inputArr.push(input); +} +//And giving them IDs +for(let i = 0; i < inputArr.length; i++){ + inputArr[i].id = "input"+i; +} + +const newTitle = document.getElementById("input0"); +const newAlbum = document.getElementById("input1"); +const newArtist = document.getElementById("input2"); +const newDuration = document.getElementById("input3"); +const newCoverArt = document.getElementById("input4"); + + + //--------Songs container------\\ const songsContainer = document.getElementById('songs'); const songsH2 = createElement("h2", ["Songs"], ["headline"], {}); @@ -216,7 +268,7 @@ playlistsContainer.appendChild(listOfPlaylists); generatePlaylists(player, listOfPlaylists) -addSong("Vzxzza", "Gzxzxzxfolk", "zxzxikr", "03:20", "./images/cover_art/songleikr_vinda.jpg") + //-------------Functions----------------\\ @@ -314,16 +366,11 @@ function DeleteInPlayLists(id) { } }; - /* -function removeSong(id) { - if(!idCheck(id)) throw new Error("Invalid ID"); - player.songs.splice(IndexOfSong(id), 1); - DeleteInPlayLists(id); -} -*/ //Random ID generator between 1-100 function randomId(){ return Math.floor(Math.random() * 101); } +//addSong("Vzxzzasdssd", "Gzsdsadxzxzxfolk", "zsdadadxzxikr", "03:20", "./images/cover_art/songleikr_vinda.jpg") +//removeSong(3); \ No newline at end of file diff --git a/style.css b/style.css index c3e4cf52..2fb3953c 100644 --- a/style.css +++ b/style.css @@ -67,4 +67,8 @@ font-style: italic; .image-class{ height: 10em; width: 10em; +} + +.btn{ + float: right; } \ No newline at end of file From 6776356f52937061e5bdced980b062c737678d28 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Sat, 18 Sep 2021 02:23:59 +0300 Subject: [PATCH 15/16] I added the event listener to the song element. the handler understands which button was pressed by its class name and executes the relevant function playSong/removeSong. I also played with the CSS a bit. --- scripts/index.new.js | 53 ++++++++++++++++++++++++++++------- style.css | 67 ++++++++++++++++++++++++++++++++++---------- 2 files changed, 95 insertions(+), 25 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 3e735651..47752541 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -65,10 +65,31 @@ function addSong(title, album, artist, duration, coverArt, id = randomId()) { * * @param {MouseEvent} event - the click event */ -function handleSongClickEvent(e) { - if(e.target = playBtn){ - console.log(1); - } + function handleSongClickEvent(e) { + const target = e.target; + let buttonClass = target.classList[1]; + let parentId; + if(buttonClass === "btn-play"){ + parentId = getParentId(target); + playSong(parentId); + }else if(buttonClass === "btn-remove"){ + parentId = getParentId(target); + removeSong(parentId); + } + } + +//returns the ID of the song from the song element's ID + +function songIdReturn(songId){ + let id = songId.slice(4); + id = parseInt(id, 10); + return(id); +} + +function getParentId(target){ + let parentId = target.parentElement.id; + parentId = songIdReturn(parentId); + return(parentId); } /** @@ -102,11 +123,11 @@ function handleAddSongEvent(e) { const coverImageArtUrl = coverArt; const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl}); //Play button - const playBtn = createElement("button", ["PLAY"], ["btn", "btn-play"], {action: "click", func: handleSongClickEvent}); + const playBtn = createElement("button", ["PLAY"], ["btn", "btn-play"],{}); //Delete button const removeBtn = createElement("button", ["X"], ["btn", "btn-remove"], {}); //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]); - return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl, playBtn, removeBtn], ["song-class"], {onclick: `playSong(${id})`}); + return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl, playBtn, removeBtn], ["song-class"], {click: `playSong(${id})`}); }; /** @@ -160,9 +181,10 @@ function createPlaylistElement({ id, name, songs }) { } //Evenetlisteners ??? - for(const eventListener in eventListeners){ - el.addEventListener(action, func); + for(const [key, value] of Object.entries(eventListeners)){ + el.addEventListener(`${key}`, `${value}`); } + return el; } @@ -250,6 +272,8 @@ const listOfSongs = createElement("ul", [], ["list"], {}); songsContainer.className = "container"; songsContainer.appendChild(songsHeader); songsContainer.appendChild(listOfSongs); +//add event listener +songsContainer.addEventListener("click", handleSongClickEvent); generateSongs(player, listOfSongs); @@ -372,5 +396,14 @@ function randomId(){ return Math.floor(Math.random() * 101); } -//addSong("Vzxzzasdssd", "Gzsdsadxzxzxfolk", "zsdadadxzxikr", "03:20", "./images/cover_art/songleikr_vinda.jpg") -//removeSong(3); \ No newline at end of file +//Just for fun =] + +body.addEventListener("mousemove", changeBackgroundColor); + + +function changeBackgroundColor(e){ + mainContainer.style.backgroundColor = "rgb("+e.offsetY+", "+e.offsetX+", 20)"; + songs.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)"; + playlists.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)"; + songSection.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)"; +} \ No newline at end of file diff --git a/style.css b/style.css index 2fb3953c..c6f86cc2 100644 --- a/style.css +++ b/style.css @@ -1,22 +1,21 @@ -/* ------Main------ */ -#container{ - background: #77EDEF; +/* ------Main section------ */ +#main-container{ + background-color: lightgray; +} +.container{ box-shadow: 2px 0 4px rgba(0,0,0,0.5); border-radius: 2px; border: 1px black; border-style: solid; - display: flex; - flex-flow: column wrap; - justify-content: center; - justify-content: stretch; + text-align: center; + font-size: 1.25em; + } - #header{ font-family: 'Orbitron', sans-serif; - background: #77EDEF; color: slategray(0, 0, 0); - font-size: 1em; + font-size: 2em; text-align: center; border: 1px black; border-style: solid; @@ -26,27 +25,54 @@ justify-content: stretch; } -/* #headline{ - +#headline{ + font-size: 2em; } .paragraph{ + font-family: "Comic Sans MS"; + +} -} */ +/* ------Add song section------ */ + +#add-section{ +display: flex; +display: flex; +flex-flow: column wrap; +justify-content: center; +background-color: whitesmoke; +} +#add-button{ + margin-top: 1%; + margin-bottom: 1%; + margin-left: 4%; + margin-right: 4%; +} +/* ------Songs && Playlists sections------ */ +#songs, #playlists{ + background-color: lightgray; + padding-right: 4%; +} .list{ list-style-type: none; } + .song-class, .playlist-class{ - margin-right: 4%; - padding: 0%; + background-color: whitesmoke; + margin: 5%; + padding-right: 4%; + padding-top: 3%; + padding-bottom: 3%; border: 3px black solid; font-family: 'Oswald', sans-serif; font-size: 1em; font-weight: bold; text-align:center !important; color: white; + } .item-class{ @@ -67,8 +93,19 @@ font-style: italic; .image-class{ height: 10em; width: 10em; + margin-left: 17%; } .btn{ float: right; + font-size: 1em; +} + +.btn-play{ + background-color: green; + margin-left: 2%; +} + +.btn-remove{ + background-color: red; } \ No newline at end of file From a8f5615f74d32a1a49c7f6d9ae3660c4cd7ac1b2 Mon Sep 17 00:00:00 2001 From: AvivYamin Date: Sat, 18 Sep 2021 18:59:55 +0300 Subject: [PATCH 16/16] I edited the play song function to play the song by changing its background color to blue for the duration time of that specific song. --- scripts/index.new.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/scripts/index.new.js b/scripts/index.new.js index 47752541..d9933172 100644 --- a/scripts/index.new.js +++ b/scripts/index.new.js @@ -4,16 +4,30 @@ * * @param {Number} songId - the ID of the song to play */ + + function playSong(songId) { - //let id = songId.id.slice(4); - //id = parseInt(id, 10); - //console.log(id); + //Converting the id to the song ID and to the element itself elementId = "song"+songId; songEl = document.getElementById(elementId); - songEl.style.backgroundColor = "yellow"; + //changing the backgroundColor to blue + blueBackgroundColor(songEl); + let duration = getDuration(songId) * 1000; + //Playing the song for the duration of that song + setTimeout(function(){stopBlueColor(songEl)}, duration); console.log("Now playing :" + songEl.innerText); } + //Changes the background color + function blueBackgroundColor(elem){ + elem.style.backgroundColor = "blue"; + } + + //Stop the color change (returns to noraml) + function stopBlueColor(elem){ + elem.style.backgroundColor = "whitesmoke"; + } + /** * Removes a song from the player, and updates the DOM to match. *