From 7224a2f51e175666f8c52f46300e2562c1bb7fd4 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Tue, 14 Sep 2021 20:56:43 +0300
Subject: [PATCH 01/22] createElement func
general function creates element and gives it class,atrributes and children
---
scripts/index.new.js | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..8787a3d1 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -79,7 +79,20 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Object} eventListeners - the event listeners on the element
*/
function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
- // Your code here
+ 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;
}
/**
From eba6338899b7d1cf738ef2af6a2d2895602e6988 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:22:30 +0300
Subject: [PATCH 02/22] createSongElement
added createSongElement( func.
and 2 support functions:
findSong
secToDur
---
scripts/index.new.js | 27 +++++++++++++++++++++------
1 file changed, 21 insertions(+), 6 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 8787a3d1..8128c388 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -1,3 +1,17 @@
+/*support functions */
+function findSong(id,mPlayer=player){
+ for(let song of mPlayer.songs){
+ if (song.id===id){
+ return song;
+ }
+ }
+ throw "ID not found";
+}
+
+function secToDur(sec){
+ return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+}
+
/**
* Plays a song from the player.
* Playing a song means changing the visual indication of the currently playing song.
@@ -47,13 +61,14 @@ 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)
+ const nameEl=createElement("span", [title],["song-name"]);
+ const albumEl=createElement("span",[album],["album-name"])
+ const artistEl = createElement("span", [artist],["artist"]);
+ const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
+ const imgEl = createElement("img", [] ,["album-art"], {src: coverArt});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
}
-
+console.log(createSongElement(player.songs[0]))
/**
* Creates a playlist DOM element based on a playlist object.
*/
From d9ef536d0bfccc390568320bcf24ba76ba486bac Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:27:30 +0300
Subject: [PATCH 03/22] createPlaylistElement
added createPlaylistElement func.
and support function - playlistDuration.
---
scripts/index.new.js | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 8128c388..acfbb70f 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -12,6 +12,14 @@ function secToDur(sec){
return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
}
+function playlistDuration(id) {
+ let plDuration=0;
+ for(let songID of findPlaylist(id).songs){
+ plDuration+=(findSong(songID).duration);
+ }
+ return (plDuration);
+}
+
/**
* Plays a song from the player.
* Playing a song means changing the visual indication of the currently playing song.
@@ -73,11 +81,10 @@ console.log(createSongElement(player.songs[0]))
* 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)
+ const nameEl=createElement("span", [name,":"],["playlist-name"]);
+ const quantityEl=createElement("span",[songs.length],["num-of-song"])
+ const attrs = {id:id+"pl"}
+ return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],attrs)
}
/**
From 5a4ed7302453101a9c8ac13a96b388a36094450b Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:33:15 +0300
Subject: [PATCH 04/22] generateSongs & generatePlaylists
functions that append songs and playlist in there place on the html(webpage)
---
scripts/index.new.js | 14 ++++++++++----
1 file changed, 10 insertions(+), 4 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index acfbb70f..1ad6f725 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -120,15 +120,21 @@ function createElement(tagName, children = [], classes = [], attributes = {}, ev
/**
* Inserts all songs in the player as DOM elements into the songs list.
*/
-function generateSongs() {
- // Your code here
+const songEl=document.getElementById("songs")
+function generateSongs(player) {
+ for(song of player.songs){
+ songEl.append(createSongElement(song));
+ }
}
/**
* Inserts all playlists in the player as DOM elements into the playlists list.
*/
-function generatePlaylists() {
- // Your code here
+const playListEl=document.getElementById("playlists")
+function generatePlaylists(player) {
+ for(playlist of player.playlists){
+ playListEl.append(createPlaylistElement(playlist));
+ }
}
// Creating the page structure
From 946bc806d0983ab98ca13fd48426ddfea666f633 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:37:43 +0300
Subject: [PATCH 05/22] added playsong func.
this func. change the class of the song that is currently played.
and in the css file it gives this class visable diffrent.
the player could play only one song at a time.
---
scripts/index.new.js | 16 +++++++++++++---
style.css | 28 +++++++++++++++++++++++++++-
2 files changed, 40 insertions(+), 4 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 1ad6f725..87c9b6b5 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -26,9 +26,19 @@ function playlistDuration(id) {
*
* @param {Number} songId - the ID of the song to play
*/
-function playSong(songId) {
- // Your code here
-}
+ let lastSongPlayed;
+ function playSong(songId) {
+ try{
+ lastSongPlayed.classList.remove("now-playing");
+ }finally{
+ const songElement=document.getElementById(songId+"song")
+ const song=findSong(songId);
+ songElement.classList.add("now-playing");
+ setTimeout(()=>songElement.classList.remove("now-playing"),song.duration*1000);
+ setTimeout(()=>playSong(player.songs[(player.songs.indexOf(song)+1)].id),song.duration*1000);
+ lastSongPlayed=songElement;
+ }
+ }
/**
* Removes a song from the player, and updates the DOM to match.
diff --git a/style.css b/style.css
index f4645fe9..6a803a8a 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,27 @@
-/* Your code here */
+body{
+ text-align: center;
+ font-size: 200%;
+ background-image: url("https://www.freepik.com/free-photo/abstract-smoke-wallpaper-background-desktop_17581093.htm#page=1&query=Background&position=9");
+ background-color: #b9992d;
+ }
+
+ .album-art{
+ border-radius: 50%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 5%;
+ margin-top: 2%;
+ width: 25%;
+ border: 3px solid rgb(26, 167, 136);
+ padding: 2px;
+ align-items: center;
+ }
+
+ .now-playing{
+ background-color: rgb(5, 58, 58);
+
+ }
+ span{
+ margin-right: 2%;
+ }
\ No newline at end of file
From c7b8105a53f995fd0361e0601c97fa8b5ae79ddb Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:41:17 +0300
Subject: [PATCH 06/22] findPlaylist
added findPlaylist support function
---
scripts/index.new.js | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 87c9b6b5..fe9694d7 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -8,6 +8,15 @@ function findSong(id,mPlayer=player){
throw "ID not found";
}
+function findPlaylist(id,mPlayer=player){
+ for(let Playlist of mPlayer.playlists){
+ if (Playlist.id===id){
+ return Playlist;
+ }
+ }
+ throw "ID not found";
+}
+
function secToDur(sec){
return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
}
From 4a0aec5a24a297608ff67546067570e5f6122b2e Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:41:46 +0300
Subject: [PATCH 07/22] genarateing songs and playlists
---
scripts/index.new.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index fe9694d7..83e268c4 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -157,8 +157,8 @@ function generatePlaylists(player) {
}
// Creating the page structure
-generateSongs()
-generatePlaylists()
+generateSongs(player)
+generatePlaylists(player)
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
From bc413ac0065b74a4e49ba43fca168a17aaf09c18 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:45:13 +0300
Subject: [PATCH 08/22] addSong
added addSong func.
and support func. generateSongId
---
scripts/index.new.js | 18 ++++++++++++++++--
1 file changed, 16 insertions(+), 2 deletions(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 83e268c4..0e886243 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -17,6 +17,12 @@ function findPlaylist(id,mPlayer=player){
throw "ID not found";
}
+let newSongId=10;
+function generateSongId(){
+ newSongId+=1;
+ return newSongId;
+}
+
function secToDur(sec){
return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
}
@@ -61,8 +67,16 @@ function removeSong(songId) {
/**
* 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 }) {
+ player.songs.push({
+ id: generateSongId(),
+ title: title,
+ album: album,
+ artist: artist,
+ duration: duration,
+ coverArt: coverArt
+ })
+ songEl.append(createSongElement(player.songs[player.songs.length-1]));
}
/**
From 244988f4eb534902cfa2c164ff407d30a51e5eb8 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 09:54:56 +0300
Subject: [PATCH 09/22] handleAddSongEvent
func. that operats the addSong button
---
index.new.html | 10 +++++-----
scripts/index.new.js | 9 ++++++---
2 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/index.new.html b/index.new.html
index eba39f17..b5bafb19 100644
--- a/index.new.html
+++ b/index.new.html
@@ -13,11 +13,11 @@ Awesome Player!!!
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 0e886243..8a65a7c0 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -95,7 +95,12 @@ function handleSongClickEvent(event) {
* @param {MouseEvent} event - the click event
*/
function handleAddSongEvent(event) {
- // Your code here
+ let title=document.getElementById("title").value
+ ,album=document.getElementById("album").value
+ ,artist=document.getElementById("artist").value
+ ,duration=document.getElementById("duration").value
+ ,coverArt=document.getElementById("cover-art").value
+ addSong({title,album,artist,duration,coverArt})
}
/**
@@ -109,7 +114,6 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
const imgEl = createElement("img", [] ,["album-art"], {src: coverArt});
return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
}
-console.log(createSongElement(player.songs[0]))
/**
* Creates a playlist DOM element based on a playlist object.
*/
@@ -173,6 +177,5 @@ function generatePlaylists(player) {
// Creating the page structure
generateSongs(player)
generatePlaylists(player)
-
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
From c5a6fc9cfab68b401d69f33c8cbd15aa05d39d21 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 11:14:43 +0300
Subject: [PATCH 10/22] added play&delete buttons
---
scripts/index.new.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 8a65a7c0..b8cee122 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -112,7 +112,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
const artistEl = createElement("span", [artist],["artist"]);
const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
const imgEl = createElement("img", [] ,["album-art"], {src: coverArt});
- return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+ const playEl = createElement("button",["▶"],["button"],{id:"playButton"});
+ const deleteEl = createElement("button",["❌"],["button"],{id:"deleteButton"});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl,playEl,deleteEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
}
/**
* Creates a playlist DOM element based on a playlist object.
@@ -179,3 +181,4 @@ generateSongs(player)
generatePlaylists(player)
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+
From dea8403670dbe432f1801f18a7584c712dad2e3a Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 11:15:59 +0300
Subject: [PATCH 11/22] added removeSong func.
Deletes from the player and removes from DOM
---
scripts/index.new.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index b8cee122..ee8124e3 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -61,7 +61,11 @@ function playlistDuration(id) {
* @param {Number} songId - the ID of the song to remove
*/
function removeSong(songId) {
- // Your code here
+ player.songs.splice(player.songs.indexOf(findSong(songId)),1);
+ for(let playlist of player.playlists){
+ playlist.songs.splice(playlist.songs.indexOf(songId),1)
+ }
+ document.getElementById(songId+"song").remove();
}
/**
From 24603b1e95059b6f616b051dcc7e8a12488512c6 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 11:23:18 +0300
Subject: [PATCH 12/22] fixed duration and added checkDurationInput
---
scripts/index.new.js | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index ee8124e3..79857dfc 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -27,6 +27,20 @@ function secToDur(sec){
return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
}
+function durationToSeconds(duration){
+ checkDurationInput(duration)
+ return((parseInt(duration[0])*10)+parseInt(duration[1]))*60
+ +parseInt(duration[3]*10)+parseInt(duration[4])
+}
+
+function checkDurationInput(duration){ // checks digits(maximum is 59:59/minimum is 00:00),:,length.
+ if(0<=parseInt(duration[0])&&parseInt(duration[0])<6&&0<=parseInt(duration[1])&&parseInt(duration[1])<=9
+ &&duration[2]===":"&&0<=parseInt(duration[3])&&parseInt(duration[3])<6&&0<=parseInt(duration[4])
+ &&parseInt(duration[4])<=9&&duration.length===5){
+ return true
+ }else throw 'Duration is not in the correct format...This is the format-"mm:ss" (for example 03:13)'
+}
+
function playlistDuration(id) {
let plDuration=0;
for(let songID of findPlaylist(id).songs){
@@ -72,12 +86,13 @@ function removeSong(songId) {
* Adds a song to the player, and updates the DOM to match.
*/
function addSong({ title, album, artist, duration, coverArt }) {
+ checkDurationInput(duration)
player.songs.push({
id: generateSongId(),
title: title,
album: album,
artist: artist,
- duration: duration,
+ duration: durationToSeconds(duration),
coverArt: coverArt
})
songEl.append(createSongElement(player.songs[player.songs.length-1]));
From 2533fb31b36401711a81aa06fc1908b95dc2aa5f Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Wed, 15 Sep 2021 12:01:50 +0300
Subject: [PATCH 13/22] eventListener for play and delete buttons
**need to be rewritten**
(working)
---
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 79857dfc..888d5bad 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -113,13 +113,18 @@ function handleSongClickEvent(event) {
*
* @param {MouseEvent} event - the click event
*/
-function handleAddSongEvent(event) {
+function handleAddSongEvent(event) { // works-need to be written better
let title=document.getElementById("title").value
,album=document.getElementById("album").value
,artist=document.getElementById("artist").value
,duration=document.getElementById("duration").value
,coverArt=document.getElementById("cover-art").value
addSong({title,album,artist,duration,coverArt})
+ document.getElementById("title").value=null;
+ document.getElementById("album").value=null;
+ document.getElementById("artist").value=null;
+ document.getElementById("duration").value=null;
+ document.getElementById("cover-art").value=null;
}
/**
@@ -131,9 +136,9 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
const artistEl = createElement("span", [artist],["artist"]);
const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
const imgEl = createElement("img", [] ,["album-art"], {src: coverArt});
- const playEl = createElement("button",["▶"],["button"],{id:"playButton"});
- const deleteEl = createElement("button",["❌"],["button"],{id:"deleteButton"});
- return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl,playEl,deleteEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+ const playEl = createElement("button",["▶"],["play-button"],{id:"playButton"});
+ const deleteEl = createElement("button",["❌"],["remove-button"],{id:"deleteButton"});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl,playEl,deleteEl],["song"],{id:id+"song"});
}
/**
* Creates a playlist DOM element based on a playlist object.
@@ -201,3 +206,12 @@ generatePlaylists(player)
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+//Making the play and delete buttons actually do something
+document.getElementById("songs").addEventListener("click" , function(event) { // works-need to be written better
+ if (event.target.className != "remove-button"){
+ if(event.target.className !="play-button")return;
+ }
+ let song = event.target.closest(".song");
+ if(event.target.className === "remove-button") removeSong(parseInt(song.id.substring(0,1)))
+ if(event.target.className ==="play-button") playSong(parseInt(song.id.substring(0,1)))
+});
From db30bfb48a4e8f307b95757007cb1f97d15100f0 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Thu, 16 Sep 2021 21:48:00 +0300
Subject: [PATCH 14/22] updatePlaylist func.
used after removing songs
---
index.new.html | 14 +++-----------
scripts/index.new.js | 16 ++++++++++++++--
2 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/index.new.html b/index.new.html
index b5bafb19..ec1380a1 100644
--- a/index.new.html
+++ b/index.new.html
@@ -45,17 +45,9 @@ Songs