From 8b89d9026e4ef6a586ba94f63fbf65d31aa2164c Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Mon, 13 Sep 2021 09:01:23 +0300
Subject: [PATCH 01/15] Improving functions and adding other needed element

Adding all of necessary functions and checking of their work in the browser
---
 scripts/index.js | 128 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 118 insertions(+), 10 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..4d8a6485 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -5,26 +5,33 @@
  * @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 = songChildrenlist(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 attrs = {}
+ function createPlaylistElement({ id, name, songs }) {
+    const playlist=arguments[0]
+    const children = playlistChildrenlist(playlist)
+    const classes = ["playlist"]
+    const attrs = {id: id}
     return createElement("div", children, classes, attrs)
 }
 
@@ -41,7 +48,108 @@ 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(сlass =>element.classList.add("class") )
+    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.appendChild(children[i])
+    }
+    return  element
 }
 
-// You can write more code below this line
+
+function songChildrenlist(song){
+    const list=[]
+    for(let key in song){
+        if(key==="coverArt"){
+            const img=document.createElement("img")
+            img.src=song[key]
+            list.push(img)
+        }
+        else if(key!=="id"){
+            const li=document.createElement("p");
+            if(typeof song[key] ==="number"){
+                li.innerText=toCorrectDuration(song[key]);
+                list.push(li)
+            }
+            else{
+                li.innerText=song[key];
+                list.push(li)
+            }
+        }
+    }
+    return list
+}
+
+function playlistChildrenlist(playlist){
+    const list=[]
+    for(let key in playlist){
+        if(key==="songs") {
+            const li=document.createElement("p")
+            li.innerText=`Number of songs: ${playlist.songs.length}`
+            list.push(li)
+        }
+        else if(key!=="id"){
+            const li=document.createElement("p")
+            li.innerText=playlist[key];
+            list.push(li)
+        }
+    }
+    const li=document.createElement("p")
+    let sumDuration = toCorrectDuration(playlistDuration(playlist))
+    li.innerText=sumDuration;
+    list.push(li)
+    return list 
+}
+
+function toCorrectDuration(seconds){ //transform duration for people
+    let mm;
+    if(Math.floor(seconds/60)<10){
+        mm=`0${Math.floor(seconds/60)}`;
+    }
+    else mm=`${Math.floor(seconds/60)}`;
+    let ss;
+    if(Math.floor(seconds%60)<10){
+         ss=`0${Math.floor(seconds%60)}`;
+    }
+    else ss=`${Math.floor(seconds%60)}`;
+    return mm+":"+ss;
+  }
+
+function playlistDuration(playlist) {
+    let sumDuration=0;
+    for(let i=0;i<playlist.songs.length;i++){
+      sumDuration+=player.songs[songIndex(songById(playlist.songs[i]))].duration;
+    }
+    return sumDuration;
+  }
+
+  function songById(id){
+    let songObj=player.songs.find(x=> x.id===id);
+    if (songObj===undefined){
+      throw "Not a Valid ID"
+    }
+    return songObj;
+}
+
+function songIndex(song){
+    let index=player.songs.indexOf(song);
+    return index
+}
+
+function sortArray(songA, songB){
+      return songA.title.localeCompare(songB.title);
+}
+
+player.songs.sort(sortArray);
+const listOfSongs=document.getElementById("songs");
+for(let i=0;i<player.songs.length;i++){
+    listOfSongs.appendChild(createSongElement(player.songs[i]))
+}
+const listOfPLaylists=document.getElementById("playlists")
+for(let i=0;i<player.playlists.length;i++){
+    listOfPLaylists.appendChild(createPlaylistElement(player.playlists[i]))
+}

From d01a2c9a3c5426161b4c94696b39a3338d9ab531 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Mon, 13 Sep 2021 15:50:35 +0300
Subject: [PATCH 02/15] Improving code

Making code more readable  and effective. Improving function of CreateElement and making player
---
 index.html       |   2 +
 scripts/index.js | 123 +++++++++++++++++++++--------------------------
 style.css        |   1 -
 3 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/index.html b/index.html
index c55fb482..900f051d 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,12 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        <h1 class="heading" id="mainHeading">Songs</h1>
         <div id="songs">
             <!-- Generated songs go here -->
         </div>
         <div id="playlists">
+            <h1 class="heading">Playlists<h1>
             <!-- Generated playlists go here -->
         </div>
     </body>
diff --git a/scripts/index.js b/scripts/index.js
index 4d8a6485..5ce3add8 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -17,8 +17,14 @@ function playSong(songId) {
  * Creates a song DOM element based on a song object.
  */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const song=arguments[0]
-    const children = songChildrenlist(song)
+    const titleEL=createElement("p",[title],["titleOfSong"])
+    const albumEL=createElement("p",[album])
+    const artistEL=createElement("p",["Artist: "+artist])
+    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"])
+    const coverArtURL=coverArt
+    const coverArtEL=createElement("img",[],["coverArtOfSong"],{ src : coverArtURL})
+    const textElement=createElement("div",[titleEL, albumEL, artistEL, durationEL],[])
+    const children = [coverArtEL, textElement]
     const classes = ["song"]
     const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id: id }
     return createElement("div", children, classes, attrs)
@@ -28,8 +34,11 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
  * Creates a playlist DOM element based on a playlist object.
  */
  function createPlaylistElement({ id, name, songs }) {
-    const playlist=arguments[0]
-    const children = playlistChildrenlist(playlist)
+    const nameEL=createElement("p",[name],["NameOfPlaylist"])
+    const songsEl=createElement("p",["Number of songs in playlist: "+songs.length])
+    const durationOfPlaylist=toCorrectDuration(playlistDuration(songs))
+    const durationEL=createElement("p",[durationOfPlaylist],["durationOfSongs"])
+    const children = [nameEL, songsEl, durationEL]
     const classes = ["playlist"]
     const attrs = {id: id}
     return createElement("div", children, classes, attrs)
@@ -47,63 +56,24 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
  * @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 = {}) {
-    let element = document.createElement(tagName)
-    classes.forEach(сlass =>element.classList.add("class") )
-    const attribute=Object.keys(attributes)
-    for(let i=0;i<attribute.length;i++){
-        element.setAttribute(attribute[i], attributes[attribute[i]])  
+    let el = document.createElement(tagName)
+    //Adding children
+    for(const child of children){
+        el.append(child);
     }
-    for(let i=0;i<children.length;i++){
-        element.appendChild(children[i])
+    //Adding classes
+    for(const cls of classes){
+        el.classList.add(cls);
     }
-    return  element
-}
-
-
-function songChildrenlist(song){
-    const list=[]
-    for(let key in song){
-        if(key==="coverArt"){
-            const img=document.createElement("img")
-            img.src=song[key]
-            list.push(img)
-        }
-        else if(key!=="id"){
-            const li=document.createElement("p");
-            if(typeof song[key] ==="number"){
-                li.innerText=toCorrectDuration(song[key]);
-                list.push(li)
-            }
-            else{
-                li.innerText=song[key];
-                list.push(li)
-            }
-        }
+    //Adding attributes
+    for(const attr in attributes){
+        el.setAttribute(attr, attributes[attr])
     }
-    return list
+    return  el
 }
 
-function playlistChildrenlist(playlist){
-    const list=[]
-    for(let key in playlist){
-        if(key==="songs") {
-            const li=document.createElement("p")
-            li.innerText=`Number of songs: ${playlist.songs.length}`
-            list.push(li)
-        }
-        else if(key!=="id"){
-            const li=document.createElement("p")
-            li.innerText=playlist[key];
-            list.push(li)
-        }
-    }
-    const li=document.createElement("p")
-    let sumDuration = toCorrectDuration(playlistDuration(playlist))
-    li.innerText=sumDuration;
-    list.push(li)
-    return list 
-}
 
 function toCorrectDuration(seconds){ //transform duration for people
     let mm;
@@ -119,15 +89,15 @@ function toCorrectDuration(seconds){ //transform duration for people
     return mm+":"+ss;
   }
 
-function playlistDuration(playlist) {
+function playlistDuration(arrSongsId) {
     let sumDuration=0;
-    for(let i=0;i<playlist.songs.length;i++){
-      sumDuration+=player.songs[songIndex(songById(playlist.songs[i]))].duration;
+    for(let i=0;i<arrSongsId.length; i++){
+        sumDuration+=player.songs[songIndex(songById(arrSongsId[i]))].duration;
     }
     return sumDuration;
-  }
+}
 
-  function songById(id){
+function songById(id){
     let songObj=player.songs.find(x=> x.id===id);
     if (songObj===undefined){
       throw "Not a Valid ID"
@@ -144,12 +114,29 @@ function sortArray(songA, songB){
       return songA.title.localeCompare(songB.title);
 }
 
-player.songs.sort(sortArray);
-const listOfSongs=document.getElementById("songs");
-for(let i=0;i<player.songs.length;i++){
-    listOfSongs.appendChild(createSongElement(player.songs[i]))
-}
-const listOfPLaylists=document.getElementById("playlists")
-for(let i=0;i<player.playlists.length;i++){
-    listOfPLaylists.appendChild(createPlaylistElement(player.playlists[i]))
+// player.songs.sort(sortArray);
+// const headingSong=createElement("h1")
+// headingSong.textContent="Songs:"
+// const listOfSongs=document.getElementById("songs");
+// listOfSongs.appendChild(headingSong)
+// for(let i=0;i<player.songs.length;i++){
+//     listOfSongs.appendChild(createSongElement(player.songs[i]))
+// }
+// const headingPlaylists=createElement("h1")
+// headingPlaylists.textContent="Playlists:"
+// const listOfPLaylists=document.getElementById("playlists")
+// listOfSongs.appendChild(headingPlaylists)
+// for(let i=0;i<player.playlists.length;i++){
+//     listOfPLaylists.appendChild(createPlaylistElement(player.playlists[i]))
+// }
+const songsListEl=document.getElementById("songs")
+player.songs.sort(sortArray)
+for(const song of player.songs){
+    const songEl=createSongElement(song)
+    songsListEl.append(songEl)
 }
+const playlistsListEl=document.getElementById("playlists")
+for(const playlist of player.playlists){
+    const playlistEl=createPlaylistElement(playlist)
+    playlistsListEl.append(playlistEl)
+}
\ No newline at end of file
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 c24da5c3b06c49430e06eabda8a6f24874c0be9a Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Mon, 13 Sep 2021 18:41:34 +0300
Subject: [PATCH 03/15] Adding Css

Adding styles in CSS working with elements classes and id
---
 index.html       |  2 +-
 scripts/index.js |  8 +++---
 style.css        | 72 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 900f051d..4c122fb8 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@ <h1 class="heading" id="mainHeading">Songs</h1>
         <div id="songs">
             <!-- Generated songs go here -->
         </div>
+        <h1 class="heading">Playlists</h1>
         <div id="playlists">
-            <h1 class="heading">Playlists<h1>
             <!-- Generated playlists go here -->
         </div>
     </body>
diff --git a/scripts/index.js b/scripts/index.js
index 5ce3add8..cff98843 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -6,9 +6,9 @@
  */
 function playSong(songId) {
     for (let song of player.songs){
-     document.getElementById(song.id).style.background="white"
+     document.getElementById(song.id).style.background="GreenYellow";
      if(song.id===songId){
-        document.getElementById(song.id).style.background="lightblue"
+        document.getElementById(song.id).style.background="LimeGreen";
      }
  }
 }
@@ -19,8 +19,8 @@ function playSong(songId) {
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const titleEL=createElement("p",[title],["titleOfSong"])
     const albumEL=createElement("p",[album])
-    const artistEL=createElement("p",["Artist: "+artist])
-    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"])
+    const artistEL=createElement("p",["Artist: "+artist],["artist"])
+    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"],{})
     const coverArtURL=coverArt
     const coverArtEL=createElement("img",[],["coverArtOfSong"],{ src : coverArtURL})
     const textElement=createElement("div",[titleEL, albumEL, artistEL, durationEL],[])
diff --git a/style.css b/style.css
index e69de29b..f36a1b4f 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+    
+  }
+
+body{
+    background: rgb(24,17,226);
+    background: linear-gradient(90deg, rgba(24,17,226,1) 0%, rgba(5,188,230,1) 50%, rgba(0,255,115,1) 100%);
+  }
+
+div.song{
+    display: flex;
+    justify-content: flex-start;
+    align-content: stretch;
+    width: 420px;
+    margin: 15px;
+    font-family: "Gill Sans", sans-serif, cursive;
+    font-size: 20px;
+    border: 3px solid;
+    border-radius: 20px;
+    background-color: GreenYellow;
+}
+
+div.playlist{
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: "Gill Sans", sans-serif, cursive;
+    border: 4px solid;
+    border-radius: 20px;
+    width: 50%;
+    margin: 25px 25%;
+    padding: 0px 20px;
+    background-color: GreenYellow;
+}
+
+img{
+    max-height: 200px;
+    margin: 15px;
+}
+
+.heading{
+    font-family: Lucida Handwriting;
+    font-size: 60px;
+    font-weight: 900;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 25px;
+}
+
+.titleOfSong{
+    font-weight: bold;
+    font-size: larger;
+    font-style: italic;
+}
+
+.artist{
+    font-style: italic;
+}
+
+#songs{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+#playlists{
+    margin-bottom: 150px;
+}
+

From 39546b67195be99d5fee63bc0ea6c59f16b358cf Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Tue, 14 Sep 2021 13:21:57 +0300
Subject: [PATCH 04/15] Deleting of useless comments

---
 scripts/index.js | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index cff98843..06bb6448 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -40,7 +40,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const durationEL=createElement("p",[durationOfPlaylist],["durationOfSongs"])
     const children = [nameEL, songsEl, durationEL]
     const classes = ["playlist"]
-    const attrs = {id: id}
+    const attrs = {}
     return createElement("div", children, classes, attrs)
 }
 
@@ -114,21 +114,6 @@ function sortArray(songA, songB){
       return songA.title.localeCompare(songB.title);
 }
 
-// player.songs.sort(sortArray);
-// const headingSong=createElement("h1")
-// headingSong.textContent="Songs:"
-// const listOfSongs=document.getElementById("songs");
-// listOfSongs.appendChild(headingSong)
-// for(let i=0;i<player.songs.length;i++){
-//     listOfSongs.appendChild(createSongElement(player.songs[i]))
-// }
-// const headingPlaylists=createElement("h1")
-// headingPlaylists.textContent="Playlists:"
-// const listOfPLaylists=document.getElementById("playlists")
-// listOfSongs.appendChild(headingPlaylists)
-// for(let i=0;i<player.playlists.length;i++){
-//     listOfPLaylists.appendChild(createPlaylistElement(player.playlists[i]))
-// }
 const songsListEl=document.getElementById("songs")
 player.songs.sort(sortArray)
 for(const song of player.songs){

From fc52198b1b3a4f0f460e96a62aef878aeb25d226 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Tue, 14 Sep 2021 16:56:09 +0300
Subject: [PATCH 05/15] Improving CSS and bonus task

Adding bonus task that duration of the song has different colors that depends of durations(less than 2 minute or more than 7)
---
 scripts/index.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++-
 style.css        | 15 ++++++++++-----
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 06bb6448..dda81590 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -13,6 +13,33 @@ function playSong(songId) {
  }
 }
 
+function durationLong(duration){
+    if(duration<120){
+        return element.style.color="green";
+    }
+    else if(duration>420){
+        return element.style.color="red"
+    } 
+    else{
+        return element.style.color="blue"
+    }
+}
+
+
+
+
+
+
+
+// function playDuration(songId) {
+//     for (let song of player.songs){
+//      document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "black";
+//      if(song.id===songId){
+//         document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "blue";
+//      }
+//  }
+// }
+
 /**
  * Creates a song DOM element based on a song object.
  */
@@ -20,7 +47,8 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const titleEL=createElement("p",[title],["titleOfSong"])
     const albumEL=createElement("p",[album])
     const artistEL=createElement("p",["Artist: "+artist],["artist"])
-    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"],{})
+    const durationEL=createElement("p",[toCorrectDuration(duration)],["durationOfSongs"])
+    durationEL.style.color=reflectColor(duration);
     const coverArtURL=coverArt
     const coverArtEL=createElement("img",[],["coverArtOfSong"],{ src : coverArtURL})
     const textElement=createElement("div",[titleEL, albumEL, artistEL, durationEL],[])
@@ -114,11 +142,31 @@ function sortArray(songA, songB){
       return songA.title.localeCompare(songB.title);
 }
 
+function reflectColor(duration){
+    if(duration<=120){
+        return "lime"
+    }
+    else if(duration>=420){
+        return "red"
+    }
+    else{
+        let r=0;
+        let g=255;
+        let b=0;
+        let durationDifference=duration-120;
+        r+=Math.floor(durationDifference*0.85)
+        g-=Math.floor(durationDifference*0.85)
+        let rgbColor = `rgb(${r},${g},${b})`
+        return rgbColor
+    }
+}
+
 const songsListEl=document.getElementById("songs")
 player.songs.sort(sortArray)
 for(const song of player.songs){
     const songEl=createSongElement(song)
     songsListEl.append(songEl)
+    // document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "rgb(155, 102, 102)";
 }
 const playlistsListEl=document.getElementById("playlists")
 for(const playlist of player.playlists){
diff --git a/style.css b/style.css
index f36a1b4f..5aae8990 100644
--- a/style.css
+++ b/style.css
@@ -13,9 +13,10 @@ div.song{
     justify-content: flex-start;
     align-content: stretch;
     width: 420px;
-    margin: 15px;
+    margin: 15px; 
     font-family: "Gill Sans", sans-serif, cursive;
-    font-size: 20px;
+    font-size: 18px;
+    font-weight: 500;
     border: 3px solid;
     border-radius: 20px;
     background-color: GreenYellow;
@@ -37,10 +38,14 @@ div.playlist{
 }
 
 img{
-    max-height: 200px;
+    max-height: 120px;
     margin: 15px;
 }
 
+p{
+    margin: 10px;
+}
+
 .heading{
     font-family: Lucida Handwriting;
     font-size: 60px;
@@ -52,8 +57,8 @@ img{
 
 .titleOfSong{
     font-weight: bold;
-    font-size: larger;
-    font-style: italic;
+    font-size: 20px;
+    margin-top: 15px;
 }
 
 .artist{

From d242878b12c877fda7182872ea7a45956e7d3ad4 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Wed, 15 Sep 2021 20:01:28 +0300
Subject: [PATCH 06/15] Starting new project

I copied all functions from index.js that I used before to new javascript file
Making all css file in comment because it is useless at the moment
---
 index.new.html       |   4 +-
 scripts/index.js     |  39 ++-----------
 scripts/index.new.js | 134 +++++++++++++++++++++++++++++++++++++++----
 style.css            |   8 +--
 4 files changed, 135 insertions(+), 50 deletions(-)

diff --git a/index.new.html b/index.new.html
index eba39f17..cd6a4485 100644
--- a/index.new.html
+++ b/index.new.html
@@ -22,7 +22,7 @@ <h2>Add a new song</h2>
             <button id="add-button">Add</button>
         </div>
         <div id="songs">
-            <h2>Songs</h2>
+            <h2 class="heading" id="mainHeading">Songs</h2>
             <div class="list">
                 <!-- <div class="song">
                     <div class="left">
@@ -44,7 +44,7 @@ <h2>Songs</h2>
             </div>
         </div>
         <div id="playlists">
-            <h2>Playlists</h2>
+            <h2 class="heading">Playlists</h2>
             <div class="list">
                 <!-- <div class="playlist">
                     <div class="left">
diff --git a/scripts/index.js b/scripts/index.js
index dda81590..e2d574b5 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -6,40 +6,12 @@
  */
 function playSong(songId) {
     for (let song of player.songs){
-     document.getElementById(song.id).style.background="GreenYellow";
-     if(song.id===songId){
-        document.getElementById(song.id).style.background="LimeGreen";
-     }
- }
-}
-
-function durationLong(duration){
-    if(duration<120){
-        return element.style.color="green";
-    }
-    else if(duration>420){
-        return element.style.color="red"
-    } 
-    else{
-        return element.style.color="blue"
+    document.getElementById(song.id).style.background="GreenYellow";
+        if(song.id===songId){
+            document.getElementById(song.id).style.background="LimeGreen";
+        }
     }
 }
-
-
-
-
-
-
-
-// function playDuration(songId) {
-//     for (let song of player.songs){
-//      document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "black";
-//      if(song.id===songId){
-//         document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "blue";
-//      }
-//  }
-// }
-
 /**
  * Creates a song DOM element based on a song object.
  */
@@ -165,8 +137,7 @@ const songsListEl=document.getElementById("songs")
 player.songs.sort(sortArray)
 for(const song of player.songs){
     const songEl=createSongElement(song)
-    songsListEl.append(songEl)
-    // document.getElementById(song.id).getElementsByClassName("durationOfSongs")[0].style.color = "rgb(155, 102, 102)";
+    songsListEl.append(songEl);
 }
 const playlistsListEl=document.getElementById("playlists")
 for(const playlist of player.playlists){
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..e58359ab 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,8 +4,13 @@
  *
  * @param {Number} songId - the ID of the song to play
  */
-function playSong(songId) {
-    // Your code here
+ function playSong(songId) {
+    for (let song of player.songs){
+    document.getElementById(song.id).style.background="GreenYellow";
+        if(song.id===songId){
+            document.getElementById(song.id).style.background="LimeGreen";
+        }
+    }
 }
 
 /**
@@ -47,9 +52,22 @@ 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 titleEL=createElement("span",[title],["title"])
+    const albumEL=createElement("span",[album],["album"])
+    const artistEL=createElement("span",[artist],["artist"])
+    const songDetailsEL=createElement("div",[titleEL, albumEL, artistEL],["song-details"])
+    const coverArtURL=coverArt
+    const coverArtEL=createElement("img",[],["cover-art"],{ src : coverArtURL})
+    const leftpartEL=createElement("div",[coverArtEL, songDetailsEL],["left"],)
+    const durationEL=createElement("div",[toCorrectDuration(duration)],["song-duration"])
+    durationEL.style.color=reflectColor(duration);
+    const buttonPlay=createElement("button",["Play"],["play-button"])
+    const buttonRemove=createElement("button",["Remove"],["remove-button"])
+    const songActionsEL=createElement("div",[buttonPlay, buttonRemove],["song-actions"])
+    const rightpartEL=createElement("div",[durationEL, songActionsEL],["right"],)
+    const children = [leftpartEL, rightpartEL]
+    const classes = ["song"]
+    const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id: id }
     const eventListeners = {}
     return createElement("div", children, classes, attrs, eventListeners)
 }
@@ -58,8 +76,14 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
  * Creates a playlist DOM element based on a playlist object.
  */
 function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+    const nameEL=createElement("span",[name],["name"])
+    const leftpartEL=createElement("div",[nameEL],["left"],)
+    const songsEl=createElement("span",[songs.length+" songs"],["playlist-length"])
+    const durationOfPlaylist=toCorrectDuration(playlistDuration(songs))
+    const durationEL=createElement("span",[durationOfPlaylist],["playlist-duration"])
+    const rightpartEL=createElement("div",[songsEl, durationEL],["right"],)
+    const children = [leftpartEL, rightpartEL]
+    const classes = ["playlist"]
     const attrs = {}
     const eventListeners = {}
     return createElement("div", children, classes, attrs, eventListeners)
@@ -79,21 +103,111 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Object} eventListeners - the event listeners on the element
  */
 function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
-    // Your code here
+    let el = document.createElement(tagName)
+    //Adding children
+    for(const child of children){
+        el.append(child);
+    }
+    //Adding classes
+    for(const cls of classes){
+        el.classList.add(cls);
+    }
+    //Adding attributes
+    for(const attr in attributes){
+        el.setAttribute(attr, attributes[attr])
+    }
+    //Adding events
+
+    return  el
+}
+
+function toCorrectDuration(seconds){ //transform duration for people
+    let mm;
+    if(Math.floor(seconds/60)<10){
+        mm=`0${Math.floor(seconds/60)}`;
+    }
+    else mm=`${Math.floor(seconds/60)}`;
+    let ss;
+    if(Math.floor(seconds%60)<10){
+         ss=`0${Math.floor(seconds%60)}`;
+    }
+    else ss=`${Math.floor(seconds%60)}`;
+    return mm+":"+ss;
+  }
+
+function playlistDuration(arrSongsId) {
+    let sumDuration=0;
+    for(let i=0;i<arrSongsId.length; i++){
+        sumDuration+=player.songs[songIndex(songById(arrSongsId[i]))].duration;
+    }
+    return sumDuration;
+}
+
+function songById(id){
+    let songObj=player.songs.find(x=> x.id===id);
+    if (songObj===undefined){
+      throw "Not a Valid ID"
+    }
+    return songObj;
 }
 
+function songIndex(song){
+    let index=player.songs.indexOf(song);
+    return index
+}
+
+function sortSongs(songA, songB){
+      return songA.title.localeCompare(songB.title);
+}
+
+function sortPlaylists(playlistA, playlistB){
+    return playlistA.name.localeCompare(playlistB.name);
+}
+
+function reflectColor(duration){
+    if(duration<=120){
+        return "lime"
+    }
+    else if(duration>=420){
+        return "red"
+    }
+    else{
+        let r=0;
+        let g=255;
+        let b=0;
+        let durationDifference=duration-120;
+        r+=Math.floor(durationDifference*0.85)
+        g-=Math.floor(durationDifference*0.85)
+        let rgbColor = `rgb(${r},${g},${b})`
+        return rgbColor
+    }
+}
+
+
+
+
 /**
  * Inserts all songs in the player as DOM elements into the songs list.
  */
 function generateSongs() {
-    // Your code here
+    const songsListEl=document.getElementById("songs").querySelector("div")
+    player.songs.sort(sortSongs)
+    for(const song of player.songs){
+        const songEl=createSongElement(song)
+        songsListEl.append(songEl);
+    }
 }
 
 /**
  * Inserts all playlists in the player as DOM elements into the playlists list.
  */
 function generatePlaylists() {
-    // Your code here
+    const playlistsListEl=document.getElementById("playlists").querySelector("div")
+    player.playlists.sort(sortPlaylists)
+    for(const playlist of player.playlists){
+        const playlistEl=createPlaylistElement(playlist)
+        playlistsListEl.append(playlistEl)
+}
 }
 
 // Creating the page structure
diff --git a/style.css b/style.css
index 5aae8990..2cd943a2 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-* {
+/* * {
     box-sizing: border-box;
     
   }
@@ -42,7 +42,7 @@ img{
     margin: 15px;
 }
 
-p{
+span{
     margin: 10px;
 }
 
@@ -55,7 +55,7 @@ p{
     margin-bottom: 25px;
 }
 
-.titleOfSong{
+.title{
     font-weight: bold;
     font-size: 20px;
     margin-top: 15px;
@@ -74,4 +74,4 @@ p{
 #playlists{
     margin-bottom: 150px;
 }
-
+  */

From df40889e471547d13f04de6b73f19c94774bf418 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Thu, 16 Sep 2021 00:06:25 +0300
Subject: [PATCH 07/15] Making event Playsong

Adding event playsong that make other background to song that playing in the moment
---
 scripts/index.new.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/scripts/index.new.js b/scripts/index.new.js
index e58359ab..f6349b79 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,15 +4,17 @@
  *
  * @param {Number} songId - the ID of the song to play
  */
- function playSong(songId) {
-    for (let song of player.songs){
-    document.getElementById(song.id).style.background="GreenYellow";
+
+function playSong(songId){
+    for(let song of player.songs){
+        document.getElementById(song.id).style.background="none";
         if(song.id===songId){
             document.getElementById(song.id).style.background="LimeGreen";
         }
     }
 }
 
+
 /**
  * Removes a song from the player, and updates the DOM to match.
  *
@@ -67,7 +69,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const rightpartEL=createElement("div",[durationEL, songActionsEL],["right"],)
     const children = [leftpartEL, rightpartEL]
     const classes = ["song"]
-    const attrs = { onclick: `playSong(${id})`,cursor:"pointer",id: id }
+    const attrs = {cursor:"pointer",id: id }
     const eventListeners = {}
     return createElement("div", children, classes, attrs, eventListeners)
 }
@@ -117,7 +119,9 @@ function createElement(tagName, children = [], classes = [], attributes = {}, ev
         el.setAttribute(attr, attributes[attr])
     }
     //Adding events
-
+    for(const event in eventListeners){
+        el.addEventListener(event, eventListeners[event])
+    }
     return  el
 }
 
@@ -214,5 +218,20 @@ function generatePlaylists() {
 generateSongs()
 generatePlaylists()
 
+
+songs.addEventListener("click", (e) => {
+    const target=e.target
+    const cls=target.className
+    const songId=parseInt(target.closest(".song").id)
+    if (cls!=="play-button"){
+        return;
+    } else {
+       playSong(songId)
+    }
+})
+
+
+ 
+
 // Making the add-song-button actually do something
 document.getElementById("add-button").addEventListener("click", handleAddSongEvent)

From 250cc1566c7975213ef92d528c6259b9a66aafcb Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Thu, 16 Sep 2021 01:55:57 +0300
Subject: [PATCH 08/15] Adding function RemoveSong

Adding function RemoveSong that can remove song from player and also from playlists after that it reload all DOM elements
Also making event Delegation to play-song button and remove-song button
---
 scripts/index.new.js | 54 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/scripts/index.new.js b/scripts/index.new.js
index f6349b79..364c2865 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -21,7 +21,25 @@ function playSong(songId){
  * @param {Number} songId - the ID of the song to remove
  */
 function removeSong(songId) {
-    // Your code here
+    let index=songIndex(songById(songId))
+    for(let list of player.playlists){
+        if(list.songs.includes(songId)){
+            list.songs.splice((list.songs.indexOf(songId)),1)
+        }
+    }
+    player.songs.splice(index,1)
+    let listOfSongs = document.querySelectorAll(".song");
+    for(const song of listOfSongs){
+        song.remove()
+    }
+    generateSongs();
+    let listOfPlaylists = document.querySelectorAll(".playlist");
+    for(const playlist of listOfPlaylists){
+        playlist.remove()
+    }
+    generatePlaylists();
+    
+
 }
 
 /**
@@ -38,7 +56,16 @@ function addSong({ title, album, artist, duration, coverArt }) {
  * @param {MouseEvent} event - the click event
  */
 function handleSongClickEvent(event) {
-    // Your code here
+    const target=event.target
+    const songId=parseInt(target.closest(".song").id)
+    switch(target.className){
+        case 'play-button':
+            playSong(songId);
+            break;
+        case 'remove-button':
+            removeSong(songId);
+            break;
+    }
 }
 
 /**
@@ -219,16 +246,19 @@ generateSongs()
 generatePlaylists()
 
 
-songs.addEventListener("click", (e) => {
-    const target=e.target
-    const cls=target.className
-    const songId=parseInt(target.closest(".song").id)
-    if (cls!=="play-button"){
-        return;
-    } else {
-       playSong(songId)
-    }
-})
+songs.addEventListener("click", handleSongClickEvent)
+
+
+// (e) => {
+//     const target=e.target
+//     const cls=target.className
+//     const songId=parseInt(target.closest(".song").id)
+//     if (cls!=="play-button"){
+//         return;
+//     } else {
+//        playSong(songId)
+//     }
+// }
 
 
  

From c4a7cfa59deb9156b41b5b74c77b59913d96e094 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Thu, 16 Sep 2021 02:17:21 +0300
Subject: [PATCH 09/15] Improving removeSong fucntion

---
 scripts/index.new.js | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/scripts/index.new.js b/scripts/index.new.js
index 364c2865..ee934ba6 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -28,11 +28,7 @@ function removeSong(songId) {
         }
     }
     player.songs.splice(index,1)
-    let listOfSongs = document.querySelectorAll(".song");
-    for(const song of listOfSongs){
-        song.remove()
-    }
-    generateSongs();
+    document.getElementById(songId).remove()
     let listOfPlaylists = document.querySelectorAll(".playlist");
     for(const playlist of listOfPlaylists){
         playlist.remove()
@@ -244,23 +240,9 @@ function generatePlaylists() {
 // Creating the page structure
 generateSongs()
 generatePlaylists()
-
-
+//Adding Event Delegation to parent element
 songs.addEventListener("click", handleSongClickEvent)
 
-
-// (e) => {
-//     const target=e.target
-//     const cls=target.className
-//     const songId=parseInt(target.closest(".song").id)
-//     if (cls!=="play-button"){
-//         return;
-//     } else {
-//        playSong(songId)
-//     }
-// }
-
-
  
 
 // Making the add-song-button actually do something

From bb6574ad621b9eb533bf88d6841133fe47f0dac8 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Thu, 16 Sep 2021 13:55:49 +0300
Subject: [PATCH 10/15] AddSongEvent

Making Add button and all inputs worked
Improved playSong functions
addSongFunction add song to the player and add it to the DOM elements
---
 scripts/index.new.js | 61 +++++++++++++++++++++++++++++++++++---------
 style.css            |  6 ++++-
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/scripts/index.new.js b/scripts/index.new.js
index ee934ba6..390bfe92 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,14 +4,12 @@
  *
  * @param {Number} songId - the ID of the song to play
  */
-
 function playSong(songId){
-    for(let song of player.songs){
-        document.getElementById(song.id).style.background="none";
-        if(song.id===songId){
-            document.getElementById(song.id).style.background="LimeGreen";
-        }
+    let selected = document.querySelectorAll('.selected');
+    for(let elem of selected) {
+        elem.classList.remove('selected');
     }
+    document.getElementById(songId).classList.add('selected');
 }
 
 
@@ -34,15 +32,18 @@ function removeSong(songId) {
         playlist.remove()
     }
     generatePlaylists();
-    
-
 }
 
 /**
  * Adds a song to the player, and updates the DOM to match.
  */
 function addSong({ title, album, artist, duration, coverArt }) {
-    // Your code here
+    addSongToPlayer(title, album, artist, duration, coverArt)
+    let listOfSongs = document.querySelectorAll(".song");
+    for(const song of listOfSongs){
+        song.remove()
+    }
+    generateSongs();
 }
 
 /**
@@ -56,7 +57,7 @@ function handleSongClickEvent(event) {
     const songId=parseInt(target.closest(".song").id)
     switch(target.className){
         case 'play-button':
-            playSong(songId);
+            playSong(songId)
             break;
         case 'remove-button':
             removeSong(songId);
@@ -70,7 +71,18 @@ function handleSongClickEvent(event) {
  * @param {MouseEvent} event - the click event
  */
 function handleAddSongEvent(event) {
-    // Your code here
+    const newSong={}
+    const inputesElements=document.querySelectorAll("input")
+    for(const input of inputesElements){
+        let name=input.name
+        if(name.includes("-")){
+            name="coverArt"
+        }
+        let value=input.value
+        newSong[name]=value;
+        input.value="";
+    }
+    addSong(newSong);
 }
 
 /**
@@ -160,7 +172,24 @@ function toCorrectDuration(seconds){ //transform duration for people
     }
     else ss=`${Math.floor(seconds%60)}`;
     return mm+":"+ss;
-  }
+}
+
+function addSongToPlayer(title, album, artist, duration, coverArt) {
+    let obj={
+      id: newId(player.songs),
+      title: title,
+      album: album,
+      artist: artist,
+      duration: durationToSeconds(duration),
+      coverArt: coverArt
+    }
+    player.songs.push(obj)
+}
+
+function durationToSeconds(str){
+    let duration=(parseInt(str.slice(0,2))*60)+parseInt(str.slice((str.length-2),(str.length)));
+    return duration;
+}
 
 function playlistDuration(arrSongsId) {
     let sumDuration=0;
@@ -170,6 +199,14 @@ function playlistDuration(arrSongsId) {
     return sumDuration;
 }
 
+function newId(obj){ //I take the next max id of the object
+    let maxId=0;
+    for (let i of obj){
+      if(i.id>maxId) maxId=i.id;
+    }
+    return maxId+1;
+}
+
 function songById(id){
     let songObj=player.songs.find(x=> x.id===id);
     if (songObj===undefined){
diff --git a/style.css b/style.css
index 2cd943a2..805c71ee 100644
--- a/style.css
+++ b/style.css
@@ -21,7 +21,11 @@ div.song{
     border-radius: 20px;
     background-color: GreenYellow;
 }
-
+*/
+.selected{
+    background-color: LimeGreen;
+}
+/*
 div.playlist{
     display: flex;
     justify-content: space-between;

From 0fe400516c0dc3c195c033e9b2d1f8b1ac045427 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Fri, 17 Sep 2021 06:19:18 +0300
Subject: [PATCH 11/15] Adding css styles

CSS to my file
---
 index.new.html       |   4 +-
 scripts/index.new.js |   4 +-
 style.css            | 115 +++++++++++++++++++++++++++++++++----------
 3 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/index.new.html b/index.new.html
index cd6a4485..70d2a67c 100644
--- a/index.new.html
+++ b/index.new.html
@@ -9,9 +9,9 @@
         <script src="./scripts/index.new.js" defer></script>
     </head>
     <body>
-        <h1>Awesome Player!!!</h1>
+        <h1>Awesome Player!</h1>
         <div id="add-section">
-            <h2>Add a new song</h2>
+            <h2 class="heading">Add a new song</h2>
             <div id="inputs">
                 <input name="title" placeholder="Title">
                 <input name="album" placeholder="Album">
diff --git a/scripts/index.new.js b/scripts/index.new.js
index 390bfe92..86621a54 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -98,8 +98,8 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const leftpartEL=createElement("div",[coverArtEL, songDetailsEL],["left"],)
     const durationEL=createElement("div",[toCorrectDuration(duration)],["song-duration"])
     durationEL.style.color=reflectColor(duration);
-    const buttonPlay=createElement("button",["Play"],["play-button"])
-    const buttonRemove=createElement("button",["Remove"],["remove-button"])
+    const buttonPlay=createElement("button",["▶️"],["play-button"])
+    const buttonRemove=createElement("button",["🗑️"],["remove-button"])
     const songActionsEL=createElement("div",[buttonPlay, buttonRemove],["song-actions"])
     const rightpartEL=createElement("div",[durationEL, songActionsEL],["right"],)
     const children = [leftpartEL, rightpartEL]
diff --git a/style.css b/style.css
index 805c71ee..c554cc84 100644
--- a/style.css
+++ b/style.css
@@ -1,58 +1,79 @@
-/* * {
+* {
     box-sizing: border-box;
     
   }
 
 body{
-    background: rgb(24,17,226);
-    background: linear-gradient(90deg, rgba(24,17,226,1) 0%, rgba(5,188,230,1) 50%, rgba(0,255,115,1) 100%);
+    background: linear-gradient(90deg, rgb(71, 66, 230) 0%, rgba(5,188,230,1) 30%, rgba(0,255,115,1) 100%);
   }
 
+h1{
+    font-family: Lucida Handwriting;
+    font-size: 60px;
+    font-weight: 900;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 25px;
+}
+
 div.song{
     display: flex;
-    justify-content: flex-start;
-    align-content: stretch;
-    width: 420px;
+    justify-content: space-between;
+    align-items: center;
+    width: 450px;
     margin: 15px; 
     font-family: "Gill Sans", sans-serif, cursive;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     border: 3px solid;
     border-radius: 20px;
-    background-color: GreenYellow;
+    background-color: whitesmoke;
 }
-*/
-.selected{
-    background-color: LimeGreen;
-}
-/*
+
 div.playlist{
     display: flex;
     justify-content: space-between;
+    align-items: center;
     text-align: center;
     font-size: 20px;
     font-weight: 600;
     font-family: "Gill Sans", sans-serif, cursive;
-    border: 4px solid;
-    border-radius: 20px;
+    border: 3px solid;
+    border-radius: 25px;
     width: 50%;
-    margin: 25px 25%;
+    margin: 15px 25%;
     padding: 0px 20px;
-    background-color: GreenYellow;
+    background-color: whitesmoke;
 }
 
 img{
-    max-height: 120px;
-    margin: 15px;
+    max-height: 80px;
+    margin: 10px;
 }
 
 span{
+    margin: 2px;
+}
+
+input{
+    border-radius: 10px;
+    font-size: 16px;
+    padding: 5px;
+    border: 3px solid;
+    border-color: black;
     margin: 10px;
 }
 
+.list{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
 .heading{
     font-family: Lucida Handwriting;
-    font-size: 60px;
+    font-size: 45px;
     font-weight: 900;
     text-align: center;
     margin-top: 60px;
@@ -62,20 +83,64 @@ span{
 .title{
     font-weight: bold;
     font-size: 20px;
-    margin-top: 15px;
 }
 
 .artist{
     font-style: italic;
 }
 
-#songs{
+.selected{
+    background-color: rgb(65, 236, 65) !important;
+}
+
+.left{
+    display: flex;
+    align-items: center;
+}
+
+.song-details{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.right{
     display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 5px 10px;
+}
+
+.right>div{
+    font-size: 20px;
+    margin: 3px;
+}
+
+.remove-button{
+    background-color: red;
+    margin-left: 5px;
+}
+
+#add-button{
+    margin-top: 20px;
+    margin-left: 47%;
+    height: 40px;
+    width: 90px;
+    font-size: 24px;
+    font-weight: 600;
+    background-color: rgb(15, 204, 15);
+    padding: 2px 10px;
+    border-radius: 5px;
+}
+
+#inputs{
+    display: flex;
+    justify-content: center;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    
 }
 
 #playlists{
-    margin-bottom: 150px;
+    margin-bottom: 100px;
 }
-  */
+ 

From 0239e38c51943589dcd6c92512dc702df41d6132 Mon Sep 17 00:00:00 2001
From: DimaTomilin <89575657+DimaTomilin@users.noreply.github.com>
Date: Fri, 17 Sep 2021 08:40:37 +0300
Subject: [PATCH 12/15] Create Catch links.html

---
 Catch links.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 Catch links.html

diff --git a/Catch links.html b/Catch links.html
new file mode 100644
index 00000000..c39ae7e0
--- /dev/null
+++ b/Catch links.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <fieldset id="contents">
+    <legend>#contents</legend>
+    <p>
+      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
+    </p>
+  </fieldset>
+
+  <script>
+    function handleLink(href) {
+        let wantLeaving = confirm(`Leave for ${href}?`);
+        if (!wantLeaving) return false;
+      }
+
+    contents.addEventListener("click",(event)=> {
+      let target = event.target.closest('a');
+
+      if (target && contents.contains(target)) {
+        return handleLink(target.getAttribute('href'));
+      }
+    });
+  </script>
+
+</body>
+</html>

From 46062995ad6b78b6588cd25fa8d134131d24d8b6 Mon Sep 17 00:00:00 2001
From: DimaTomilin <89575657+DimaTomilin@users.noreply.github.com>
Date: Fri, 17 Sep 2021 08:45:46 +0300
Subject: [PATCH 13/15] Delete Catch links.html

---
 Catch links.html | 33 ---------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 Catch links.html

diff --git a/Catch links.html b/Catch links.html
deleted file mode 100644
index c39ae7e0..00000000
--- a/Catch links.html	
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8">
-</head>
-
-<body>
-
-  <fieldset id="contents">
-    <legend>#contents</legend>
-    <p>
-      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
-    </p>
-  </fieldset>
-
-  <script>
-    function handleLink(href) {
-        let wantLeaving = confirm(`Leave for ${href}?`);
-        if (!wantLeaving) return false;
-      }
-
-    contents.addEventListener("click",(event)=> {
-      let target = event.target.closest('a');
-
-      if (target && contents.contains(target)) {
-        return handleLink(target.getAttribute('href'));
-      }
-    });
-  </script>
-
-</body>
-</html>

From a81d0e66460fc108bce6bd614dc86465b3afcc1c Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Fri, 17 Sep 2021 09:45:48 +0300
Subject: [PATCH 14/15] Comment

Comments to the functions
---
 scripts/index.new.js | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/scripts/index.new.js b/scripts/index.new.js
index 86621a54..f5d102d5 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -159,7 +159,9 @@ function createElement(tagName, children = [], classes = [], attributes = {}, ev
     }
     return  el
 }
-
+/*
+    Function that taking duration on the seconds and transforme it to format mm:ss
+*/
 function toCorrectDuration(seconds){ //transform duration for people
     let mm;
     if(Math.floor(seconds/60)<10){
@@ -174,6 +176,9 @@ function toCorrectDuration(seconds){ //transform duration for people
     return mm+":"+ss;
 }
 
+/*
+    Function that adding song to the player array
+*/
 function addSongToPlayer(title, album, artist, duration, coverArt) {
     let obj={
       id: newId(player.songs),
@@ -186,11 +191,17 @@ function addSongToPlayer(title, album, artist, duration, coverArt) {
     player.songs.push(obj)
 }
 
+/*
+    Function that transform duration in mm:ss format to seconds
+*/
 function durationToSeconds(str){
     let duration=(parseInt(str.slice(0,2))*60)+parseInt(str.slice((str.length-2),(str.length)));
     return duration;
 }
 
+/*
+    Function that sum durations of all songs in the playlist and return result
+*/
 function playlistDuration(arrSongsId) {
     let sumDuration=0;
     for(let i=0;i<arrSongsId.length; i++){
@@ -199,7 +210,10 @@ function playlistDuration(arrSongsId) {
     return sumDuration;
 }
 
-function newId(obj){ //I take the next max id of the object
+/*
+    Function that searches the next max id in the object
+*/
+function newId(obj){ 
     let maxId=0;
     for (let i of obj){
       if(i.id>maxId) maxId=i.id;
@@ -207,6 +221,10 @@ function newId(obj){ //I take the next max id of the object
     return maxId+1;
 }
 
+
+/*
+    Function that return object of song from player.songs usesed ID of song
+*/
 function songById(id){
     let songObj=player.songs.find(x=> x.id===id);
     if (songObj===undefined){
@@ -215,19 +233,35 @@ function songById(id){
     return songObj;
 }
 
+
+/*
+    Function that return index of the song Object in the array of the songs
+*/
 function songIndex(song){
     let index=player.songs.indexOf(song);
     return index
 }
 
+
+/*
+    Function that sorts songs by title
+*/
 function sortSongs(songA, songB){
       return songA.title.localeCompare(songB.title);
 }
 
+
+/*
+    Function that sorts playlists by name
+*/
 function sortPlaylists(playlistA, playlistB){
     return playlistA.name.localeCompare(playlistB.name);
 }
 
+
+/*
+    Function that change color of duration because long of the song
+*/
 function reflectColor(duration){
     if(duration<=120){
         return "lime"

From 2cc9a44dc979f70b65375bdc096f403da7d9e682 Mon Sep 17 00:00:00 2001
From: holdbracha <0527161548a@gmail.com>
Date: Sat, 18 Sep 2021 18:30:37 +0300
Subject: [PATCH 15/15] Update README.md

---
 README.md | 62 ++++++++++---------------------------------------------
 1 file changed, 11 insertions(+), 51 deletions(-)

diff --git a/README.md b/README.md
index 3ed9a821..5d345ea7 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,26 @@
 # MP3 DOM
 
-The users of your MP3 player complained about it being inconvenient for regular (non-programmer) people. Time to build a GUI!
+This is my MP3 player that I did for this work I used Javascript, HTML and CSS. this is my weekend task of the course of FullStak developer. In this work I have some songs in my player but also it has function to add songs what you want. So in my project is three sections: Adding songs, Songs and Playlist. I trying to write comments in my test that will help to understand my logic and what I do in the code.
 
-Your task is to create a webpage that conveniently displays the songs and playlists in a player object. The player object will have the same structure as in your previous assignment.
 
-## General Instructions
+## Requirements!
 
-1. Fork this repo into your account.
-2. Clone the forked repo to your computer.
-3. Create a new git branch for your work.
-4. Complete the requirements.
-5. Submit your work.
-6. May the odds be ever in your favor!
+This is requirements that I had.
 
-## 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:
-
+-   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.
 -   A list of the `songs` in the player, sorted by their titles
 -   A list of the `playlists` in the player, sorted by their names
 
+
 ### Songs
 
-Each song list item shall display the following details:
+Each song list item display the following details:
 
 -   song `title`
 -   `album` name
@@ -37,46 +28,15 @@ Each song list item shall display the following details:
 -   an image with the album's cover art (`coverArt`)
 -   song `duration` (in `mm:ss` format, of course)
 
-One song can be played at a time. There should be some indication of the currently playing song (the specific indication is up to you). Clicking on a song will change the indication of the currently playing song. We have already provided code that handles the click event for you.
+One song can be played at a time. There is indication of the currently playing song.
+
 
 ### Playlists
 
-Every playlist list item should display the following information:
+Every playlist list item display the following information:
 
 -   playlist `name`
 -   the number of songs in the playlist
 -   the total duration of the playlist
 
-## Bonus Requirements
-
--   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
-
-You are provided with a template for your project:
-
--   an HTML file (`index.html`)
--   a linked, empty CSS file (`style.css`)
--   a linked JS script with a sample `player` object (`player.js`)
--   a linked JS script with a template for your code (`index.js`)
--   an `images` folder with the webpage icon and song cover art
-
-The HTML defines the basic structure of the page. There are 2 container elements - one for the songs and one for the playlists. You may add more structural elements to the HTML (headings etc.), but the songs and playlists themselves must be generated using JS, based on the `player` object.
-
-## Submission
-
-1. On GitHub, open a pull request from your branch to the main branch.
-2. **Do not merge the pull request!**
-3. Add the user `Cyber4sPopo` as collaborator to your repo.
-4. Submit a link to the pull request in Google Classroom.
-
-## Additional Remarks
 
--   **Avoid duplication!** Use JS functions and CSS classes wisely.
--   Maintain high coding standards. Keep your code readable, indented properly, commented and indicative.
--   Maintain a proper git workflow. Commit often, push often, write informative commit messages.
--   You are free to style your webpage however you like. Make it BEAUTIFUL!