all the Requirements

.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}"
+        }
+    ]
+}

index.new.html

@@ -13,11 +13,11 @@ <h1>Awesome Player!!!</h1>
         <div id="add-section">
             <h2>Add a new song</h2>
             <div id="inputs">
-                <input name="title" placeholder="Title">
-                <input name="album" placeholder="Album">
-                <input name="artist" placeholder="Artist">
-                <input name="duration" placeholder="Duration (mm:ss)">
-                <input name="cover-art" placeholder="Cover art link">
+                <input id="title" placeholder="Title">
+                <input id="album" placeholder="Album">
+                <input id="artist" placeholder="Artist">
+                <input id="duration" placeholder="Duration (mm:ss)">
+                <input id="cover-art" placeholder="Cover art link">
             </div>
             <button id="add-button">Add</button>
         </div>

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)

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)

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%;
+}
+