From d150a07b43e0c107a881088866a59062a74e9b18 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Mon, 13 Sep 2021 02:07:33 +0300 Subject: [PATCH 01/15] Add function to player.js --- index.html | 1 - scripts/index.js | 118 +++++++++++++++++++++++++++++++++------------- scripts/player.js | 43 +++++++++++++++++ style.css | 1 - 4 files changed, 127 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index c55fb482..04767524 100644 --- a/index.html +++ b/index.html @@ -16,4 +16,3 @@ - diff --git a/scripts/index.js b/scripts/index.js index 6842c794..e1cc5a0e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,47 +1,97 @@ -/** - * Plays a song from the player. - * Playing a song means changing the visual indication of the currently playing song. - * - * @param {String} songId - the ID of the song to play - */ + + + function playSong(songId) { - // Your code here + let otherSongs = document.getElementsByClassName('songShell'); + for(let otherSong of otherSongs){ + otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)"; + } + document.getElementById(songId).style.backgroundColor = "red"; + + if(songId < 7){ + window.setTimeout(function(){playSong(songId + 1);} ,getSongObjectById(songId).duration * 1000); + } + // Your code here } /** - * Creates a song DOM element based on a song object. - */ +* 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})` } - return createElement("div", children, classes, attrs) + const children = []; + const classes = []; + const songsDiv = document.getElementById("songs"); + let uniqueSongDiv = document.createElement('div'); + uniqueSongDiv.setAttribute('class', 'songShell'); + uniqueSongDiv.setAttribute('id',id); + let songTitle = document.createElement('h1'); + let songAlbum = document.createElement('h2'); + let songArtist = document.createElement('h2'); + let songDuration = document.createElement('p'); + let songCoverArt = document.createElement('img'); + songTitle.innerText = title; + songAlbum.innerText = "album: " + album; + songArtist.innerText = "by: " + artist; + songDuration.innerText = secondsToMinutesConvertor(duration); + songCoverArt.setAttribute('src' , coverArt); + songsDiv.appendChild(uniqueSongDiv); + uniqueSongDiv.appendChild(songTitle); + uniqueSongDiv.appendChild(songAlbum); + uniqueSongDiv.appendChild( songArtist); + uniqueSongDiv.appendChild( songDuration); + uniqueSongDiv.appendChild(songCoverArt); + uniqueSongDiv.setAttribute('onclick', `playSong(${id})`) + const attrs = { onclick: `playSong(${id})` } + return createElement("div", children, classes, attrs) +} +for(let song of player.songs){ + createSongElement(song); } - /** - * Creates a playlist DOM element based on a playlist object. - */ +* 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 = {} + let playlistDiv = document.getElementById("playlists"); + let uniquePlaylistDiv = document.createElement('div'); + uniquePlaylistDiv.setAttribute('class', 'playlistShell'); + uniquePlaylistDiv.setAttribute('name', name); + let playlistName = document.createElement('h1'); + let playlistSongs = document.createElement('h2'); + let playlistTotalDuration = document.createElement('p'); + playlistName.innerText = name + "-playlist"; + playlistSongs.innerText = "amount of songs: " + songs.length; + playlistTotalDuration.innerText = "duration - " + playlistDuration(id); + playlistDiv.appendChild(uniquePlaylistDiv); + uniquePlaylistDiv.appendChild(playlistName); + uniquePlaylistDiv.appendChild(playlistSongs); + uniquePlaylistDiv.appendChild(playlistTotalDuration); + return createElement("div", children, classes, attrs) +} +for(let playlist of player.playlists){ + createPlaylistElement(playlist); } - /** - * Creates a new DOM element. - * - * Example usage: - * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"}) - * - * @param {String} tagName - the type of the element - * @param {Array} children - the child elements for the new element. - * Each child can be a DOM element, or a string (if you just want a text element). - * @param {Array} classes - the class list of the new element - * @param {Object} attributes - the attributes for the new element - */ +* Creates a new DOM element. +* +* Example usage: +* createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"}) +* +* @param {String} tagName - the type of the element +* @param {Array} children - the child elements for the new element. +* Each child can be a DOM element, or a string (if you just want a text element). +* @param {Array} classes - the class list of the new element +* @param {Object} attributes - the attributes for the new element +*/ function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here + // Your code here } - // You can write more code below this line +let songDuration = document.querySelectorAll(".songShell p"); +let SongDurationArray = Array.from(songDuration); +for(let i = 0; i < SongDurationArray.length; i++){ + let redAmount = player.songs[i].duration; + SongDurationArray[i].style.color = ("rgb(" + redAmount * 0.74 + ","+(100000/redAmount)+ ",0)"); +} \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 5a85f825..f70b27e2 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -62,3 +62,46 @@ const player = { { id: 5, name: "Israeli", songs: [4, 5] }, ], } +function mmssuration(duration){ + let minutes = Math.floor(duration / 60); + let seconds = duration % 60; + if (minutes < 10) { + minutes = "0" + minutes; + } + if (seconds < 10) { + seconds = "0" + seconds; + } + return minutes.toString() + ':' + seconds.toString(); + } + + function playlistDuration(id){ + let playlist = getPlaylistById(id); + let result = 0; + for(let num in playlist.songs){ + result+= getSongById(playlist.songs[num]).duration; + } + return result; + + } + + function sumPlaylist(playlist){ + let sumDuration=0 + for(let i in playlist.songs){ + for(let j in player.songs){ + if (player.songs[j]==playlist.songs[i]){ + sumDuration+=player.songs[j].duration + } + } + } + return sumDuration + } + + function idExist(id){ + for (let num in player.songs) { + if (player.songs[num].id === id) + return true; + } + return false; + } + + diff --git a/style.css b/style.css index f4645fe9..e69de29b 100644 --- a/style.css +++ b/style.css @@ -1 +0,0 @@ -/* Your code here */ From 7f7373d1594147dfcb7d028ffefe6af8d3bfa46f Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Mon, 13 Sep 2021 02:57:12 +0300 Subject: [PATCH 02/15] Add function inside index.js --- scripts/index.js | 155 +++++++++++++++++++++++++--------------------- scripts/player.js | 6 +- 2 files changed, 88 insertions(+), 73 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index e1cc5a0e..169517f1 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,78 +1,37 @@ +/** + * Plays a song from the player. + * Playing a song means changing the visual indication of the currently playing song. + * + * @param {String} songId - the ID of the song to play + */ + function playSong(songId) { + let song = getElementById(songId).style.backgroundColor = "yellow"; + } + - -function playSong(songId) { - let otherSongs = document.getElementsByClassName('songShell'); - for(let otherSong of otherSongs){ - otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)"; - } - document.getElementById(songId).style.backgroundColor = "red"; - - if(songId < 7){ - window.setTimeout(function(){playSong(songId + 1);} ,getSongObjectById(songId).duration * 1000); - } - // 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 songsDiv = document.getElementById("songs"); - let uniqueSongDiv = document.createElement('div'); - uniqueSongDiv.setAttribute('class', 'songShell'); - uniqueSongDiv.setAttribute('id',id); - let songTitle = document.createElement('h1'); - let songAlbum = document.createElement('h2'); - let songArtist = document.createElement('h2'); - let songDuration = document.createElement('p'); - let songCoverArt = document.createElement('img'); - songTitle.innerText = title; - songAlbum.innerText = "album: " + album; - songArtist.innerText = "by: " + artist; - songDuration.innerText = secondsToMinutesConvertor(duration); - songCoverArt.setAttribute('src' , coverArt); - songsDiv.appendChild(uniqueSongDiv); - uniqueSongDiv.appendChild(songTitle); - uniqueSongDiv.appendChild(songAlbum); - uniqueSongDiv.appendChild( songArtist); - uniqueSongDiv.appendChild( songDuration); - uniqueSongDiv.appendChild(songCoverArt); - uniqueSongDiv.setAttribute('onclick', `playSong(${id})`) - const attrs = { onclick: `playSong(${id})` } - return createElement("div", children, classes, attrs) -} -for(let song of player.songs){ - createSongElement(song); + const song=arguments[0]; + const children = songsList(song); + const classes = ["song"]; + const attrs = { onclick: playSong(id),cursor:"pointer",id:id }; + return document.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 = {} - let playlistDiv = document.getElementById("playlists"); - let uniquePlaylistDiv = document.createElement('div'); - uniquePlaylistDiv.setAttribute('class', 'playlistShell'); - uniquePlaylistDiv.setAttribute('name', name); - let playlistName = document.createElement('h1'); - let playlistSongs = document.createElement('h2'); - let playlistTotalDuration = document.createElement('p'); - playlistName.innerText = name + "-playlist"; - playlistSongs.innerText = "amount of songs: " + songs.length; - playlistTotalDuration.innerText = "duration - " + playlistDuration(id); - playlistDiv.appendChild(uniquePlaylistDiv); - uniquePlaylistDiv.appendChild(playlistName); - uniquePlaylistDiv.appendChild(playlistSongs); - uniquePlaylistDiv.appendChild(playlistTotalDuration); - return createElement("div", children, classes, attrs) -} -for(let playlist of player.playlists){ - createPlaylistElement(playlist); + const playlist=arguments[0]; + const children = playPlaylist(playlist); + const classes = ["playlist"]; + const attrs = {}; + return document.createElement("div", children, classes, attrs); } + /** * Creates a new DOM element. * @@ -86,12 +45,68 @@ for(let playlist of player.playlists){ * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - // Your code here + const newElement= document.createElement(tagName); + for(let i in classes){ + newElement.classList+=i; + } + const attr=Object.keys(attributes); + for(let prop in attr.length){ + newElement.setAttribute(attr[prop],attributes[attr[prop]]); + } + for(let child in children.length){ + newElement.textContent+=children[i]; +} + return newElement } + // You can write more code below this line -let songDuration = document.querySelectorAll(".songShell p"); -let SongDurationArray = Array.from(songDuration); -for(let i = 0; i < SongDurationArray.length; i++){ - let redAmount = player.songs[i].duration; - SongDurationArray[i].style.color = ("rgb(" + redAmount * 0.74 + ","+(100000/redAmount)+ ",0)"); -} \ No newline at end of file +function songsList(song){ + const listSongs=[] + for(let i in song){ + if(i.toString()!=='duration' && i.toString()!=='coverArt'){ + const liTag=document.createElement('li'); + liTag.innerText=i+":"+ song[i]; + listSongs.push(liTag) + } + else if(i.toString()==="duration"){ + let liTag=document.createElement('li'); + let duration=convertDuriation(song[i]); + liTag.innerText=i+":"+duration; + list.push(liTag) + } + else{ + const img=document.createElement('img') + img.src=song[i] + list.push(img) + } + } + return list + } + + + + function playPlaylist(playlist){ + const listPlaylists=[] + const sumDuration =playlistDuration(playlist) + for(let key in playlist){ + + if(key.toString()!=="songs"){ + let liTag=document.createElement('li') + liTag.innerText= key+" : "+playlist[key]; + listPlaylists.push(liTag) + } + else{ + let liTag=document.createElement("li") + liTag.innerText="number of songs: "+playlist.sosgs.length; + listPlaylists.push(liTag) + } + } + let liTag=document.createElement("li") + liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`; + list.push(sumDuration) + return list + + } + + + \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index f70b27e2..69d43cbd 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -85,15 +85,15 @@ function mmssuration(duration){ } function sumPlaylist(playlist){ - let sumDuration=0 + let durationSum=0; for(let i in playlist.songs){ for(let j in player.songs){ if (player.songs[j]==playlist.songs[i]){ - sumDuration+=player.songs[j].duration + sumDuration+=player.songs[j].duration; } } } - return sumDuration + return sumDuration; } function idExist(id){ From 85597a2f45104f396d66126e2def8c3218c0946f Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Mon, 13 Sep 2021 03:22:01 +0300 Subject: [PATCH 03/15] Css and addition in index.js --- style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/style.css b/style.css index e69de29b..a3ad9c89 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,17 @@ +div{ +border: solid blue; +margin:40% +} +li{ + cursor:pointer + color: #000; + +} +#songs{ + background-color:green; + + +} +#playlists{ + background: color #545454; +} \ No newline at end of file From a160d58f7584cf249233d2f394eb1a6da118b142 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Mon, 13 Sep 2021 13:51:51 +0300 Subject: [PATCH 04/15] little change --- scripts/index.js | 13 +++++++++---- style.css | 2 +- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 169517f1..7a06489d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -70,7 +70,7 @@ function songsList(song){ } else if(i.toString()==="duration"){ let liTag=document.createElement('li'); - let duration=convertDuriation(song[i]); + let duration=mmsstDuriation(song[i]); liTag.innerText=i+":"+duration; list.push(liTag) } @@ -105,8 +105,13 @@ function songsList(song){ liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`; list.push(sumDuration) return list - } - - \ No newline at end of file + const song=document.getElementById("songs"); + for(let i in player.songs){ + song.appendChild(createSongElement(player.songs[i])); + } + const playlist=document.getElementById("playlists"); + for(let i in player.playlists){ + playlist.appendChild(createPlaylistElement(player.playlists[i])) + } \ No newline at end of file diff --git a/style.css b/style.css index a3ad9c89..e074432d 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ border: solid blue; margin:40% } li{ - cursor:pointer + cursor:pointer; color: #000; } From 277ade5e3a824309877d3033a3d3fb7b08f75b49 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 04:48:06 +0300 Subject: [PATCH 05/15] Final repair of first mission which was done wrongly Change of all files --- .vscode/settings.json | 3 + index.html | 5 +- scripts/index.js | 123 +++++++++++++--------------------------- scripts/player.js | 129 ++++++++++++++++++++++++------------------ style.css | 73 ++++++++++++++++++------ 5 files changed, 179 insertions(+), 154 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 04767524..5934db5e 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,13 @@ +

New MP3 Player

- +
+

Playlists

+ diff --git a/scripts/index.js b/scripts/index.js index 7a06489d..89d3d6d6 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,37 +1,50 @@ /** + * * Plays a song from the player. * Playing a song means changing the visual indication of the currently playing song. * * @param {String} songId - the ID of the song to play */ function playSong(songId) { - let song = getElementById(songId).style.backgroundColor = "yellow"; - } - - + let notChosens = document.getElementsByClassName('songShell'); + for(let notChosen of notChosens){ + notChosen.style.backgroundColor = "rgba(0, 0, 0, 0)"; + } + document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; +} /** * Creates a song DOM element based on a song object. */ function createSongElement({ id, title, album, artist, duration, coverArt }) { - const song=arguments[0]; - const children = songsList(song); - const classes = ["song"]; - const attrs = { onclick: playSong(id),cursor:"pointer",id:id }; - return document.createElement("div", children, classes, attrs); + let SongTitle = createElement('h2',[title],['songTitles']); + let songAlbum = createElement('h3',["Album: " + album]); + let songArtist = createElement('h4',["Artist: " + artist]); + let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); + let songCoverArt = createElement('img',[],[],{src: coverArt}) + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt],['songShell'],{id: id}); + console.log(songElement); + songElement.setAttribute('onclick', `playSong(${id})`) + return songElement; + } +for(let song of player.songs){ + let songsDiv = document.getElementById('songs'); + songsDiv.append(createSongElement(song)); } - /** * Creates a playlist DOM element based on a playlist object. */ function createPlaylistElement({ id, name, songs }) { - const playlist=arguments[0]; - const children = playPlaylist(playlist); - const classes = ["playlist"]; - const attrs = {}; - return document.createElement("div", children, classes, attrs); + let playlistName = createElement('h2',[name]); + let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]); + let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]); + let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']); + return playlistElem; +} +for(let playlist of player.playlists){ + let playlistList = document.getElementById('playlists'); + playlistList.append(createPlaylistElement(playlist)); } - /** * Creates a new DOM element. * @@ -45,73 +58,17 @@ function createPlaylistElement({ id, name, songs }) { * @param {Object} attributes - the attributes for the new element */ function createElement(tagName, children = [], classes = [], attributes = {}) { - const newElement= document.createElement(tagName); - for(let i in classes){ - newElement.classList+=i; - } - const attr=Object.keys(attributes); - for(let prop in attr.length){ - newElement.setAttribute(attr[prop],attributes[attr[prop]]); - } - for(let child in children.length){ - newElement.textContent+=children[i]; +let newEl = document.createElement(tagName); +for(let child of children){ + newEl.append(child); } - return newElement +for(let cls of classes){ + newEl.classList.add(cls); } +for(let attr in attributes){ + newEl.setAttribute(attr, attributes[attr]); +} +return newEl +} +createSongElement('h2', [player.songs[0].title], "songTitles"); -// You can write more code below this line -function songsList(song){ - const listSongs=[] - for(let i in song){ - if(i.toString()!=='duration' && i.toString()!=='coverArt'){ - const liTag=document.createElement('li'); - liTag.innerText=i+":"+ song[i]; - listSongs.push(liTag) - } - else if(i.toString()==="duration"){ - let liTag=document.createElement('li'); - let duration=mmsstDuriation(song[i]); - liTag.innerText=i+":"+duration; - list.push(liTag) - } - else{ - const img=document.createElement('img') - img.src=song[i] - list.push(img) - } - } - return list - } - - - - function playPlaylist(playlist){ - const listPlaylists=[] - const sumDuration =playlistDuration(playlist) - for(let key in playlist){ - - if(key.toString()!=="songs"){ - let liTag=document.createElement('li') - liTag.innerText= key+" : "+playlist[key]; - listPlaylists.push(liTag) - } - else{ - let liTag=document.createElement("li") - liTag.innerText="number of songs: "+playlist.sosgs.length; - listPlaylists.push(liTag) - } - } - let liTag=document.createElement("li") - liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`; - list.push(sumDuration) - return list - } - - const song=document.getElementById("songs"); - for(let i in player.songs){ - song.appendChild(createSongElement(player.songs[i])); - } - const playlist=document.getElementById("playlists"); - for(let i in player.playlists){ - playlist.appendChild(createPlaylistElement(player.playlists[i])) - } \ No newline at end of file diff --git a/scripts/player.js b/scripts/player.js index 69d43cbd..9947d12f 100644 --- a/scripts/player.js +++ b/scripts/player.js @@ -31,77 +31,98 @@ const player = { artist: "AC/DC", duration: 292, coverArt: "./images/cover_art/acdc_thunderstruck.jpg", - }, - { + }, + { id: 4, title: "All is One", album: "All is One", artist: "Orphaned Land", duration: 270, coverArt: "./images/cover_art/orphaned_land_all_is_one.jpg", - }, - { + }, + { id: 5, title: "As a Stone", album: "Show Us What You Got", artist: "Full Trunk", duration: 259, coverArt: "./images/cover_art/full_trunk_as_a_stone.jpg", - }, - { + }, + { id: 6, title: "Sons of Winter and Stars", album: "Time I", artist: "Wintersun", duration: 811, coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg", - }, - ], - playlists: [ - { id: 1, name: "Metal", songs: [1, 7, 4, 6] }, - { id: 5, name: "Israeli", songs: [4, 5] }, - ], -} -function mmssuration(duration){ - let minutes = Math.floor(duration / 60); - let seconds = duration % 60; - if (minutes < 10) { - minutes = "0" + minutes; - } - if (seconds < 10) { - seconds = "0" + seconds; - } - return minutes.toString() + ':' + seconds.toString(); - } - - function playlistDuration(id){ - let playlist = getPlaylistById(id); - let result = 0; - for(let num in playlist.songs){ - result+= getSongById(playlist.songs[num]).duration; - } - return result; + }, + ], + playlists: [ + { id: 1, name: "Metal", songs: [1, 7, 4, 6] }, + { id: 5, name: "Israeli", songs: [4, 5] }, + ], + } + //External Functions + function secondsToMinutesConvertor(songDuration){ + if(typeof(songDuration) === 'number'){ + let min = Math.floor(songDuration / 60); + let sec = songDuration % 60; + if (min < 10) { + min = "0" + min; + } + if (sec < 10) { + sec = "0" + sec; + } + return min.toString() + ':' + sec.toString(); + } + else{ + return parseInt(songDuration.slice(3)) + parseInt(songDuration.slice(0,2)) * 60; + } + } + + function getPlaylistById(id){ + let playlistId = player.playlists.filter(playlist =>{ + if(playlist.id === id){ + return playlist; + } + }) + return playlistId[0]; + } + + function playlistDuration(id) { + let WantedPlaylist = getPlaylistById(id); + let songsArray = WantedPlaylist.songs.map(song => { + return getSongObjectById(song).duration}) + let totalDuration = (songsArray.reduce((added, currentValue) => { + currentValue += added; + return currentValue; + })) + return secondsToMinutesConvertor(totalDuration); + } + + function generateId(idArr,id){ + let newArr=[]; + for(let i of arr){ + newArr.push(i.id); + } + } - } - - function sumPlaylist(playlist){ - let durationSum=0; - for(let i in playlist.songs){ - for(let j in player.songs){ - if (player.songs[j]==playlist.songs[i]){ - sumDuration+=player.songs[j].duration; - } - } - } - return sumDuration; - } - - function idExist(id){ - for (let num in player.songs) { - if (player.songs[num].id === id) - return true; - } - return false; - } - + function getSongObjectById(id){ + let song = player.songs.filter(songObject => { + if(songObject.id == id){ + return songObject; + } + }) + if(song.length == undefined){ + throw new Error ("id is undefined"); + } + song = song[0]; + return song; + } + function convertToseconds(mmssDuration){ + let minutes = Number(mmssDuration.split("").slice(0, 2).join("")); + let seconds = Number(mmssDuration.split("").slice(3, 5).join("")); + let time = (minutes * 60) + seconds; + return time; + } \ No newline at end of file diff --git a/style.css b/style.css index e074432d..df9a4b07 100644 --- a/style.css +++ b/style.css @@ -1,17 +1,58 @@ +body{ + font-family: sans-serif; + background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%); +} +h1{ + color: rgba(5, 56, 25, 0.637); + text-decoration: underline; + text-align: center; + font-size: 100px; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + +} +.songShell{ +border: 7px solid rgb(224, 19, 104); +border-width: 3px; +border-color: darkgoldenrod; +align-items: center; +margin-right: 100px; +margin-left: 300px; +margin-top: 100px; +margin-bottom: 50px; +} +.playlistShell { + border: 10px double rgb(95, 84, 158); + border-radius: 10%; + +} +.songShell img{ + border-radius: 20%; + display: block; + margin-left: auto; + margin-right:80px; + padding-top: 30px; + padding-right: 100px; + padding-bottom: 40px; + +} +.playlistShell h3{ + color: blue; + font-family: verdana; + font-size: 100%; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} div{ -border: solid blue; -margin:40% -} -li{ - cursor:pointer; - color: #000; - -} -#songs{ - background-color:green; - - -} -#playlists{ - background: color #545454; -} \ No newline at end of file + color:darkviolet; + font-size: 20px; +} +h2{ + font-size: 60px; + font-family: monospace; +} +h3{ + font-size: 40px; +} +h4{ + font-size: 30px; + font-family: cursive; +} From 5a22e9fa6105b628baf25d00e82e006ea7e94eb3 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 05:45:29 +0300 Subject: [PATCH 06/15] Add index.new Change html file,add a file inputs for adding songs --- index.new.html | 35 +++++++++++++++++++++++++++++++++++ index.new.js | 0 2 files changed, 35 insertions(+) create mode 100644 index.new.html create mode 100644 index.new.js diff --git a/index.new.html b/index.new.html new file mode 100644 index 00000000..7eb9d6ae --- /dev/null +++ b/index.new.html @@ -0,0 +1,35 @@ + + + + + Awesome MP3 Player + + + + + + +
+

Add a new song

+
+
+ + + + + +
+
+ +
+
+

Songs

+
+
+

Playlists

+
+ +
+
+ + \ No newline at end of file diff --git a/index.new.js b/index.new.js new file mode 100644 index 00000000..e69de29b From 2ce3b9c171734bc346f8795699194dee9f1b6dfa Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 05:55:28 +0300 Subject: [PATCH 07/15] Copy paste index.js to index.new.js Now we have style of two missions together --- index.new.html | 2 +- index.new.js | 188 +++++++++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 3 + 3 files changed, 192 insertions(+), 1 deletion(-) diff --git a/index.new.html b/index.new.html index 7eb9d6ae..73df68ee 100644 --- a/index.new.html +++ b/index.new.html @@ -27,7 +27,7 @@

Songs

Playlists

-
+
diff --git a/index.new.js b/index.new.js index e69de29b..b827ca3b 100644 --- a/index.new.js +++ b/index.new.js @@ -0,0 +1,188 @@ +/** + * 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) { + let otherSongs = document.getElementsByClassName('songShell'); + for(let otherSong of otherSongs){ + otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)"; + } + document.getElementById(songId).style.backgroundColor = "red"; + console.log(songId); + if(songId < 7){ + window.setTimeout(function(){playSong(Number(songId) + 1);} ,getSongObjectById(songId).duration * 1000); + } +} +//adding the event listener to the songs list +let songSlist = document.getElementById('songs'); +songSlist.addEventListener('click', (e) => {if(e.target.className === 'play-button'){ + console.log(e.target.parentElement); + playSong(e.target.parentElement.id) + } + else if(e.target.className === 'remove-button'){ + removeSong(e.target.parentElement.id); + } +}); +/** + * 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) { + let removedSong = document.getElementById(songId); +removedSong.style = 'display: none'; +for(let playlist of player.playlists){ + for(let i = 0; i <= playlist.songs.length; i++){ + if(playlist.songs[i] == songId){ + playlist.songs.splice(i, 1); + console.log(playlist.songs); + } + } +} +let removePlaylists = Array.from(document.querySelectorAll('.playlistShell')); +for(let playlist of removePlaylists){ + console.log(playlist); + playlist.style = 'display: none'; +} +//generates the playlists list +for(let playlist of player.playlists){ + let playlistDiv = document.getElementById('playlists'); + playlistDiv.append(createPlaylistElement(playlist)); + playlistDiv.style = "display: block"; +} + +} + +/** +* Adds a song to the player, and updates the DOM to match. +*/ +function addSong({ title, album, artist, duration, coverArt }) { +let SongTitle = createElement('h1', children = [title], classes = ['songTitles'], attributes = {}); +let songAlbum = createElement('h2', children = ["album: " + album], classes = [], attributes = {}); +let songArtist = createElement('h2', children = ["by: " + artist], classes = [], attributes = {}); +let songDuration = createElement('span', children = [duration], classes = [], attributes = {}); +let songCoverArt = createElement('img', children = [], classes = [], attributes = {src: coverArt}) +let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = {type:'button'}); +let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = {type:'button'}); +let uniqueSongDiv = createElement('div', children = [SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton], classes = ['songShell'], attributes = {id: `${generateId()}`}); +const eventListeners = {} +let songsDiv = document.getElementById('songs'); +songsDiv.append(uniqueSongDiv); +} +/** +* 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) { +let newSongObject = { +'title': document.getElementsByName('title')[0].value, +'album': document.getElementsByName('album')[0].value, +'artist': document.getElementsByName('artist')[0].value, +'duration': document.getElementsByName('duration')[0].value, +'coverArt:': document.getElementsByName('cover-art')[0].value +} +console.log(newSongObject); +addSong(newSongObject); +} +let addButton = document.getElementById('add-button'); +addButton.addEventListener('click', handleSongClickEvent); +/** +* 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 }) { +let SongTitle = createElement('h1', children = [title], classes = ['songTitles'], attributes = {}); +let songAlbum = createElement('h2', children = ["album: " + album], classes = [], attributes = {}); +let songArtist = createElement('h2', children = ["by: " + artist], classes = [], attributes = {}); +let songDuration = createElement('span', children = [secondsToMinutesConvertor(duration)], classes = [], attributes = {}); +let songCoverArt = createElement('img', children = [], classes = [], attributes = {src: coverArt}) +let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = {type:'button', id: `playButton${id}`}); +let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = {type:'button'}); +let uniqueSongDiv = createElement('div', children = [SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton], classes = ['songShell'], attributes = {id: id}); +const eventListeners = {} +return uniqueSongDiv; +} +for(let song of player.songs){ +let songsDiv = document.getElementById('songs'); +songsDiv.append(createSongElement(song)); +} +/** +* Creates a playlist DOM element based on a playlist object. +*/ +function createPlaylistElement({ id, name, songs }) { +let playlistName = createElement('h1', children = [name + "-playlist"], classes = [], attributes = {}); +let playlistSongs = createElement('h2', children = ["amount of songs: " + songs.length], classes = [], attributes = {}); +let playlistTotalDuration = createElement('span', children = ["duration - " + playlistDuration(id)], classes = [], attributes = {}); +let uniquePlaylistDiv = createElement('div', children = [playlistName, playlistSongs, playlistTotalDuration], classes = ['playlistShell'], attributes = {}); +const eventListeners = {} +return uniquePlaylistDiv; +} +//generates the playlists list +for(let playlist of player.playlists){ +let playlistDiv = document.getElementById('playlists'); + playlistDiv.append(createPlaylistElement(playlist)); +} +/** +* 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 = {}) { +let newEl = document.createElement(tagName); +for(let child of children){ + if(typeof(child) === "string"){ + child = document.createTextNode(child); + } + newEl.append(child); +} +for(let cls of classes){ + newEl.classList.add(cls); +} +for(let attr in attributes){ + newEl.setAttribute(attr, attributes[attr]); +} +return newEl +} +/** +* 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) +//song duration color functionlity +let songDuration = document.querySelectorAll(".songShell span"); +let SongDurationArray = Array.from(songDuration); +for(let i = 0; i < SongDurationArray.length; i++){ +let redAmount = player.songs[i].duration; +SongDurationArray[i].style.color = `rgb( ${(redAmount * 0.8533) - 120} , ${420 - (redAmount * 0.8533)} ,0)`; +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 89d3d6d6..5605b3c2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -11,6 +11,9 @@ notChosen.style.backgroundColor = "rgba(0, 0, 0, 0)"; } document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; + if(songId < 7){ + setTimeout(()=>{playSong(Number(songId) + 1);},getSongObjectById(songId).duration * 1000); +} } /** From a08195cc161890f3075883e43e2e6a5a855b157d Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 07:10:15 +0300 Subject: [PATCH 08/15] Ignore index.new.js Use html source with index.js and not index.new.js --- index.new.html | 72 ++++++++++++------ index.new.js | 188 ----------------------------------------------- scripts/index.js | 17 ++++- 3 files changed, 61 insertions(+), 216 deletions(-) diff --git a/index.new.html b/index.new.html index 73df68ee..c9c22a8d 100644 --- a/index.new.html +++ b/index.new.html @@ -6,30 +6,54 @@ - + -
+

Awesome Player!!!

+

Add a new song

-
-
- - - - - -
-
- -
-
-

Songs

-
-
-

Playlists

- - -
-
- - \ No newline at end of file +
+ + + + + +
+ + +
+
+ +
+
+
+

Playlists

+
+ +
+
+ diff --git a/index.new.js b/index.new.js index b827ca3b..e69de29b 100644 --- a/index.new.js +++ b/index.new.js @@ -1,188 +0,0 @@ -/** - * 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) { - let otherSongs = document.getElementsByClassName('songShell'); - for(let otherSong of otherSongs){ - otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)"; - } - document.getElementById(songId).style.backgroundColor = "red"; - console.log(songId); - if(songId < 7){ - window.setTimeout(function(){playSong(Number(songId) + 1);} ,getSongObjectById(songId).duration * 1000); - } -} -//adding the event listener to the songs list -let songSlist = document.getElementById('songs'); -songSlist.addEventListener('click', (e) => {if(e.target.className === 'play-button'){ - console.log(e.target.parentElement); - playSong(e.target.parentElement.id) - } - else if(e.target.className === 'remove-button'){ - removeSong(e.target.parentElement.id); - } -}); -/** - * 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) { - let removedSong = document.getElementById(songId); -removedSong.style = 'display: none'; -for(let playlist of player.playlists){ - for(let i = 0; i <= playlist.songs.length; i++){ - if(playlist.songs[i] == songId){ - playlist.songs.splice(i, 1); - console.log(playlist.songs); - } - } -} -let removePlaylists = Array.from(document.querySelectorAll('.playlistShell')); -for(let playlist of removePlaylists){ - console.log(playlist); - playlist.style = 'display: none'; -} -//generates the playlists list -for(let playlist of player.playlists){ - let playlistDiv = document.getElementById('playlists'); - playlistDiv.append(createPlaylistElement(playlist)); - playlistDiv.style = "display: block"; -} - -} - -/** -* Adds a song to the player, and updates the DOM to match. -*/ -function addSong({ title, album, artist, duration, coverArt }) { -let SongTitle = createElement('h1', children = [title], classes = ['songTitles'], attributes = {}); -let songAlbum = createElement('h2', children = ["album: " + album], classes = [], attributes = {}); -let songArtist = createElement('h2', children = ["by: " + artist], classes = [], attributes = {}); -let songDuration = createElement('span', children = [duration], classes = [], attributes = {}); -let songCoverArt = createElement('img', children = [], classes = [], attributes = {src: coverArt}) -let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = {type:'button'}); -let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = {type:'button'}); -let uniqueSongDiv = createElement('div', children = [SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton], classes = ['songShell'], attributes = {id: `${generateId()}`}); -const eventListeners = {} -let songsDiv = document.getElementById('songs'); -songsDiv.append(uniqueSongDiv); -} -/** -* 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) { -let newSongObject = { -'title': document.getElementsByName('title')[0].value, -'album': document.getElementsByName('album')[0].value, -'artist': document.getElementsByName('artist')[0].value, -'duration': document.getElementsByName('duration')[0].value, -'coverArt:': document.getElementsByName('cover-art')[0].value -} -console.log(newSongObject); -addSong(newSongObject); -} -let addButton = document.getElementById('add-button'); -addButton.addEventListener('click', handleSongClickEvent); -/** -* 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 }) { -let SongTitle = createElement('h1', children = [title], classes = ['songTitles'], attributes = {}); -let songAlbum = createElement('h2', children = ["album: " + album], classes = [], attributes = {}); -let songArtist = createElement('h2', children = ["by: " + artist], classes = [], attributes = {}); -let songDuration = createElement('span', children = [secondsToMinutesConvertor(duration)], classes = [], attributes = {}); -let songCoverArt = createElement('img', children = [], classes = [], attributes = {src: coverArt}) -let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = {type:'button', id: `playButton${id}`}); -let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = {type:'button'}); -let uniqueSongDiv = createElement('div', children = [SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton], classes = ['songShell'], attributes = {id: id}); -const eventListeners = {} -return uniqueSongDiv; -} -for(let song of player.songs){ -let songsDiv = document.getElementById('songs'); -songsDiv.append(createSongElement(song)); -} -/** -* Creates a playlist DOM element based on a playlist object. -*/ -function createPlaylistElement({ id, name, songs }) { -let playlistName = createElement('h1', children = [name + "-playlist"], classes = [], attributes = {}); -let playlistSongs = createElement('h2', children = ["amount of songs: " + songs.length], classes = [], attributes = {}); -let playlistTotalDuration = createElement('span', children = ["duration - " + playlistDuration(id)], classes = [], attributes = {}); -let uniquePlaylistDiv = createElement('div', children = [playlistName, playlistSongs, playlistTotalDuration], classes = ['playlistShell'], attributes = {}); -const eventListeners = {} -return uniquePlaylistDiv; -} -//generates the playlists list -for(let playlist of player.playlists){ -let playlistDiv = document.getElementById('playlists'); - playlistDiv.append(createPlaylistElement(playlist)); -} -/** -* 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 = {}) { -let newEl = document.createElement(tagName); -for(let child of children){ - if(typeof(child) === "string"){ - child = document.createTextNode(child); - } - newEl.append(child); -} -for(let cls of classes){ - newEl.classList.add(cls); -} -for(let attr in attributes){ - newEl.setAttribute(attr, attributes[attr]); -} -return newEl -} -/** -* 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) -//song duration color functionlity -let songDuration = document.querySelectorAll(".songShell span"); -let SongDurationArray = Array.from(songDuration); -for(let i = 0; i < SongDurationArray.length; i++){ -let redAmount = player.songs[i].duration; -SongDurationArray[i].style.color = `rgb( ${(redAmount * 0.8533) - 120} , ${420 - (redAmount * 0.8533)} ,0)`; -} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 5605b3c2..33d5abb7 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -11,11 +11,20 @@ notChosen.style.backgroundColor = "rgba(0, 0, 0, 0)"; } document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; - if(songId < 7){ - setTimeout(()=>{playSong(Number(songId) + 1);},getSongObjectById(songId).duration * 1000); + console.log(songId); + if (songId < 7) { + window.setTimeout(function() { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); + } } -} - +let songSlist = document.getElementById('songs'); +songSlist.addEventListener('click', (e) => { + if (e.target.className === 'play-button') { + console.log(e.target.parentElement); + playSong(e.target.parentElement.id) + } else if (e.target.className === 'remove-button') { + removeSong(e.target.parentElement.id); + } +}); /** * Creates a song DOM element based on a song object. */ From 93c20adfc9ea4732de45926236d1dcfeae9c1832 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 07:22:42 +0300 Subject: [PATCH 09/15] Added sound and remove icons To createSongElement --- index.new.html | 2 +- scripts/index.js | 21 +++++++-------------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/index.new.html b/index.new.html index c9c22a8d..71d2ece8 100644 --- a/index.new.html +++ b/index.new.html @@ -9,7 +9,7 @@ -

Awesome Player!!!

+

New Mp3 Player

Add a new song

diff --git a/scripts/index.js b/scripts/index.js index 33d5abb7..c38c0054 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,19 +12,9 @@ } document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; console.log(songId); - if (songId < 7) { - window.setTimeout(function() { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); - } + } -let songSlist = document.getElementById('songs'); -songSlist.addEventListener('click', (e) => { - if (e.target.className === 'play-button') { - console.log(e.target.parentElement); - playSong(e.target.parentElement.id) - } else if (e.target.className === 'remove-button') { - removeSong(e.target.parentElement.id); - } -}); + /** * Creates a song DOM element based on a song object. */ @@ -34,8 +24,10 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { let songArtist = createElement('h4',["Artist: " + artist]); let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); let songCoverArt = createElement('img',[],[],{src: coverArt}) - let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt],['songShell'],{id: id}); - console.log(songElement); + let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = { type: 'button', id: `playButton${id}` }); + let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = { type: 'button' }); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton],['songShell'],{id: id}); + //console.log(songElement); songElement.setAttribute('onclick', `playSong(${id})`) return songElement; } @@ -51,6 +43,7 @@ function createPlaylistElement({ id, name, songs }) { let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]); let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]); let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']); + const eventListeners = {}; return playlistElem; } for(let playlist of player.playlists){ From e2f8733fa0ad0332d72a91beb6f655503caf034b Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 07:46:23 +0300 Subject: [PATCH 10/15] Added remove and add functions --- scripts/index.js | 55 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index c38c0054..bee2f1af 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,7 +12,9 @@ } document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; console.log(songId); - + if (songId < 7) { + setTimeout(function() { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); +} } /** @@ -24,11 +26,12 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { let songArtist = createElement('h4',["Artist: " + artist]); let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); let songCoverArt = createElement('img',[],[],{src: coverArt}) - let playButton = createElement('button', children = ["🔊"], classes = ["play-button"], attributes = { type: 'button', id: `playButton${id}` }); - let removeButton = createElement('button', children = ["✖"], classes = ["remove-button"], attributes = { type: 'button' }); - let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton],['songShell'],{id: id}); - //console.log(songElement); - songElement.setAttribute('onclick', `playSong(${id})`) + let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); + let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); + // console.log(songElement); + const eventListeners = {} + // songElement.setAttribute('onclick', `playSong(${id})`) return songElement; } for(let song of player.songs){ @@ -43,7 +46,6 @@ function createPlaylistElement({ id, name, songs }) { let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]); let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]); let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']); - const eventListeners = {}; return playlistElem; } for(let playlist of player.playlists){ @@ -77,3 +79,42 @@ return newEl } createSongElement('h2', [player.songs[0].title], "songTitles"); +function removeSong(songId) { + // Your code here + let removedSong = document.getElementById(songId); + removedSong.style = 'display: none'; + for (let playlist of player.playlists) { + for (let i = 0; i <= playlist.songs.length; i++) { + if (playlist.songs[i] == songId) { + playlist.songs.splice(i, 1); + console.log(playlist.songs); + } + } + } + let removePlaylists = Array.from(document.querySelectorAll('.playlistShell')); + for (let playlist of removePlaylists) { + console.log(playlist); + playlist.style = 'display: none'; + } + //generates the playlists list + for (let playlist of player.playlists) { + let playlistDiv = document.getElementById('playlists'); + playlistDiv.append(createPlaylistElement(playlist)); + playlistDiv.style = "display: block"; + } + +} +function addSong({ title, album, artist, duration, coverArt }) { + // Your code here + let SongTitle = createElement('h1',[title],['songTitles'],{}); + let songAlbum = createElement('h2',["album: " + album],); + let songArtist = createElement('h2',["by: " + artist]); + let songDuration = createElement('span',[duration],); + let songCoverArt = createElement('img',[],[],{ src: coverArt }) + let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); + let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton],['songShell'], { id: `${generateId()}` }); + const eventListeners = {} + let addingSong = document.getElementById('songs'); + addingSong.append(songElement); +} \ No newline at end of file From 5d319920557943937a511789ae364f33c927e7db Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 07:50:43 +0300 Subject: [PATCH 11/15] Another 2 function for the add button --- scripts/index.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index bee2f1af..2b8a5b8d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -117,4 +117,29 @@ function addSong({ title, album, artist, duration, coverArt }) { const eventListeners = {} let addingSong = document.getElementById('songs'); addingSong.append(songElement); -} \ No newline at end of file +} +function handleSongClickEvent(event) { + // Your code here + let newSongObj = { + 'title': document.getElementsByName('title')[0].value, + 'album': document.getElementsByName('album')[0].value, + 'artist': document.getElementsByName('artist')[0].value, + 'duration': document.getElementsByName('duration')[0].value, + 'coverArt:': document.getElementsByName('cover-art')[0].value + } + console.log(newSongObj); + addSong(newSongObj); +} + +let addButton = document.getElementById('add-button'); +addButton.addEventListener('click', handleSongClickEvent); + +let songSlist = document.getElementById('songs'); +songSlist.addEventListener('click', (e) => { + if (e.target.className === 'play-button') { + console.log(e.target.parentElement); + playSong(e.target.parentElement.id) + } else if (e.target.className === 'remove-button') { + removeSong(e.target.parentElement.id); + } +}); \ No newline at end of file From fdaa7f5f72b9c9bc0a906e255e3c098636ce1663 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 08:04:29 +0300 Subject: [PATCH 12/15] add an eventListener --- scripts/index.js | 46 +++++++++++++++++++++++++++++++++------------- 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 2b8a5b8d..ce64f12e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -30,7 +30,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); // console.log(songElement); - const eventListeners = {} + const eventListeners = {}; // songElement.setAttribute('onclick', `playSong(${id})`) return songElement; } @@ -46,6 +46,7 @@ function createPlaylistElement({ id, name, songs }) { let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]); let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]); let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']); + const eventListeners = {} return playlistElem; } for(let playlist of player.playlists){ @@ -67,6 +68,9 @@ for(let playlist of player.playlists){ function createElement(tagName, children = [], classes = [], attributes = {}) { let newEl = document.createElement(tagName); for(let child of children){ + if (typeof(child) === "string") { + child = document.createTextNode(child); +} newEl.append(child); } for(let cls of classes){ @@ -77,10 +81,11 @@ for(let attr in attributes){ } return newEl } -createSongElement('h2', [player.songs[0].title], "songTitles"); +//createSongElement('h2', [player.songs[0].title], "songTitles"); +document.getElementById("add-button").addEventListener("click", handleAddSongEvent); function removeSong(songId) { - // Your code here + let removedSong = document.getElementById(songId); removedSong.style = 'display: none'; for (let playlist of player.playlists) { @@ -106,15 +111,15 @@ function removeSong(songId) { } function addSong({ title, album, artist, duration, coverArt }) { // Your code here - let SongTitle = createElement('h1',[title],['songTitles'],{}); - let songAlbum = createElement('h2',["album: " + album],); - let songArtist = createElement('h2',["by: " + artist]); - let songDuration = createElement('span',[duration],); - let songCoverArt = createElement('img',[],[],{ src: coverArt }) - let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); - let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); - let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt, playButton, removeButton],['songShell'], { id: `${generateId()}` }); - const eventListeners = {} + let SongTitle = createElement('h2',[title],['songTitles']); + let songAlbum = createElement('h3',["Album: " + album]); + let songArtist = createElement('h4',["Artist: " + artist]); + let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); + let songCoverArt = createElement('img',[],[],{src: coverArt}) + let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); + let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); + const eventListeners = {}; let addingSong = document.getElementById('songs'); addingSong.append(songElement); } @@ -134,6 +139,11 @@ function handleSongClickEvent(event) { let addButton = document.getElementById('add-button'); addButton.addEventListener('click', handleSongClickEvent); +function handleAddSongEvent(event) { + // Your code here +} + + let songSlist = document.getElementById('songs'); songSlist.addEventListener('click', (e) => { if (e.target.className === 'play-button') { @@ -142,4 +152,14 @@ songSlist.addEventListener('click', (e) => { } else if (e.target.className === 'remove-button') { removeSong(e.target.parentElement.id); } -}); \ No newline at end of file +}); +document.getElementById("add-button").addEventListener("click", handleAddSongEvent) + + +//song duration color functionlity +let songDuration = document.querySelectorAll(".songShell span"); +let SongDurationArray = Array.from(songDuration); +for (let i = 0; i < SongDurationArray.length; i++) { + let redAmount = player.songs[i].duration; + SongDurationArray[i].style.color = `rgb( ${(redAmount * 0.8533) - 120} , ${420 - (redAmount * 0.8533)} ,0)`; +} From 87949d0b52ff7bacca9737f2d206c6bda6ffdce9 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 08:07:22 +0300 Subject: [PATCH 13/15] deleting and sounding a song is working --- scripts/index.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index ce64f12e..73fd63c5 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -16,7 +16,15 @@ setTimeout(function() { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); } } - +let songSlist = document.getElementById('songs'); +songSlist.addEventListener('click', (e) => { + if (e.target.className === 'play-button') { + console.log(e.target.parentElement); + playSong(e.target.parentElement.id) + } else if (e.target.className === 'remove-button') { + removeSong(e.target.parentElement.id); + } +}); /** * Creates a song DOM element based on a song object. */ @@ -144,15 +152,7 @@ function handleAddSongEvent(event) { } -let songSlist = document.getElementById('songs'); -songSlist.addEventListener('click', (e) => { - if (e.target.className === 'play-button') { - console.log(e.target.parentElement); - playSong(e.target.parentElement.id) - } else if (e.target.className === 'remove-button') { - removeSong(e.target.parentElement.id); - } -}); + document.getElementById("add-button").addEventListener("click", handleAddSongEvent) From c785be357e98e44ee57b63ed4aa82eb6f6c77d30 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Sun, 19 Sep 2021 08:54:59 +0300 Subject: [PATCH 14/15] tesk is done --- index.new.html | 35 ++++------------------------ scripts/index.js | 59 +++++++++++++++++++++++------------------------- 2 files changed, 33 insertions(+), 61 deletions(-) diff --git a/index.new.html b/index.new.html index 71d2ece8..b277531d 100644 --- a/index.new.html +++ b/index.new.html @@ -13,47 +13,22 @@

New Mp3 Player

Add a new song

- - - - +
+
+
+
- +

Playlists

-
diff --git a/scripts/index.js b/scripts/index.js index 73fd63c5..1a85fc00 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -13,18 +13,10 @@ document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)"; console.log(songId); if (songId < 7) { - setTimeout(function() { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); + setTimeout(()=> { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000); } } -let songSlist = document.getElementById('songs'); -songSlist.addEventListener('click', (e) => { - if (e.target.className === 'play-button') { - console.log(e.target.parentElement); - playSong(e.target.parentElement.id) - } else if (e.target.className === 'remove-button') { - removeSong(e.target.parentElement.id); - } -}); + /** * Creates a song DOM element based on a song object. */ @@ -37,9 +29,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); - // console.log(songElement); + console.log(songElement); const eventListeners = {}; - // songElement.setAttribute('onclick', `playSong(${id})`) + return songElement; } for(let song of player.songs){ @@ -72,8 +64,9 @@ for(let playlist of player.playlists){ * 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 = {}) { +function createElement(tagName, children = [], classes = [], attributes = {},eventListeners = {}) { let newEl = document.createElement(tagName); for(let child of children){ if (typeof(child) === "string") { @@ -89,11 +82,9 @@ for(let attr in attributes){ } return newEl } -//createSongElement('h2', [player.songs[0].title], "songTitles"); document.getElementById("add-button").addEventListener("click", handleAddSongEvent); function removeSong(songId) { - let removedSong = document.getElementById(songId); removedSong.style = 'display: none'; for (let playlist of player.playlists) { @@ -109,16 +100,15 @@ function removeSong(songId) { console.log(playlist); playlist.style = 'display: none'; } - //generates the playlists list for (let playlist of player.playlists) { let playlistDiv = document.getElementById('playlists'); playlistDiv.append(createPlaylistElement(playlist)); playlistDiv.style = "display: block"; } + } function addSong({ title, album, artist, duration, coverArt }) { - // Your code here let SongTitle = createElement('h2',[title],['songTitles']); let songAlbum = createElement('h3',["Album: " + album]); let songArtist = createElement('h4',["Artist: " + artist]); @@ -131,8 +121,13 @@ function addSong({ title, album, artist, duration, coverArt }) { let addingSong = document.getElementById('songs'); addingSong.append(songElement); } +/** + * 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 let newSongObj = { 'title': document.getElementsByName('title')[0].value, 'album': document.getElementsByName('album')[0].value, @@ -147,19 +142,21 @@ function handleSongClickEvent(event) { let addButton = document.getElementById('add-button'); addButton.addEventListener('click', handleSongClickEvent); +/** + * Handles a click event on the button that adds songs. + * + * @param {MouseEvent} event - the click event + */ function handleAddSongEvent(event) { - // Your code here } +let songSlist = document.getElementById('songs'); +songSlist.addEventListener('click', (event) => { + if (event.target.className === 'play-button') { + console.log(event.target.parentElement); + playSong(event.target.parentElement.id) + } else if (event.target.className === 'remove-button') { + removeSong(event.target.parentElement.id); + } +}); - - -document.getElementById("add-button").addEventListener("click", handleAddSongEvent) - - -//song duration color functionlity -let songDuration = document.querySelectorAll(".songShell span"); -let SongDurationArray = Array.from(songDuration); -for (let i = 0; i < SongDurationArray.length; i++) { - let redAmount = player.songs[i].duration; - SongDurationArray[i].style.color = `rgb( ${(redAmount * 0.8533) - 120} , ${420 - (redAmount * 0.8533)} ,0)`; -} + \ No newline at end of file From 558b60372f15fa032e91dda52123a6ab24e03379 Mon Sep 17 00:00:00 2001 From: MaorKurztag21 Date: Tue, 21 Sep 2021 21:19:01 +0300 Subject: [PATCH 15/15] Add song function works --- .vscode/settings.json | 2 +- images/icon.png | Bin 33746 -> 0 bytes scripts/index.js | 25 ++++++++++++------------- 3 files changed, 13 insertions(+), 14 deletions(-) delete mode 100644 images/icon.png diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a2913..a0de46ff 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5504 } \ No newline at end of file diff --git a/images/icon.png b/images/icon.png deleted file mode 100644 index 6b01e2f4c591359a8b5666514614ac1c79115786..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 33746 zcmeEvcT`hN*YBJpgpMG+R{;woG$~3^P(VenH>z|I66u|Qir4@V1*9q}cCaEn7ElD~ zf+9lbAT9I&f!vAuJTGti{O(=%PhBeGIWv3q{C1f=d(T;(wc2UQ%^}7C0N^$^GuaIQ z3N}%I4GVuv1vbsYAM8Z4Lp}g-@-zP+;98mp06G%xdk^{^wAi8NNbpp3a3UOaRt@wd z!rlOEGz=s@w{+bT{OJB~-*O#b=!vzEcs0L`L61-h;YP!0*IJ`PeU0ntCQ1J=!@^uJQ@$!-X zN#rj&CeA*N-tI(ScY>D;ldi*2f}gLxoE&qazkmH&mnZS>iM)J%VFyvf1v(IMYN~kL ze;VZE`1cs1pZD<}tT{R2oR2$uI(zy0z;SB-aU9W&;7jmvBm9>s|9<^nCx$Yyu=soK z|H!YW=YO2q$9IcAgy0vX|8b#d5b?>iu`|Cy|25=KZNs7l$dY+ zEAP&M?*C;N^Ucp;KUCqTgf_yp>KS`GJNOd3_Yw%l4Ss5w)n5?G7#qtdA8_|_A_VxX z-iZ6x-v1EwKL|OSIQTjnKvmRK!Rx}`d)4t!5B1d5*5aW~;+GNm+4Em$SP-1tU4s5W zLrq;pO=B-!TThcoW-VUrZyL*b{wob=I!+G04*x4E%lj^)ZoZt=FayHP|i2F~EmyPxxl4#$`EVRHX}JH>w>^KVm`x%)uX3|gkLP;q~_u|3Ww{`u)& zFOIwaa7RQ3Zy#r-vFXeGWo>`^ufN?BbIcE;)pKxUIx+)CrY$%-ZN&Z4(|@q__sCzv z-2Yz%_>=y!;s1S(05@l^|H+_!lKRo>zZ3BxxcCM*csp-$g*x#YGyh5OpGW*F<&8L| z&p+<|&ocP=^q)oZm$Lr5C^s@)nI2RF$dbbk_|-Pz{_WX6X8zg#AXA*j{eJY#9% zI5p&@_5-Oroa8^5%$2)z}aBEmX?Or zM%=$X{?`#!?t#w751P0`)AeC0q?Q_->c^meee)kj9{R5%m%aHl@~5ztZR0;=`SU3Z z5@39S`#V7SXEFb61^=HL|5(!hXTrlE zuHQnmyu%;3mZS08_8+)@3(@ipf8bh<#&6qy;QB2@%RBsmYdIRfZU2Gmw-7Dw@CUBt zX#BSQ2d>{jw7kO~xR#^w+x8#0ehbm^4u9ZUj>d1>f8hEpM9Vw;fonM$zit14>$eas z@9+n%g) ze&-heKj=G~bRZIb3@GDhw%Y=L;8g&SP69B;fIkNT@WTV}-5vnFWB`N-33laM0oaZ= zH`%l|uyy!bK(V!Rxu#|B? zmffjBGYxX>*XYT}FtUSX26G$T9a%~K%s21s1v1dhpo&yZo(PX9<#R(9CLE-`*$O#~ zYm3C%YvTEIFgjQrw&W}8XbyslS2K~TAPyCQl`>yy-L5CTI(qD2q*#@*q`)zXNU`oW zEjXTQEH4Tg%%r}=Vfz$JrwN!?xl+W^I0tM5ZHQCk7P4NgfEkvgxtB9Mnx?tLNB$bw zcp22a9|Garp{z7c>H}AHD3R85dHP-QIQh%loJsw{+<2Vy_^Oix5CN`kEjXU}Mh?y~ zBeb}mVns>oQSR`V{dAp`#!hvn5XiyO=80V3R>-SbUc)_%H57Srd+fF~4?rn~E^=_7 z7bOaI>j^FDb-9kzqT9KfHmte3AC$7TanMyhIB$?x313gIo3|jJAm1Xp$Hw?mY$-nE zu^ZO@C*R1TjqVk1DMNIGXfMx~`qxWGiboon6bvh#F~*YimYxq+Au14As8~~zlggZQ z{`m9WUv@HIX-=FE2h~_rpc-JJ`Ih6YC4VTAJoc5>8JN8(qsC!vIYY&g`(oTM50FQw zaEab0_a%AY`s!5XWr=vAm zCssZ3(Sgcb^nzMzZm4?owsCENx zW?!eZDA$yeY(}jhnOiuz7UhE^x8wwV~)s72Sy>&Eh4FG{N2{mU;r}K+~Etf`9zJrQxWX znf$$Y6WYFAszvRc@krKnYkDmh#cVb;UbA)#DHVk#cxE$}g!Spn+!2}{@hDsN%0s0{ z4X75S#!xMail{9sGryPB)W@%>=#R-4nt6Cq9X#89p7EH>KrY5c?>)gm_Q zTFzp)`W79?xJgG_kP^S$P*P&-Q)KLd_m?qU0W2vyzWsDrEbW%Q?NCxfe?NHxWG~y; z0Vvy?XS^ayN4l6AZ=3!?x(xZSJ@Xn^P2=dY<35YpdSVF)Y&1FIp~R{g9SJPyp3itD zpksC3*2h1);zxcAL3w{25B5Sb8!0U>&y?Mi%;eVD@WHuk$VvpLF9(2AKjDnpS3;fx=5% zRBnnSq{-)vBVJoz5dmVQ>xf zFWx{AH zld$_3dtRJ2Rt&fwrh7yhqR;5UXI`@7L#M(_>cE{PHW1E|_T9~FC5S`Lh$2{{=d9#f zl7+0(+~vA~>m=OgAUk-UM_h9o>Sx$1oyb-&2|$HnjOt{7uQN zT{cS!<{P9D0<@P*JpruImUT;@l6&2rNLL9#^Hvqe%P^YfBx1E%)@sEA z7BQ#}ts@%99%w~Zl2BZvC;Ic2v2^6XPWFpEr*JVw+O%LeD6JnCF`j7-kWRGz1F=-G{@{wd~@?G=CabOXO)=Cikm#P(`%=u ztgN40=<1NZ6<8~+Y%u+-dw+&16aj-M0txU$o+We0_-fwd_|&=?@1yssS`;6GebrNm z4;Fa!Sq&fDL|PIozjA-|QjaP}z*5`zI!ji#FnK5^{K4~OEsM9d?Xfe(hX}n&JCxTi z5%uM%z3@*G7O{)ly>{nm>9%4v>!w@2xctu|JN{VvSHL*K) zWkn3H+Gmz@mxt$m!R*O-Ybd;hm*>^lA~^xCMUK;%9V0E*iv>uT5Fv5sm+S+C8OD*U zlI-rMPRnX)^FLc}ynXGfsk?cz5>Y7{-P!cp6%LG5f=PzkJ1c5;TQ5DZ%bb{uR!%Bu zbif0Dzwum_*2wqu@zG!I?2j7nwtpQMb(Y_LULb0)k=2U6< zMtNuq#EBp;Xh3LNx*ZF>;Zi*IkfJf(13Rp?)*#H#Cpc7TX`mi|Z&j(6oq1v5KuA>) zz3^%dif9f^rX9KhY#~h>NrlUt6$*YGZ$Dx3*<(eN?o;-eG-JGhFQ+%yT3e0B3I-U0RM?fAGwaAVHvXRF7X3)I1ywJ1f?f(Ha| zE$~7V7^2#T&6LwKvB;}uckw=AuP%sU8WrEXJb@3lrt8?+JamK(s89)l9dYIr_#8ZL zC`Bugzupu&X_+C=an>+o{VS=b_FWh^FF7}_=n5?BdvK@uDHyv5)!1K|i`39%hxY9} zAHLV~*bN%CxMFLR{%p+H>kbc|>I_lbl$Ms&kt3h92jG6b6>|aZMeEUIkVP0RjzCnW z7d8t%EH!Ai%DJo7ZsMA&&o-0B?c-8TDDkAJVXIz7Xh`PX5#m>b9q`1O~w!l#ArcN)EM`E|cEd+;ImQWTN?a z`s`&zueqVSm%HU7AS;I?$#;~KMl?V}0j*4sR@%Y3W^MO7zUph6@IKh;lGPI{!U}nnPDB5*% zzwK{bMQHm>dl;Z`o4-1FE8ej%br41-5*{%)76C5OcW47xdi~s^^!3oIG_4-@FKEo+ z-I2z2S&4T?GRQV%E^y5OB=7)K{;%Lpd$}QIKiV;Uto3@IOO)uI%X?@V-CH7>l%txj z20mU<60CsE;?ROyR}x~Cju3gM-2E?YovPhlclWQX))!N>kh^m>>yc`BMf=cv#wLTBlr zC>^9Y-Q0aEOZ)b|UXk8!^d8i`Kv5oP7OUhPLo>Bb=7aP3FrWU5EX{g3)5YW6@2x{t zLHGHCPOUB6k8UDXUu20Jh>v^@)mqL6DJ2vP7`IcE&_)~dIH^fcAyW{m0#nB2NWmKC zY2l1nsn^>neP3mR=9mXkbctiofbU=>OCdUogBmsyo(iof8G0`E(1osOXUo-80KEb%>naeU;0Cxq=N zNMzKP)h>FRLFz&(P2F^6l;6Q<-oI}h+2GR)oRL;LCQzUFd~)AcPEyTwgB?|mO*aTZ z(i-8sy-)T{pMG=>3=VLS!H!VM6xX607!qY;^wQ&rc~J zkJRk(v?Lhoe@hBYuJ?&MfrpE7UGzw-vONY8JG!Kip-7khJ1;g^ihUnc2k>P}E$RX^ zmXBDYpmp?Hjf@;rnSb~PCiAjWkxR3Zgj|UA{$h*H+8Dbu%PQq# z`{S_#@mONjQUy?s8|_RX`1G-xIr}LDtLqG^dOmlx@&4^?gTfdCC7-v{hVJhX?*tlJJW_nj+Lv_z(OQ*in4x`Bj zDbQ<9t|OQHd~@WZ=R*UB$}%49yZ>dXXV0^bc4l9rw)j4> zE_lNrEPj40LHx31hu)G7+UTSpkcJx#P7E0Hqr4W^qGdkXmBsGV%Luv}>zZ-B`-|W+ zoJ~bvPKL{5!mTO4Vfuzc-zzTky-y_^Z88WE2Vz`Rq%T*zMYD!s$XL%1>C$GHV~w`? z8ssNfSn7Ygog>uv*mt#L?ZX?B1^ok|UaPnoTw8kh@%U&KUrCW z+PfPRBQM{~twLvQGt`|7TCWnEa51jdwVQtW8P0acY{mLu?c+BCCi|{0@NyaRl#L%& zOs9H78l4UBRCEAsPc){ul0|D&M8TDZ2bHY`2CwIM@}~-^9_{X)Jj57qd}dgZ80xAt z_sEN5uGC>sOER!>OLb_s2RwL1D_wpHoFhcD9xxXYu{N(h2(s~7XyNFk_K&H99$!sn z=eftD7;i(@Z=A=BY){&?j;GeuNd)6WiXlmz>&c&Q+b}S3K4rYHkx31OU;Dv1DQV#l zX&XC`D&CjFA&KW7vH^cc{`F46vyY4Eqy_2Wylf)ONEuXm8Uw(!= zw6*2CmT&GMi z&F@0*fPToYH&irhC5pmJk?p?>ZSB+7_E)!0pZ`q#%nx;x+*fYdm|u{dVUhYifV=j7 zt@vxMj}B%&ipGwL#$mh-ywRGcQZ_9R9t@A%qIFItd%;6+iQWh2hois$DHY+x$A*uvKK@;Vv39W2)86lRnE)wF~^ce*Y-?K9sg`bI3jLy ze}Cf(dp=K2p}g^N7F>bfXja$&hIggacBAcy4to`Eth(S<Ar%&e0Oa zBX{&jC!p`y_lVDG6v49x)&wb_?OUc^1k_Ep`9QNd7c02-b8#ShYG!D{3nk$dRqk|| z80nJx?3<6BBwcN=nR764RMe=hDn_z8M?5K6&~)0s=jR|$kh;D95*I0Q(7NEvNo}-|aSt7ukas~l ztCc^J_o+J~A0@1F#t9T3d~9{ov;IbZM|gfvUJl$dFxK{r^ZPp$+R$mfD=hMqll-LS;&YiO7x-(B55_~rA~ul$qUB@>y+ zwS7)QZKX9kIZ8_2OnA6&^J?&@G0}_`{r-j)Q>MzbHrN(sPvls-7Qp(%ZfBA=52+-Q zrAGSJYH+SxE=)4LXTyfU!%weTa0)%?e5~}DI^gKLadKUGXvR^8z#4_-#L*9Na)&Rc zPaTVrX?Mr5-8;slw^<3E!=*ors~hREl9~IdBj`Y{_&z+O0p)m2Cd(iu z_mj4hy5?!o!_Y`lc6>^&fC2q&4)R;LAsq2?MLuYO8H|uFVXrw-*HUl(HR|;7(4&aw zq;OrSudcqQ_@L)k6Fbv)dGsZ*C|WGN4{Fw?P}3!Qub-T`<6ug`y5JkD)gy!|L}9HF zz2XA|IJY$G(|D^QW;mM-CzMY=dK7r%+oMMg1-o!;S*wC3ZMG}kP~*DGz4?2>h>tV4 zbKF`C=B18-Vf*njv_q9J2UUtHuGP)<<|aYG3x&>=9h}I{B=bhBV5z(q_#E?WtLWhc z&-7IGu2kCQjp+m!b$vspp#(}WdEMEJ!xT~bVxO(OB4920Bdx#REK;t6HRwbhpHh4SpH1vs7g3YMiOGnNvwo z4w^COb`M1xed^7FcJv;6J^|9$=rsj5ytzoBmMh{SI=8P|sI2uLWY~$H(u^M8Fe0uY zDt7syPpZ18Ww$uE=hYAODgVQu0qF@F>ER;=GoAEfG~9q+jyWbh4H|Dm&-bS$n2sJ! zfNY*5MdSC3AL$nZFhXoif+2@7G?bp6T94NZs>b?vhNJ0QcJcddXN4l9fJ9Per&%!dSAC{pm^LUMUckNf(%| zWfDQMY@QGjt5op-n)exGg^qTQC=BQB9d(6*sjceVO6G%Gq!$QPqN?;qGb6owN2Q@( zhoLEsi7UDG@SX+UGgU7BUeTemjX(V1^v4y`3 z6Ku>x7Ey$9e)&hU49@8^7WLQVDM|j(I(LQBohz108N5;$p@Y& zVBLumaNsb`=JOA{x?{~FYp%_ahiDdLS{ z;FdTz5;<)&@N0G}a2wVFeB4)n4%Cl0yupP5?Lf{CiMM8~Xk*5-a8kGfR%KhSPnrSA zob<{$$TpU=yXOI9e96p!;~)=06r$?)NBvmjr7Eb>eVSM!ws;JA75QTg3o{T;l*?p! zw4?cT6N`~r5Eu0@MencfW1v6r$McCK276k+^-okLd??dKvJVkn6oa$4rr_6%2<2cF z?jaH{8_r1?|BJ9Bxkowao96B^(j^WOOl$Tn^woHP49smE;U6%b6Cj<1$Aa|_5j^%_ z|Hhy6xkwPjg&l{{_NcrMK|jg6!64Ko`5G`=k8oTD$*7G(51d{^DxWrBwMNNLZlhdcBkh<-{W$wEeRdng>n9s9BOnNJkTP$cpN!70pkzay zT6oL&5B(VJ>4i4H2sDa-9CX0nys*5Kd5A!{t ze?9yP1rQ=XEiF9=bl3tv|Ap!l)YL7lC>bb=&9Jl;f^hx<(wT!?3DZsls0WI9Z-42* z08CpgdK^Q^oF(DeNtI-dU*hc)C7p!2J>J9utS}YG{dCr!!a(v&6RToBAEI93A#J6s zw!h)C>4(*<1Giy5F(xeef)fBHZ^e<1eyTr3GKeUm#dkklLEewVBcmAG5$j)C&qm~` zyV4BUNV%Y2@0a?vai<|uw^RU1MxhkzEl*|t%W|Z_7?^P9A+3#!@c%`4ZsT|=IDeOm zN9J%Fl$C2>}=q590!0hstuWuX+qR6q$cd9x3R zH!)JwMH7{&S(9)fTR+@BZ$M5ykZ~Ni>7>KzaoKiHpdhG;?qG$=DepG9O8V$jrIHvB ztI+_a(3zm+=gupi0V13aP8h%=yqSAhm)zELVj7a=u%L{Z!Ct-4R3D*>G2**}mfD6j zhKKZFz1)JdtB$d-nTFs64_VbIz)>n=Al<5JZZ4`~ihw^u8xIBX) z^F+|rK>jRmHd2Ev$l_T^9leB-MJDVV3XjUDAp>g%eROG;alSji81SAvv=e9cmL zyTi!u-rdOCTcd7Q1YVNTKW9(Z5z)q0#IAC4j};!Mh^A$F96xnb&30hudlz0=VRrjz z(HQk!ty~DGEM{`vQ#7`>O${(5rzFPL<%!fc!$d{rui!^%VFwth00(W^UxG zh`n3Nl#TrotB$y`2q+%dN@f-WV_|lF$E&4DN^+ICZD{{0 zk_w+yuo798Y+S=93IuPKW>BB)VYBt;di8AezMxZ3k9h@RI*@pkGfLpY8j$cx)VO&2 z?g8sdh*jU#=POIcxuW=E<&$+fw`ljliyE9$fE8F?dDCUL6R|4HRyuhEny)h9BKN7u zofqt~F2BwWgI5IHSn^iX?c!-+RILW{9c+Q})D!*ZU_yYuI%5m1{V98_PE#dR$o^1H zoh0=FBrgpm18%_l{7CACv5RDe-T_U4iH{b(cK)&tO{KiR@bH=PV*bjs$(c0Mxx*iNR)@B)b_-T5g2Z{$0rm;4Y|!u2n0`o|?KMZBd`k+%qJuy5&PNom7(oY{ zgw(t{fc8*E*$;~Z=h8(!vJSg~;-)iiE}gkt(DSCQwd<`KcowoP7gT`Hn}C8gN{YR0 zEUi9^m3;GTkKqaSiy<{|2{)f#spig9_*{NM9o!TSw1F1zAng$&X&+GFtBWws>QB%> zHBeZ{4@8O6y-gMwPT;tu$jZ`@9j^n5Ke0Okw^>0_2`Q(_eH`}=ypJ!Y^V39OFll;H z3@i+r_wC74IOe_{yqLX?cN9yBDB!!6nudo*fet-;Mdt}D8J=>NW)bUcbbljvDvFYK z@@`S*J)6?I55J>jxY#=8R-AH8A9PX!nmVJP=F~*tlHCg=zK!+A)@XY2E^%VK$=175 zmBF}g0H893jk}0wv{oL4iIPy5m?x~wA7VHQ19ME`C|ZR3!P^C(8DpA%I-u-it44=C zI6j8%q`{1R&?TR8c0#NXFT1>e=93QRW~ zfR+`T(PRIjsBI@B$pcK4aS_*3E&AiJ&QHe5q*H3G^N)P}vfmFhweWunKVQ2DlUN%M zpcxnpmb?=K#xIfLFv@1Pu;w-A(usVA{wE30nQCVlIQnID4(ee1Z5Ftt z9Emk$^hy9(tL^aSo(sjXX4Oc-?X9m{iW8{A`J0|C%wC4g;P?b=js*#$hU(936{2z75o4x+`E=5wkG1 z9q-zl#aMZ7J%}Pz3lkKRwcZ4|F!d>B%prs$OCpz%6aq9APkv?%6%IV_a}V{YiT8rE zFkzjBi{>UD4Na}hVXz+hF5-eZX4f<4fKuhCQiD4Wzj*8G@q4n9WMT+=??1d4p}C$H z_VgHvXZXXJz7JJ~c0R@IQQF`N_k~i{$fR8^xr~Q5!5u^_@`cklqtxeKoA4#QsFE24 zSY547*@Aaosi|!oroSmnvS}5k|84Iv_1snjf~NgpYP@V4 z8!0{zeVUu>Ykzj~UUk!_l{->)5U2PsXC!yvJzR?4w|p9Dema9CvxV~RxW=Y!v)!c& z)BhaOSV5AHJd+h_$w=~J8Xn45DI#bEzNJ9xH7su3-XRBzEKvuFL(LvNg(U{+CcGy{ zc|>8f8(pXWB^><}`x)(q>(6FD2K2g0Kr3l7@<{p-`R7zq%ozz2V%y_WO6k1PgE>~8 zY*EQNk*_UUc5SHCfX7My$pMB7rMt4e49OEmc=MbMp*6GA&Tz8g)R%Y^cHtGzSAz%99MrU2a zj=-8jr`}2TFHt{90WGbmrFX9G$)mSZH{8#8c#$eO<|DHgG$SFX)T+gSvfVJ?3)eQn zQEe&rYo0nJi$DdTEd}romn5CM6a@y>3ROmQKGhu2eTSRadF;r`n2NZt*O68Tjf*Ha z{*4iYwx5L&hj-RS{COuw7VgfQfxTy)+80#g=JyDIZ>Le;GUs(1<7O~lYl24uX4RMa zaC*Eb9WmP4M8+WF92@lV+ma9zCI4;9K~2o-MoalnMhMoqBNW!he1#^SrO$fZE*YE- zzZB5$IyXFBH-O$2Ngaq-H9i`VeuX$?XAaM9T5q+{rJS_FNl!M#H|Fmy7f_=DpGw_Y z1N1n8_NPs7%oNb%G1rT{R?zksX7)!~T320<3yyg5Qs`x*dIvqHiy49+?(&SxK`gtA z5Nv?l@KfOwk4L2XY>5j3Sfc~i$&THoK0OD@Oe%mx9?bMkkgv25LoM51na$Q4k~_(7 ztVDAdYgNDvr+OSPlnMWM18clTJ|&{`Dp{PoTbv2QY=Bqa0AWe^q5(VJ{yd}Kw7RT! zzwH;j=2vFGJ#vUd%GOh@LMI5>sJ?dY>9ZPKsSeY@0WtA&Otg_x`u79pJBrl9# zP$5ik>c_hsE{kN%Er|TMLcjX#!)(cT-%LbDn5HP`J70E#xt><1ywphNO6lht`0ZzQ zsB7D>s_-~pLj#%oyB7yYVJRU)WecaJNP>*n4N}E3TMujSy<4BJCo^b6=X`5IL7cH(#S!^d&jnjalt7+|CLze zjHaf>_1hJZ=KWnA*lNZ0`TQ;^mb-5O8!X6tBO8JaAF0u(`C#<};TI^%3zZqHp?V1w)hVR=bPxpTQ7y(O^ z=9nhFF?PII;Cgn{NVRZyrhcWhpY8?8ZhQD&&*a0PdMrhR}2*k0D<6;pkW_7r!SUc!AoPGSY%nX*Q+T`tTW%X zD5Are)!?;se+q^`T%WfW&rW1x$u;b?y6346G=7jDrB)J>7f(_i@|Za`G#qfLl_F2ZG^-FG~GH%I$7V0kk#?OvuNIEQS&aU|4blk@I8=0wl4%FJ(E?7>Al4jBQd#-CU z_Ju-^Z`CTAr?y&M+D$rZpp0r%U9-DVBL6~ujjkM&7)Ud)65f2_L&3>iG z+hWQ7u(9CuXbE#1F+WZ zjU^v52^qSV_1hd<2Yl_~_P90x(qfR<0emL1lCr2O5 zpffP%t^`lo!NNkc3W0rU5pGTh-mH+5WvTt~+?FKNd@6oc+Eb2kF2k43Xw1}|tXlAR=`ZQw9pU0P zYS2vY4WHN3^QYCiMv=n4i>KHQb!B>ok*z5Nb0DyGQG4$=(N^&3$BrD9h)I9e z*=fqIS{8kKhvKcwQ(Iuc`RUD~^BG;dTdjEG?>>~ha7pJmuL&R~KyP=lz%yT5UeagUSqum&YSDvIP!e}|hHHq7`~tzFU{`I#Mh z(NV*(lf(JJB}m?ti(z38s%D?O$WNM{n=mlDw_w zO%@}wP@Iu4aUGShk&}9K(o#1AjVrB#^inepSKHN=kmOUZxwCPTJO@_`3@G<}i63+H zB;dq3=7c?!Hts&Z^zxcmg^AX)Q=->kMQO@I#+2cT7~ZSMX59PXvCod3z=1N^aKh91 zxv%X{bti6%zi%oks3c_%zQ}#jRb)s>zAZGyBTZ^QdMWhr`@YbOi*p9+dlx>Z)izpO zk{j=@v5%l*5DeV;>Q*|7T)FGut7vSTd|i>NxD*$+w1*emVs5h6$%`2*f!9Mcw#2?1 z#BP<&%RH$TU;d!vBqLySf&IWE7q9L2IV)9_QCrSU37vZ;JmD+IIVHg1E5tD+z&Rxd zAIjQ&IC+%*PG*jgK-aBYy%0lc#b>Fq-QhO={w6+J#uygyJwI3IKyPI1*6j{7 z09^uXXY>26MC*Vho?@M4ol2WukPR_?%1>TqX9~J-()>w z7a0vcg-+Q`!<*3Sj1o=AuCOZApI4ld`fkHlL}#K=J6OnGJb1ll*Q@&k`w_ctn_EX- z#}ug8GLr6njyo&8$a!yZz)%IT(&MZ{UqCWs+g0$NnrCJvtomIh%H=+4xOxvK8CZ@e z3+ML>c6QdbRZkR!&(S+ti%Ktj@tcmlxHsLD!D4S{uQoo&IQpD%8|DrY*kVXxT^}QB z&|a&0lTg7NEK=V;S4TUwyco>Yy?D~_M1eH=>}k72z4J>8M`{^<7QDpcKKEgW^=U|v zvZm|Z(tHC|eCHPCPHsszvsZx!^@JI=gLR)?C5%3T5lrS}$GZ&IGL`8})cMjS6`^lS z+~*c&USz^(AY=NX!2#8MIXo~afBkUgoFy!#y-h;tMP5GJ!5{w}e6DM$>e$daxKpSQ z&wqkkF6~e;RBP572#eEw9W#O%OYJM{@@OqsS=05;11B^0hHcAP>R=5$xu$(e=@WBP zvMIyO;}UqyJTU^1XIix%7ZR#UR2?k1SwpAZz+Bz{G2dfEFM~FFPN6_FudJkF!OJCcTIfba^gZd5 z%w20PKm5wY$^No|epr&_@nXiLj9bU_(Xhg^z5CwMch7lTK$zTt~dvU=7E)wM;x? zWTdY?c4lOWekW|kWqxR<>%51ZvB(y|xsY`*2wSMKdpxBS@OXTD4)?O2;1RN_WpUL$ zPY_B9JWtzkSZYB7yf86R8RsU2y)7~UxgkJ{^rqA z|ANR@yEtRJpD|bqk0Pa0+QuNHMN9qZqxN#Ud+p`Y6gSEyvyO`qSn^f2m>6yBca#At zw0$f#($vV@b33OakKrjbR!Nh|w3Mcc(v~C1YE2hKjd^(%cel2DF=yVA($7!$xczG0 z_~W?;1!LjC>tArwI(A8)8g8t6e^bovoWj0>T6EIN4q8i6U!)l`(_vM6HQ#7aROjv3 zioknCmsfqWnHqUbcT2`cLUi1cHB;s*`R|Bp#}=M&yep}H?b=nB8+|S}Zf{lR=01gP zv(CwVdbu=q=X~q>`llxxiz&H>w=mg&w~A(NRk_){IGz-q>zEx=G9>Q)(ImX{)^~&X z4ls;7L(gfp(_p$354LT<_#+FbILg|S$iXjPs~W$hKkL1(kuY>JUes^8`p!dn{=f#i zdlTjG1GzrNER25*MouQo!-QN`vCy$-y1=yg|X zJ(rr^J~%Ge1wFf_!6X3;>!8G9?1Ti66})2tcTA3y#<_+R2Hnm-v-xyQiVW$l7K{k) zW^0`*uD9G)ThDN@=c$X%S%P~h#>kAm*GP$IwGy%A2z(W=>(Zmmk#Ovx`bOgwmg|yr0BoGk;4HUI3-8p=bww?||uFOp~H3D2(ag4136z=Q(%uk`~%R+hNm4&83KEq_4^_^ZP72uhu7 zM?zm9Ne-z99qMR#R}qR!oeV1E+!B1ArEoP~qH*muA^JT2rtanITKsCN=kBo6pO~-C z=lHzh^C{*s5RB2_ZX@AwgZlFlSJE48l8~E4bJsA zkdt_C$jHdaaG>BdutK~ob?9|`p^Wh!kp@k&DaWc?6;%mnT}zl-MaM$N%^jr|=@W?y z5i&|xvw5(PkwY3fJ3Bwy1hZOu`09YbSsZH{QryZGfAbtwWZb{3M0E*EeuOasnk&oJ z+ONyIK*Mg5H%j=hz(p=4AI(bcD}nreJ5P!UOd|781SnqcbDs~bMUezP0@OCBu!JGUmO0P0~+#FO|U}cZh@#{H_Hiqgp8jG9a9_+RsVh?gLoLdnddo z0!~UGw@lGRktfKFZez?btKm0w?g!Bn1q!2+ zISM0}b(I!|NRo#lrGp@%(V?BJFL__89HN)Ns^kSTOq0_2aBZR>@gkp$x$z5H(U&;H zYCU2VY-i+NR4I+*s-fV=Saiw2An&?f3+PN@OpO?+DDlXJm@!T~d`EqN@L-w|7Q(y+ z_^=A4UfI>bzC)pObzVIb(6{}E2UcK&DBHuiNa`1$Y?aWhXY+4{zK0)jZ8{+qU%ml~ zMjhg0i7ghQ+0~-V8dRm{&X8H&7A*$7D?_Yim|O5XMYU^WHRBs3XmglOkP9mOP~HLV zB(k|Fw6A%ool=~s2^q-|Vh|AKH-o{u=iq~!>O>O+*x~(Jy&xmox2BKV^sPwD`Sfhh_t$-?w$>e>>s?!AL^gN7`I9WR{ z4)(1?QWQ{nXFH^5!d==2MUjMO<%K=KodsSb?~`1K&JvT8kt?!75?-ttz-hn$G*kHywfi0PBWBgkZpUmnj z(&sBLF+znS&@vW$bv!%d+tpuwVvA2yXQ8lB_}Y5m_Z{w-Y9LjS#A?2+r7MDqngwq+ z#m}%Mn}=GG-QZnY-r;fv$TYpLL1mP1d2<+T$Sc(`!aX z$~bg*0>z}KHNdlPYy)M7>f9(v=vUzmd!Rs7&+ez>>VhSu_{~|ea~0pQJm^u`_APa6@tO^$ zj9hFurxTL{ZVOBk;&=Ru9?h$5tx?1Kb@Q@$D|Jo>29zm(a4wRBGZ+gaw`|ZG&f3Y- zJKn~%iXaKmKI4qF)OiI|+qYWy3BeX4_cvJ$j!{WSi-Msio0-`6a)x2#+OxG=g~F;~ z2kKTMv*H6rb`#yt$tx}bbK{pZba5tammzg$1iYLegxpfXMD-jeFOhBD;#MZyd}U1! zi3wP>$lnf2gLjT^&hquKXB|I(%8PYpfRh4uLl*-O6{%d~)8T{}4X}4BtmCHID_Nnf z+1g@~&X0|CDm2e@$ImG~tFMK#(Mi0!ktfK#@U31cih_ zfiS66P$>qqKG4S#YAvKdZxR%lgaBdC)+%BVY8_HhK+q&oKvOLsTEU6rUE{1IK{Qv$ z@Q(cxUcaB;IeY*1+Gl^*Yb{UB@)2C@!=Vj4EZ0lx!_zbX_*Dw|v=G}`y2K;E9;Irh z1c&%4#LbMyfRB#!t2$dBePIN8YcJd^)02$NvQ<2J~vf-_^*B{_IAbUQ}?CF$hBv3|4Y~c9fKZ2c7hWB=|D`wFu->fm~_tsHjEhj zI{s&|_ql<-1Lxx;FRtAg!D!y(5^qs%?k!_kYs0YV1MRjpIHLvkGM!f4BQ3&Yk6a|CE884f)|<%bfnZ2EddUpaT|LJF5=8DDzhO zDy{y;MpU<^*@*5&Ud*OGT`2*lZqwKI`i>^*FUb;+yS0u^W@EL!dLW(Bp8DQOBpseh z0Etyc;~I`TWYgen806eRe>!}jhfaHE1TbJSB-hoMwB+KQ=iBE18P_+mMX)r@GON76 z_Nptl6P%jv=h@^f)w;|Tiqz+(0CQti^fJt*Bs!TvCsR4j9oU*haJNi*h`&NvYO+vP zdSF89d#1FZ;Mv9^;#c)#B3Oo3%WjEmE*io!PSSRr+?|y7dyr{|2;DJ=QE7yJ(MJ$!u@fW!UZHF@1eTd_Y-?nT7JJqxcEx>H5NbG~8(_GboQP&YBh$eaCYDu7NX6%Cpk`_^C;}Yh1D&`L`Y(1sbgUW%x)W z9=aSyR8=TgT#P0~sfQ^Ur0gC?qX`cK1C+CGf(b=y{se(IU+pxbfM$!NLi3R#^CbLa zMDYlp-g0vLjLEFH8hv2Mnp^NrM^Q|?C_6*K>~m?~qpfJ0^ub<;mxA*D^JblIToHk}S! z|1g#I+7ZHz)*rLxnrpTp!FKCvwiLFrr*D+;SMwE=+9&Rc^yt*oEz(u2PLbIpSq-UOxJh< zpj6VluZcTm++P+nwahr}fCBtN(!`EpW?lxBAet?Wc7{%ls&zJE##WVEJnYMMmE+8%9kD5z+eC9qs`?pz;G11APv|35zn5q@DOiS7MsKrp@L3 zar|+%@#>|U7d$8P+QYWKj29{zVTD0B71ju{*ff0y9ANnVoeV;F>2p-*Pem2SBqo-W)2$REx_fr%{#>dsV zg*ibCbKzT%-kJLWEgbT}v_Y%^X_>KpXu2J_`XFFAlPHA!D;-dywA;wcJK0Ra z$XVP>8t(Juy7;O+zbWe8-&fqcz7n1>g>=mp4gN>}^&7XGr_$>wrWzzAEBH$#2x^Qx z)PMhLS-yke-BSHq8osOMaBEfX|7{fownD&d>K{8!71o)Um|wZeSC@R@cNF++VdB;% KMW2t%DES|vjR`jZ diff --git a/scripts/index.js b/scripts/index.js index 1a85fc00..4e59c52b 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -28,10 +28,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) { let songCoverArt = createElement('img',[],[],{src: coverArt}) let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); - let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); - console.log(songElement); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id:id}); const eventListeners = {}; - + console.log(songElement); return songElement; } for(let song of player.songs){ @@ -46,7 +45,7 @@ function createPlaylistElement({ id, name, songs }) { let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]); let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]); let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']); - const eventListeners = {} + const eventListeners = {}; return playlistElem; } for(let playlist of player.playlists){ @@ -109,16 +108,16 @@ function removeSong(songId) { } function addSong({ title, album, artist, duration, coverArt }) { - let SongTitle = createElement('h2',[title],['songTitles']); - let songAlbum = createElement('h3',["Album: " + album]); - let songArtist = createElement('h4',["Artist: " + artist]); - let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); - let songCoverArt = createElement('img',[],[],{src: coverArt}) - let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); - let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); - let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id: id}); - const eventListeners = {}; + let SongTitle = createElement('h2',[title],['songTitles'],[],{}); + let songAlbum = createElement('h3',["Album: " + album],[],{}); + let songArtist = createElement('h4',["Artist: " + artist]); + let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]); + let songCoverArt = createElement('img',[],[],{src: coverArt}) + let playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' }); + let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' }); + let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell']); let addingSong = document.getElementById('songs'); + const eventListeners = {}; addingSong.append(songElement); } /**