From d150a07b43e0c107a881088866a59062a74e9b18 Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <rnrwznr@gmail.com>
Date: Mon, 13 Sep 2021 02:07:33 +0300
Subject: [PATCH 1/6] Add function to player.js

---
 index.html        |   1 -
 scripts/index.js  | 118 +++++++++++++++++++++++++++++++++-------------
 scripts/player.js |  43 +++++++++++++++++
 style.css         |   1 -
 4 files changed, 127 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index c55fb482..04767524 100644
--- a/index.html
+++ b/index.html
@@ -16,4 +16,3 @@
             <!-- Generated playlists go here -->
         </div>
     </body>
-</html>
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..e1cc5a0e 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,47 +1,97 @@
-/**
- * Plays a song from the player.
- * Playing a song means changing the visual indication of the currently playing song.
- *
- * @param {String} songId - the ID of the song to play
- */
+
+
+
 function playSong(songId) {
-    // Your code here
+   let otherSongs = document.getElementsByClassName('songShell');
+   for(let otherSong of otherSongs){
+       otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)";
+   }
+   document.getElementById(songId).style.backgroundColor = "red";
+
+   if(songId < 7){
+       window.setTimeout(function(){playSong(songId + 1);} ,getSongObjectById(songId).duration * 1000);
+   }
+   // Your code here
 }
 
 /**
- * Creates a song DOM element based on a song object.
- */
+* 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)
+   const children = [];
+   const classes = [];
+   const songsDiv = document.getElementById("songs");
+   let uniqueSongDiv = document.createElement('div');
+   uniqueSongDiv.setAttribute('class', 'songShell');
+   uniqueSongDiv.setAttribute('id',id);
+   let songTitle = document.createElement('h1');
+   let songAlbum = document.createElement('h2');
+   let songArtist = document.createElement('h2');
+   let songDuration = document.createElement('p');
+   let songCoverArt = document.createElement('img');
+       songTitle.innerText = title;
+       songAlbum.innerText = "album: " + album;
+       songArtist.innerText = "by: " + artist;
+       songDuration.innerText = secondsToMinutesConvertor(duration);
+       songCoverArt.setAttribute('src' , coverArt);
+       songsDiv.appendChild(uniqueSongDiv);
+       uniqueSongDiv.appendChild(songTitle);
+       uniqueSongDiv.appendChild(songAlbum);
+       uniqueSongDiv.appendChild( songArtist);
+       uniqueSongDiv.appendChild( songDuration);
+       uniqueSongDiv.appendChild(songCoverArt);
+       uniqueSongDiv.setAttribute('onclick', `playSong(${id})`)
+   const attrs = { onclick: `playSong(${id})` }
+   return createElement("div", children, classes, attrs)
+}
+for(let song of player.songs){
+   createSongElement(song);
 }
-
 /**
- * Creates a playlist DOM element based on a playlist object.
- */
+* 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)
+   const children = []
+   const classes = []
+   const attrs = {}
+   let playlistDiv = document.getElementById("playlists");
+   let uniquePlaylistDiv = document.createElement('div');
+   uniquePlaylistDiv.setAttribute('class', 'playlistShell');
+   uniquePlaylistDiv.setAttribute('name', name);
+   let playlistName = document.createElement('h1');
+   let playlistSongs = document.createElement('h2');
+   let playlistTotalDuration = document.createElement('p');
+   playlistName.innerText = name + "-playlist";
+   playlistSongs.innerText = "amount of songs: " + songs.length;
+   playlistTotalDuration.innerText = "duration - " + playlistDuration(id);
+   playlistDiv.appendChild(uniquePlaylistDiv);
+   uniquePlaylistDiv.appendChild(playlistName);
+   uniquePlaylistDiv.appendChild(playlistSongs);
+   uniquePlaylistDiv.appendChild(playlistTotalDuration);
+   return createElement("div", children, classes, attrs)
+}
+for(let playlist of player.playlists){
+   createPlaylistElement(playlist);
 }
-
 /**
- * Creates a new DOM element.
- *
- * Example usage:
- * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
- *
- * @param {String} tagName - the type of the element
- * @param {Array} children - the child elements for the new element.
- *                           Each child can be a DOM element, or a string (if you just want a text element).
- * @param {Array} classes - the class list of the new element
- * @param {Object} attributes - the attributes for the new element
- */
+* Creates a new DOM element.
+*
+* Example usage:
+* createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
+*
+* @param {String} tagName - the type of the element
+* @param {Array} children - the child elements for the new element.
+*                           Each child can be a DOM element, or a string (if you just want a text element).
+* @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
+   // Your code here
 }
-
 // You can write more code below this line
+let songDuration = document.querySelectorAll(".songShell p");
+let SongDurationArray = Array.from(songDuration);
+for(let i = 0; i < SongDurationArray.length; i++){
+   let redAmount = player.songs[i].duration;
+   SongDurationArray[i].style.color = ("rgb(" + redAmount * 0.74 + ","+(100000/redAmount)+ ",0)");
+}
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index 5a85f825..f70b27e2 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -62,3 +62,46 @@ const player = {
         { id: 5, name: "Israeli", songs: [4, 5] },
     ],
 }
+function mmssuration(duration){
+    let minutes = Math.floor(duration / 60);
+    let seconds = duration % 60;
+    if (minutes < 10) {
+      minutes = "0" + minutes;
+    }
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
+    return minutes.toString() + ':' + seconds.toString();
+   }
+
+   function playlistDuration(id){
+    let playlist = getPlaylistById(id);
+    let result = 0;
+    for(let num in playlist.songs){
+      result+= getSongById(playlist.songs[num]).duration;
+    }
+        return result;
+  
+    }
+
+   function sumPlaylist(playlist){
+       let sumDuration=0
+       for(let i in playlist.songs){
+           for(let j in player.songs){
+               if (player.songs[j]==playlist.songs[i]){
+                   sumDuration+=player.songs[j].duration
+               }
+         }
+       }
+       return sumDuration
+   }
+
+   function idExist(id){
+    for (let num in player.songs) {
+      if (player.songs[num].id === id)
+        return true;
+    }
+    return false;
+  }
+       
+  
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 7f7373d1594147dfcb7d028ffefe6af8d3bfa46f Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <rnrwznr@gmail.com>
Date: Mon, 13 Sep 2021 02:57:12 +0300
Subject: [PATCH 2/6] Add function inside index.js

---
 scripts/index.js  | 155 +++++++++++++++++++++++++---------------------
 scripts/player.js |   6 +-
 2 files changed, 88 insertions(+), 73 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index e1cc5a0e..169517f1 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,78 +1,37 @@
+/**
+ * Plays a song from the player.
+ * Playing a song means changing the visual indication of the currently playing song.
+ *
+ * @param {String} songId - the ID of the song to play
+ */
+ function playSong(songId) {
+   let song = getElementById(songId).style.backgroundColor = "yellow";
+      }
+  
 
 
-
-function playSong(songId) {
-   let otherSongs = document.getElementsByClassName('songShell');
-   for(let otherSong of otherSongs){
-       otherSong.style.backgroundColor = "rgba(0, 0, 0, 0)";
-   }
-   document.getElementById(songId).style.backgroundColor = "red";
-
-   if(songId < 7){
-       window.setTimeout(function(){playSong(songId + 1);} ,getSongObjectById(songId).duration * 1000);
-   }
-   // Your code here
-}
-
 /**
 * Creates a song DOM element based on a song object.
 */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-   const children = [];
-   const classes = [];
-   const songsDiv = document.getElementById("songs");
-   let uniqueSongDiv = document.createElement('div');
-   uniqueSongDiv.setAttribute('class', 'songShell');
-   uniqueSongDiv.setAttribute('id',id);
-   let songTitle = document.createElement('h1');
-   let songAlbum = document.createElement('h2');
-   let songArtist = document.createElement('h2');
-   let songDuration = document.createElement('p');
-   let songCoverArt = document.createElement('img');
-       songTitle.innerText = title;
-       songAlbum.innerText = "album: " + album;
-       songArtist.innerText = "by: " + artist;
-       songDuration.innerText = secondsToMinutesConvertor(duration);
-       songCoverArt.setAttribute('src' , coverArt);
-       songsDiv.appendChild(uniqueSongDiv);
-       uniqueSongDiv.appendChild(songTitle);
-       uniqueSongDiv.appendChild(songAlbum);
-       uniqueSongDiv.appendChild( songArtist);
-       uniqueSongDiv.appendChild( songDuration);
-       uniqueSongDiv.appendChild(songCoverArt);
-       uniqueSongDiv.setAttribute('onclick', `playSong(${id})`)
-   const attrs = { onclick: `playSong(${id})` }
-   return createElement("div", children, classes, attrs)
-}
-for(let song of player.songs){
-   createSongElement(song);
+   const song=arguments[0];
+   const children = songsList(song);
+   const classes = ["song"];
+   const attrs = { onclick: playSong(id),cursor:"pointer",id:id };
+   return document.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 = {}
-   let playlistDiv = document.getElementById("playlists");
-   let uniquePlaylistDiv = document.createElement('div');
-   uniquePlaylistDiv.setAttribute('class', 'playlistShell');
-   uniquePlaylistDiv.setAttribute('name', name);
-   let playlistName = document.createElement('h1');
-   let playlistSongs = document.createElement('h2');
-   let playlistTotalDuration = document.createElement('p');
-   playlistName.innerText = name + "-playlist";
-   playlistSongs.innerText = "amount of songs: " + songs.length;
-   playlistTotalDuration.innerText = "duration - " + playlistDuration(id);
-   playlistDiv.appendChild(uniquePlaylistDiv);
-   uniquePlaylistDiv.appendChild(playlistName);
-   uniquePlaylistDiv.appendChild(playlistSongs);
-   uniquePlaylistDiv.appendChild(playlistTotalDuration);
-   return createElement("div", children, classes, attrs)
-}
-for(let playlist of player.playlists){
-   createPlaylistElement(playlist);
+   const playlist=arguments[0];
+   const children = playPlaylist(playlist);
+   const classes = ["playlist"];
+   const attrs = {};
+   return document.createElement("div", children, classes, attrs);
 }
+
 /**
 * Creates a new DOM element.
 *
@@ -86,12 +45,68 @@ for(let playlist of player.playlists){
 * @param {Object} attributes - the attributes for the new element
 */
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-   // Your code here
+   const newElement= document.createElement(tagName);
+   for(let i in classes){
+      newElement.classList+=i;
+   }
+   const attr=Object.keys(attributes);
+   for(let prop in attr.length){
+       newElement.setAttribute(attr[prop],attributes[attr[prop]]); 
+   }
+   for(let child in children.length){
+    newElement.textContent+=children[i];
+}
+   return newElement
 }
+
 // You can write more code below this line
-let songDuration = document.querySelectorAll(".songShell p");
-let SongDurationArray = Array.from(songDuration);
-for(let i = 0; i < SongDurationArray.length; i++){
-   let redAmount = player.songs[i].duration;
-   SongDurationArray[i].style.color = ("rgb(" + redAmount * 0.74 + ","+(100000/redAmount)+ ",0)");
-}
\ No newline at end of file
+function songsList(song){
+   const listSongs=[]
+   for(let i in song){
+        if(i.toString()!=='duration' && i.toString()!=='coverArt'){
+       const liTag=document.createElement('li');
+       liTag.innerText=i+":"+ song[i]; 
+       listSongs.push(liTag)
+        }
+        else if(i.toString()==="duration"){
+         let liTag=document.createElement('li');
+         let duration=convertDuriation(song[i]);
+         liTag.innerText=i+":"+duration; 
+         list.push(liTag)
+     }
+     else{
+         const img=document.createElement('img')
+         img.src=song[i]
+         list.push(img)
+     }
+     }
+     return list
+   }
+
+
+
+   function playPlaylist(playlist){
+      const listPlaylists=[]
+      const sumDuration =playlistDuration(playlist)
+      for(let key in playlist){
+          
+          if(key.toString()!=="songs"){
+             let liTag=document.createElement('li')
+             liTag.innerText= key+" : "+playlist[key];
+             listPlaylists.push(liTag)
+                  }
+          else{
+              let liTag=document.createElement("li")
+              liTag.innerText="number of songs: "+playlist.sosgs.length; 
+             listPlaylists.push(liTag)
+                  }
+               }
+        let liTag=document.createElement("li")
+        liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`;
+        list.push(sumDuration)
+        return list 
+
+            }
+
+
+         
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index f70b27e2..69d43cbd 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -85,15 +85,15 @@ function mmssuration(duration){
     }
 
    function sumPlaylist(playlist){
-       let sumDuration=0
+       let durationSum=0;
        for(let i in playlist.songs){
            for(let j in player.songs){
                if (player.songs[j]==playlist.songs[i]){
-                   sumDuration+=player.songs[j].duration
+                   sumDuration+=player.songs[j].duration;
                }
          }
        }
-       return sumDuration
+       return sumDuration;
    }
 
    function idExist(id){

From 85597a2f45104f396d66126e2def8c3218c0946f Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <rnrwznr@gmail.com>
Date: Mon, 13 Sep 2021 03:22:01 +0300
Subject: [PATCH 3/6] Css and addition in index.js

---
 style.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/style.css b/style.css
index e69de29b..a3ad9c89 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,17 @@
+div{
+border: solid blue;
+margin:40%
+}
+li{
+   cursor:pointer
+   color: #000;
+
+}
+#songs{
+   background-color:green;
+
+
+}
+#playlists{
+   background: color #545454;
+}
\ No newline at end of file

From bc0ddc28a3825172370d575c07d97595e5aea35a Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <89572753+MaorKurztag21@users.noreply.github.com>
Date: Mon, 13 Sep 2021 03:23:05 +0300
Subject: [PATCH 4/6] Create main.yml

---
 .github/workflows/main.yml | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 .github/workflows/main.yml

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 00000000..30a4bc10
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      # Runs a single command using the runners shell
+      - name: Run a one-line script
+        run: echo Hello, world!
+
+      # Runs a set of commands using the runners shell
+      - name: Run a multi-line script
+        run: |
+          echo Add other actions to build,
+          echo test, and deploy your project.

From a160d58f7584cf249233d2f394eb1a6da118b142 Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <rnrwznr@gmail.com>
Date: Mon, 13 Sep 2021 13:51:51 +0300
Subject: [PATCH 5/6] little change

---
 scripts/index.js | 13 +++++++++----
 style.css        |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 169517f1..7a06489d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -70,7 +70,7 @@ function songsList(song){
         }
         else if(i.toString()==="duration"){
          let liTag=document.createElement('li');
-         let duration=convertDuriation(song[i]);
+         let duration=mmsstDuriation(song[i]);
          liTag.innerText=i+":"+duration; 
          list.push(liTag)
      }
@@ -105,8 +105,13 @@ function songsList(song){
         liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`;
         list.push(sumDuration)
         return list 
-
             }
 
-
-         
\ No newline at end of file
+            const song=document.getElementById("songs");
+            for(let i in player.songs){
+               song.appendChild(createSongElement(player.songs[i]));
+            }
+            const playlist=document.getElementById("playlists");
+            for(let i in player.playlists){
+               playlist.appendChild(createPlaylistElement(player.playlists[i]))
+            }
\ No newline at end of file
diff --git a/style.css b/style.css
index a3ad9c89..e074432d 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@ border: solid blue;
 margin:40%
 }
 li{
-   cursor:pointer
+   cursor:pointer;
    color: #000;
 
 }

From 277ade5e3a824309877d3033a3d3fb7b08f75b49 Mon Sep 17 00:00:00 2001
From: MaorKurztag21 <rnrwznr@gmail.com>
Date: Sun, 19 Sep 2021 04:48:06 +0300
Subject: [PATCH 6/6] Final repair of first mission which was done wrongly

Change of all files
---
 .vscode/settings.json |   3 +
 index.html            |   5 +-
 scripts/index.js      | 123 +++++++++++++---------------------------
 scripts/player.js     | 129 ++++++++++++++++++++++++------------------
 style.css             |  73 ++++++++++++++++++------
 5 files changed, 179 insertions(+), 154 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 04767524..5934db5e 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,13 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        <h1>New MP3 Player</h1>
         <div id="songs">
-            <!-- Generated songs go here -->
+            
         </div>
+        <h2>Playlists</h2>
         <div id="playlists">
             <!-- Generated playlists go here -->
         </div>
     </body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
index 7a06489d..89d3d6d6 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,37 +1,50 @@
 /**
+ * 
  * Plays a song from the player.
  * Playing a song means changing the visual indication of the currently playing song.
  *
  * @param {String} songId - the ID of the song to play
  */
  function playSong(songId) {
-   let song = getElementById(songId).style.backgroundColor = "yellow";
-      }
-  
-
+  let notChosens = document.getElementsByClassName('songShell');
+  for(let notChosen of notChosens){
+      notChosen.style.backgroundColor = "rgba(0, 0, 0, 0)";
+  }
+  document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)";
+}
 
 /**
 * Creates a song DOM element based on a song object.
 */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-   const song=arguments[0];
-   const children = songsList(song);
-   const classes = ["song"];
-   const attrs = { onclick: playSong(id),cursor:"pointer",id:id };
-   return document.createElement("div", children, classes, attrs);
+      let SongTitle = createElement('h2',[title],['songTitles']);
+      let songAlbum = createElement('h3',["Album: " + album]);
+      let songArtist = createElement('h4',["Artist: " + artist]);
+      let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]);
+      let songCoverArt  = createElement('img',[],[],{src: coverArt})
+      let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt],['songShell'],{id: id});
+      console.log(songElement);
+      songElement.setAttribute('onclick', `playSong(${id})`)
+      return songElement;
+  }
+for(let song of player.songs){
+  let songsDiv = document.getElementById('songs');
+  songsDiv.append(createSongElement(song));
 }
-
 /**
 * Creates a playlist DOM element based on a playlist object.
 */
 function createPlaylistElement({ id, name, songs }) {
-   const playlist=arguments[0];
-   const children = playPlaylist(playlist);
-   const classes = ["playlist"];
-   const attrs = {};
-   return document.createElement("div", children, classes, attrs);
+  let playlistName = createElement('h2',[name]);
+  let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]);
+  let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]);
+  let  playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']);
+  return playlistElem;
+}
+for(let playlist of player.playlists){
+  let playlistList = document.getElementById('playlists');
+   playlistList.append(createPlaylistElement(playlist));
 }
-
 /**
 * Creates a new DOM element.
 *
@@ -45,73 +58,17 @@ function createPlaylistElement({ id, name, songs }) {
 * @param {Object} attributes - the attributes for the new element
 */
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-   const newElement= document.createElement(tagName);
-   for(let i in classes){
-      newElement.classList+=i;
-   }
-   const attr=Object.keys(attributes);
-   for(let prop in attr.length){
-       newElement.setAttribute(attr[prop],attributes[attr[prop]]); 
-   }
-   for(let child in children.length){
-    newElement.textContent+=children[i];
+let newEl = document.createElement(tagName);
+for(let child of children){
+     newEl.append(child);
 }
-   return newElement
+for(let cls of classes){
+    newEl.classList.add(cls);
 }
+for(let attr in attributes){
+    newEl.setAttribute(attr, attributes[attr]);
+}
+return newEl
+}
+createSongElement('h2', [player.songs[0].title], "songTitles");
 
-// You can write more code below this line
-function songsList(song){
-   const listSongs=[]
-   for(let i in song){
-        if(i.toString()!=='duration' && i.toString()!=='coverArt'){
-       const liTag=document.createElement('li');
-       liTag.innerText=i+":"+ song[i]; 
-       listSongs.push(liTag)
-        }
-        else if(i.toString()==="duration"){
-         let liTag=document.createElement('li');
-         let duration=mmsstDuriation(song[i]);
-         liTag.innerText=i+":"+duration; 
-         list.push(liTag)
-     }
-     else{
-         const img=document.createElement('img')
-         img.src=song[i]
-         list.push(img)
-     }
-     }
-     return list
-   }
-
-
-
-   function playPlaylist(playlist){
-      const listPlaylists=[]
-      const sumDuration =playlistDuration(playlist)
-      for(let key in playlist){
-          
-          if(key.toString()!=="songs"){
-             let liTag=document.createElement('li')
-             liTag.innerText= key+" : "+playlist[key];
-             listPlaylists.push(liTag)
-                  }
-          else{
-              let liTag=document.createElement("li")
-              liTag.innerText="number of songs: "+playlist.sosgs.length; 
-             listPlaylists.push(liTag)
-                  }
-               }
-        let liTag=document.createElement("li")
-        liTag.innerText=duration+":"+sumDuration; `duration: ${sumDuration}`;
-        list.push(sumDuration)
-        return list 
-            }
-
-            const song=document.getElementById("songs");
-            for(let i in player.songs){
-               song.appendChild(createSongElement(player.songs[i]));
-            }
-            const playlist=document.getElementById("playlists");
-            for(let i in player.playlists){
-               playlist.appendChild(createPlaylistElement(player.playlists[i]))
-            }
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index 69d43cbd..9947d12f 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -31,77 +31,98 @@ const player = {
             artist: "AC/DC",
             duration: 292,
             coverArt: "./images/cover_art/acdc_thunderstruck.jpg",
-        },
-        {
+          },
+          {
             id: 4,
             title: "All is One",
             album: "All is One",
             artist: "Orphaned Land",
             duration: 270,
             coverArt: "./images/cover_art/orphaned_land_all_is_one.jpg",
-        },
-        {
+          },
+          {
             id: 5,
             title: "As a Stone",
             album: "Show Us What You Got",
             artist: "Full Trunk",
             duration: 259,
             coverArt: "./images/cover_art/full_trunk_as_a_stone.jpg",
-        },
-        {
+          },
+          {
             id: 6,
             title: "Sons of Winter and Stars",
             album: "Time I",
             artist: "Wintersun",
             duration: 811,
             coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg",
-        },
-    ],
-    playlists: [
-        { id: 1, name: "Metal", songs: [1, 7, 4, 6] },
-        { id: 5, name: "Israeli", songs: [4, 5] },
-    ],
-}
-function mmssuration(duration){
-    let minutes = Math.floor(duration / 60);
-    let seconds = duration % 60;
-    if (minutes < 10) {
-      minutes = "0" + minutes;
-    }
-    if (seconds < 10) {
-      seconds = "0" + seconds;
-    }
-    return minutes.toString() + ':' + seconds.toString();
-   }
-
-   function playlistDuration(id){
-    let playlist = getPlaylistById(id);
-    let result = 0;
-    for(let num in playlist.songs){
-      result+= getSongById(playlist.songs[num]).duration;
-    }
-        return result;
+          },
+        ],
+        playlists: [
+          { id: 1, name: "Metal", songs: [1, 7, 4, 6] },
+          { id: 5, name: "Israeli", songs: [4, 5] },
+        ],
+      }
+      //External Functions
+      function secondsToMinutesConvertor(songDuration){
+        if(typeof(songDuration) === 'number'){
+          let min  = Math.floor(songDuration / 60);
+          let sec = songDuration % 60;
+          if (min < 10) {
+            min = "0" + min;
+          }
+          if (sec < 10) {
+            sec = "0" + sec;
+          }
+          return min.toString() + ':' + sec.toString();
+        }
+        else{
+          return parseInt(songDuration.slice(3)) + parseInt(songDuration.slice(0,2)) * 60;
+        } 
+      }
+  
+      function getPlaylistById(id){
+        let playlistId = player.playlists.filter(playlist =>{
+          if(playlist.id === id){
+            return playlist;
+          }
+        })
+        return playlistId[0];
+      }
+      
+      function playlistDuration(id) {
+        let WantedPlaylist = getPlaylistById(id);
+        let songsArray = WantedPlaylist.songs.map(song => {
+          return getSongObjectById(song).duration})
+          let totalDuration = (songsArray.reduce((added, currentValue) => {
+            currentValue += added;
+            return currentValue;
+          }))
+          return secondsToMinutesConvertor(totalDuration);
+        }
+  
+        function generateId(idArr,id){
+          let newArr=[];
+          for(let i of arr){
+            newArr.push(i.id);
+          }
+        } 
   
-    }
-
-   function sumPlaylist(playlist){
-       let durationSum=0;
-       for(let i in playlist.songs){
-           for(let j in player.songs){
-               if (player.songs[j]==playlist.songs[i]){
-                   sumDuration+=player.songs[j].duration;
-               }
-         }
-       }
-       return sumDuration;
-   }
-
-   function idExist(id){
-    for (let num in player.songs) {
-      if (player.songs[num].id === id)
-        return true;
-    }
-    return false;
-  }
-       
+        function getSongObjectById(id){
+          let song = player.songs.filter(songObject => {
+            if(songObject.id == id){
+              return songObject;
+            }
+          })
+          if(song.length == undefined){
+            throw new Error ("id is undefined");
+          }
+          song = song[0];
+          return song;
+        } 
   
+        function convertToseconds(mmssDuration){
+          let minutes = Number(mmssDuration.split("").slice(0, 2).join(""));
+          let seconds = Number(mmssDuration.split("").slice(3, 5).join(""));
+          let time = (minutes * 60) + seconds;
+          return time;
+        }
\ No newline at end of file
diff --git a/style.css b/style.css
index e074432d..df9a4b07 100644
--- a/style.css
+++ b/style.css
@@ -1,17 +1,58 @@
+body{
+    font-family: sans-serif;
+    background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
+}
+h1{
+    color: rgba(5, 56, 25, 0.637);
+    text-decoration: underline;
+    text-align: center;
+    font-size: 100px;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    
+}
+.songShell{
+border: 7px solid rgb(224, 19, 104);
+border-width: 3px;
+border-color: darkgoldenrod;
+align-items: center;
+margin-right: 100px;
+margin-left: 300px;
+margin-top: 100px;
+margin-bottom: 50px;
+}
+.playlistShell {
+    border: 10px double rgb(95, 84, 158);
+    border-radius: 10%;
+    
+} 
+.songShell img{
+    border-radius: 20%;
+    display: block;
+    margin-left: auto;
+  margin-right:80px;
+  padding-top: 30px;
+  padding-right: 100px;
+  padding-bottom: 40px;
+  
+}
+.playlistShell h3{
+    color: blue;
+  font-family: verdana;
+  font-size: 100%;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 div{
-border: solid blue;
-margin:40%
-}
-li{
-   cursor:pointer;
-   color: #000;
-
-}
-#songs{
-   background-color:green;
-
-
-}
-#playlists{
-   background: color #545454;
-}
\ No newline at end of file
+    color:darkviolet;
+    font-size: 20px;
+}
+h2{
+    font-size: 60px;
+    font-family: monospace;
+}
+h3{
+    font-size: 40px;
+}
+h4{
+    font-size: 30px;
+    font-family: cursive;
+}