suvelocity · IdanHerman12 · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021
diff --git a/README.md b/README.md
@@ -13,6 +13,13 @@ Your task is to create a webpage that conveniently displays the songs and playli
 5. Submit your work.
 6. May the odds be ever in your favor!
 
+## New Requirements!
+- There is now a section for adding new songs to the player. Make it work!
+- Add a play button to every song. Clicking it will play that song.
+- Add a remove button to every song. Clicking it will remove the song from the playlist.
+- There should be only one event listener on the entire songs list, that handles all play and remove events of songs.
+- You are given new template files to use: `index.new.html` and `index.new.js`.
+
 ## Webpage Requirements
 
 Your webpage should contain 2 lists:
@@ -44,6 +51,8 @@ Every playlist list item should display the following information:
 
 -   After a song begins to play, it automatically switches to the next one when the song duration has passed.
 -   The color of the durations of songs should reflect their length. A duration of less than 2 min will show green, and will be gradually redder until it is completely red for durations that are above 7 min.
+-   When a song is removed, all playlists in the page will also be updated.
+-   When adding a new song, the songs list will remain sorted by title.
 -   Anything else you can think of...
 
 ## Technical Instructions

diff --git a/index.html b/index.html
@@ -10,9 +10,11 @@
     </head>
     <body>
         <div id="songs">
+            <h2>songs</h2>
             <!-- Generated songs go here -->
         </div>
         <div id="playlists">
+            <h2>playlists</h2>
             <!-- Generated playlists go here -->
         </div>
     </body>

diff --git a/index.new.html b/index.new.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Awesome MP3 Player</title>
+        <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
+        <link rel="stylesheet" href="./style.css">
+        <script src="./scripts/player.js"></script>
+        <script src="./scripts/index.new.js" defer></script>
+    </head>
+    <body>
+        <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">
+            </div>
+            <button id="add-button">Add</button>
+        </div>
+        <div id="songs">
+            <h2>Songs</h2>
+            <div class="list">
+                <!-- <div class="song">
+                    <div class="left">
+                        <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
+                        <div class="song-details">
+                            <span class="title">Vortex</span>
+                            <span class="album">Wallflowers</span>
+                            <span class="artist">Jinjer</span>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <div class="song-duration">04:02</div>
+                        <div class="song-actions">
+                            <button class="play-button">Play</button>
+                            <button class="remove-button">Remove</button>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+        <div id="playlists">
+            <h2>Playlists</h2>
+            <div class="list">
+                <!-- <div class="playlist">
+                    <div class="left">
+                        <span class="name">Metal</span>
+                    </div>
+                    <div class="right">
+                        <span class="playlist-length">4 songs</span>
+                        <span class="playlist-duration">25:36</span>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -5,25 +5,32 @@
  * @param {String} songId - the ID of the song to play
  */
 function playSong(songId) {
-    // Your code here
+ for (let song of player.songs){
+     document.getElementById(song.id).style.background="white"
+     if(song.id===songId){
+        document.getElementById(song.id).style.background="lightblue"
+     }
+ }
 }
 
 /**
  * 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})` }
+    const song=arguments[0]
+    const children = songList(song)
+    const classes = ["song"]
+    const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id:id }
     return createElement("div", children, classes, attrs)
 }
 
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
 function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+    const playlist=arguments[0]
+    const children = playPlaylist(playlist)
+    const classes = ["playlist"]
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -41,7 +48,85 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Object} attributes - the attributes for the new element
  */
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
+    let element= document.createElement(tagName)
+   classes.forEach(c =>element.classList.add(c))
+   const attribute=Object.keys(attributes)
+   for(let i=0;i<attribute.length;i++){
+       element.setAttribute(attribute[i],attributes[attribute[i]])  
+   }
+   for(let i=0;i<children.length;i++){
+    element.append(children[i])
+   }
+    return  element
 }
-
 // You can write more code below this line
+
+function songList(song){
+const list=[]
+for(let key in song){
+     if(key.toString()!=='coverArt' && key.toString()!=='duration'){
+    const li=document.createElement('li');
+    li.innerText=`${key}: ${song[key]}`;
+    list.push(li)
+}
+ else if(key.toString()==="duration"){
+    const li=document.createElement('li');
+    let duration=convertDuriation(song[key])
+    duration.toString
+    li.innerText=`${key}: ${duration}`;
+    list.push(li)
+}
+else{
+    const img=document.createElement('img')
+    img.src=song[key]
+    list.push(img)
+}
+}
+return list
+}
+
+function playPlaylist(playlist){
+    const list=[]
+    let sumDuration =playlistDuration(playlist)
+    for(let key in playlist){
+        if(key.toString()!=="songs"){
+           const li=document.createElement('li')
+               li.innerText=`${key}: ${playlist[key]}`;
+                  list.push(li)
+                }
+                else{
+                    const li=document.createElement("li")
+                    li.innerText=`number of songs: ${playlist.songs.length}`
+                    list.push(li)
+
+                }
+    }
+    const li=document.createElement("li")
+    sumDuration=convertDuriation(sumDuration)
+    li.innerText=`duration: ${(sumDuration)}`;
+    list.push(li)
+    return list 
+    }
+
+
+
+
+    player.songs.sort(sortArray);
+const x=document.getElementById("songs")
+for(let i=0;i<player.songs.length;i++){
+x.appendChild(createSongElement(player.songs[i]))
+}
+
+const y=document.getElementById("playlists")
+for(let i=0;i<player.playlists.length;i++){
+    y.appendChild(createPlaylistElement(player.playlists[i]))
+    }
+
+    function sortArray(a, b){
+        if(a.hasOwnProperty("title")){
+          return a.title.localeCompare(b.title);
+        }
+        if(a.hasOwnProperty("name")){
+          return a.name.localeCompare(b.name);
+        }
+    }