diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..7a9dfa0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "pwa-chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/index.new.html b/index.new.html
index eba39f1..b5bafb1 100644
--- a/index.new.html
+++ b/index.new.html
@@ -13,11 +13,11 @@ Awesome Player!!!
diff --git a/scripts/index.js b/scripts/index.js
index 6842c79..6e98192 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,30 +4,73 @@
*
* @param {String} 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 song=document.getElementById(songId+"song")
+// song.classList.add("now-playing")
+// setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
+// setTimeout(()=>playSong(player.songs[(player.songs.indexOf(findSong(songId))+1)].id),findSong(songId).duration*1000);
+// lastSongPlayed=song;
+// }
+// }
/**
* 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)
-}
+// function createSongElement({ id, title, album, artist, duration, coverArt }) {
+// 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 coverImageArtUrl = getSongImage(id);
+// const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
+// return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+// }
/**
* 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)
-}
+// function createPlaylistElement({ id, name, songs }) {
+// const nameEl=createElement("span", [name,":"],["playlist-name"]);
+// const quantityEl=createElement("span",[songs.length],["num-of-song"])
+// const attrs = {id:id}
+// return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
+// }
+// function getSongImage(id){
+// return findSong(id).coverArt
+// }
+
+// function secToDur(sec){
+// return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+// }
+// function findSong(id,mPlayer=player){
+// for(let song of mPlayer.songs){
+// if (song.id===id){
+// return song;
+// }
+// }
+// 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 playlistDuration(id) {
+// let plDuration=0;
+// for(let songID of findPlaylist(id).songs){
+// plDuration+=(findSong(songID).duration);
+// }
+// return (plDuration);
+// }
/**
* Creates a new DOM element.
*
@@ -40,8 +83,34 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Array} classes - the class list of the new element
* @param {Object} attributes - the attributes for the new element
*/
-function createElement(tagName, children = [], classes = [], attributes = {}) {
- // Your code here
-}
+// function createElement(tagName, children = [], classes = [], attributes = {}) {
+// 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;
+// }
+// function appendingSongs(player){
+// const songEl=document.getElementById("songs")
+// for(song of player.songs){
+// songEl.append(createSongElement(song));
+// }
+// }
-// You can write more code below this line
+// function appendingPlaylists(player){
+// const playListEl=document.getElementById("playlists")
+// for(playlist of player.playlists){
+// playListEl.append(createPlaylistElement(playlist));
+// }
+// }
+// appendingPlaylists(player)
+// appendingSongs(player)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8..dd14499 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,9 +4,18 @@
*
* @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 song=document.getElementById(songId+"song")
+ song.classList.add("now-playing")
+ setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
+ setTimeout(()=>playSong(player.songs[(player.songs.indexOf(findSong(songId))+1)].id),findSong(songId).duration*1000);
+ lastSongPlayed=song;
+ }
+ }
/**
* Removes a song from the player, and updates the DOM to match.
@@ -16,12 +25,25 @@ function playSong(songId) {
function removeSong(songId) {
// Your code here
}
-
+let newSongId=10;
+function generateSongId(){
+ newSongId+=1;
+ return newSongId;
+}
/**
* Adds a song to the player, and updates the DOM to match.
*/
function addSong({ title, album, artist, duration, coverArt }) {
- // Your code here
+ player.songs.push({
+ id: generateSongId(),
+ title: title,
+ album: album,
+ artist: artist,
+ duration: duration,
+ coverArt: coverArt
+ })
+ console.log(player.songs)
+ songEl.append(createSongElement(player.songs[player.songs.length-1]));
}
/**
@@ -40,31 +62,39 @@ 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})
}
+
/**
* Creates a song DOM element based on a song object.
*/
-function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
-}
+ function createSongElement({ id, title, album, artist, duration, coverArt }) {
+ 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 coverImageArtUrl = getSongImage(id);
+ const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+ }
/**
* Creates a playlist DOM element based on a playlist object.
*/
-function createPlaylistElement({ id, name, songs }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
+ function createPlaylistElement({ id, name, songs }) {
+ const nameEl=createElement("span", [name,":"],["playlist-name"]);
+ const quantityEl=createElement("span",[songs.length],["num-of-song"])
+ const attrs = {id:id}
+ return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
}
+
/**
* Creates a new DOM element.
*
@@ -79,26 +109,78 @@ 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;
}
/**
* Inserts all songs in the player as DOM elements into the songs list.
*/
-function generateSongs() {
- // Your code here
+const songEl=document.getElementById("songs")
+function appendingSongs(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 appendingPlaylists(player){
+ for(playlist of player.playlists){
+ playListEl.append(createPlaylistElement(playlist));
+ }
}
-// Creating the page structure
-generateSongs()
-generatePlaylists()
+
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+
+function getSongImage(id){
+ return findSong(id).coverArt
+}
+
+function secToDur(sec){
+ return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+}
+function findSong(id,mPlayer=player){
+ for(let song of mPlayer.songs){
+ if (song.id===id){
+ return song;
+ }
+ }
+ 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 playlistDuration(id) {
+ let plDuration=0;
+ for(let songID of findPlaylist(id).songs){
+ plDuration+=(findSong(songID).duration);
+ }
+ return (plDuration);
+}
+// Creating the page structure
+appendingPlaylists(player)
+appendingSongs(player)
\ No newline at end of file
diff --git a/style.css b/style.css
index f4645fe..0e769bd 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,28 @@
-/* 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%;
+}
+