From e67bd148c19afed726c56ccfd5cf3d9d26469985 Mon Sep 17 00:00:00 2001
From: danielkravtsov5 <danielkravtsov5@gmail.com>
Date: Tue, 14 Sep 2021 01:35:48 +0300
Subject: [PATCH 1/4] work done

---
 README.md        |   3 +-
 scripts/index.js | 115 ++++++++++++++++++++++++++++++++++++++++++++---
 style.css        |  37 ++++++++++++++-
 3 files changed, 145 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index d12d8eb8..97efb55c 100644
--- a/README.md
+++ b/README.md
@@ -28,14 +28,13 @@ Each song list item shall display the following details:
 -   `album` name
 -   `artist` name
 -   an image with the album's cover art (`coverArt`)
--   song `duration` (in `mm:ss` format, of course)
+-  ********* 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.
 
 ### Playlists
 
 Every playlist list item should display the following information:
-
 -   playlist `name`
 -   the number of songs in the playlist
 -   the total duration of the playlist
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..3733d79a 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -3,27 +3,77 @@
  * 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
+ titleCreation('Songs', 'songs');
+
+ function timeConvert (seconds){
+    let date = new Date(null);
+    date.setSeconds(seconds);
+    let result = date.toISOString().substr(11, 8);
+    return result;
+ }
+
+ function playSong(songId) {
+    const selectedSong = document.getElementById(songId);
+    const classes = []
+    classes.push(["selected"])
+
+    const songs = document.getElementsByClassName("song");
+    for (let song of songs) {
+        song.classList.remove(classes)
+    }
+    selectedSong.classList.add(classes);
 }
 
 /**
  * Creates a song DOM element based on a song object.
  */
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
-    const classes = []
+    const coverImg = createElement('img', [],["songPhoto"],{src: coverArt});
+    const children = [coverImg, "Song Name:"+ title + " ,","Album:"+ album+ " ,","Artist:"+ artist+ " ,","Duration:" +timeConvert(duration)+ " "]
+    const classes = ['songElement']
     const attrs = { onclick: `playSong(${id})` }
+
     return createElement("div", children, classes, attrs)
 }
 
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
+
+ titleCreation('Playlists', 'playlists');
+
+function numberOfSongs(playlistId){
+    let totalSongsNum = 0;
+    for (let i = 0; i<player.playlists.length; i++){
+        if (player.playlists[i].id === playlistId){
+            totalSongsNum = player.playlists[i].songs.length;
+        }
+    }
+    return totalSongsNum;
+}
+
+function playlistDuration (playlistId){
+    let totalPlayTime = 0;
+    for (let i = 0; i<player.playlists.length; i++){
+        if (playlistId === player.playlists[i].id){
+            for (let j = 0;j<player.playlists[i].songs.length; j++){
+                for (let k = 0; k<player.songs.length; k++){
+                    if (player.playlists[i].songs[j] === player.songs[k].id){
+                        totalPlayTime += player.songs[k].duration;
+                    }
+                }
+            }
+        }
+    }
+    return totalPlayTime;
+}
+
 function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+    const children = ["Name: " +name+ " ,","Number of songs: "+ numberOfSongs(id)+' ,', "Total play Time: " + timeConvert(playlistDuration(id))]
+    const classes = ['playlistClass']
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -40,8 +90,59 @@ function createPlaylistElement({ id, name, songs }) {
  * @param {Array} classes - the class list of the new element
  * @param {Object} attributes - the attributes for the new element
  */
+
+
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
+    const elm = document.createElement(tagName);
+
+    for (const child of children){
+        elm.append(child);
+    }
+
+    for(const cls of classes) {
+        elm.classList.add(cls);
+      }
+
+    for (const attr in attributes) {
+    elm.setAttribute(attr, attributes[attr]);
+    }
+    return elm
 }
 
+
+
 // You can write more code below this line
+
+let divSongs = document.getElementById('songs');
+
+function songsDiv(){
+    for (let i = 0; i<player.songs.length; i++){
+        let y = createSongElement(player.songs[i]);
+        divSongs.append(y);
+    }
+}
+
+songsDiv()
+
+function titleCreation (title, divId){
+    let h1 = document.createElement('h1');
+    let titleText = document.textContent = title;
+    h1.append(titleText);
+    let div1 = document.getElementById(divId);
+    div1.append(h1);
+    div1.classList.add('titleClass');
+    return div1
+}
+
+let divPlayLists = document.getElementById('playlists');
+
+function PlaylistsDiv (){
+    for (let i = 0; i<player.playlists.length; i++){
+        let y = createPlaylistElement(player.playlists[i]);
+        divPlayLists.append(y);
+    }
+    return divPlayLists
+}
+
+PlaylistsDiv ()
+
diff --git a/style.css b/style.css
index f4645fe9..e36035d7 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,36 @@
-/* Your code here */
+.songPhoto {
+    width: 15%;
+}
+
+.songElement:hover {
+    display: block;
+    margin: auto;
+    width: 50%;
+    border: 2px solid rgb(0, 0, 0);
+    padding: 50px;
+    color: #111; font-family: 
+    'Helvetica Neue', sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 6px;
+}
+
+.titleClass{
+    text-align: center;
+}
+
+.playlistClass{
+    display: block;
+    margin: auto;
+    width: 50%;
+    border: 2px solid rgb(0, 0, 0);
+    padding: 50px;
+    color: #111; 
+    font-family: 'Helvetica Neue', sans-serif; 
+    font-size: 20px;;
+}
+
+body {
+    background-color: coral;
+    background-color: rgba(255, 0, 0, 0.4);
+}
\ No newline at end of file

From 1de183ec7b9ef4e50d6e3ae754b0fcbe1a67305c Mon Sep 17 00:00:00 2001
From: danielkravtsov5 <danielkravtsov5@gmail.com>
Date: Tue, 14 Sep 2021 16:43:48 +0300
Subject: [PATCH 2/4] v

---
 scripts/index.js | 15 ++++++---------
 style.css        |  4 ++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/scripts/index.js b/scripts/index.js
index 3733d79a..2f53949c 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -16,16 +16,13 @@
  }
 
  function playSong(songId) {
-    const selectedSong = document.getElementById(songId);
-    const classes = []
-    classes.push(["selected"])
-
-    const songs = document.getElementsByClassName("song");
-    for (let song of songs) {
-        song.classList.remove(classes)
+    let songElmArr = document.getElementsByClassName('songElement');
+    for (let songEl of songElmArr){
+        songEl.classList.remove('songElement');
     }
-    selectedSong.classList.add(classes);
-}
+    const playingSong = document.getElementById(songId);
+    playingSong.classList.add('songElement');
+ }
 
 /**
  * Creates a song DOM element based on a song object.
diff --git a/style.css b/style.css
index e36035d7..f65c723d 100644
--- a/style.css
+++ b/style.css
@@ -8,8 +8,8 @@
     width: 50%;
     border: 2px solid rgb(0, 0, 0);
     padding: 50px;
-    color: #111; font-family: 
-    'Helvetica Neue', sans-serif;
+    color: #111; 
+    font-family: 'Helvetica Neue', sans-serif;
     font-size: 20px;
     font-weight: bold;
     border-radius: 6px;

From 45b37afb202ca45189830eb9564eebe44a50a582 Mon Sep 17 00:00:00 2001
From: danielkravtsov5 <danielkravtsov5@gmail.com>
Date: Tue, 14 Sep 2021 23:19:09 +0300
Subject: [PATCH 3/4] shipotsim

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

diff --git a/scripts/index.js b/scripts/index.js
index 2f53949c..eedbd0a3 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -16,13 +16,9 @@
  }
 
  function playSong(songId) {
-    let songElmArr = document.getElementsByClassName('songElement');
-    for (let songEl of songElmArr){
-        songEl.classList.remove('songElement');
-    }
-    const playingSong = document.getElementById(songId);
-    playingSong.classList.add('songElement');
- }
+    const chosenSong = document.getElementById(songId)
+    chosenSong.classList.add("chosenSong");
+}
 
 /**
  * Creates a song DOM element based on a song object.
@@ -31,7 +27,7 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
     const coverImg = createElement('img', [],["songPhoto"],{src: coverArt});
     const children = [coverImg, "Song Name:"+ title + " ,","Album:"+ album+ " ,","Artist:"+ artist+ " ,","Duration:" +timeConvert(duration)+ " "]
     const classes = ['songElement']
-    const attrs = { onclick: `playSong(${id})` }
+    const attrs = { onclick: `playSong(${id})`, id: id}
 
     return createElement("div", children, classes, attrs)
 }
diff --git a/style.css b/style.css
index f65c723d..dbc38fed 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@
     width: 15%;
 }
 
-.songElement:hover {
+.songElement:hover{
     display: block;
     margin: auto;
     width: 50%;
@@ -13,6 +13,9 @@
     font-size: 20px;
     font-weight: bold;
     border-radius: 6px;
+    cursor: pointer;
+    box-shadow: inset 0px 0px 5px #c1c1c1;  
+    outline: none; 
 }
 
 .titleClass{
@@ -33,4 +36,9 @@
 body {
     background-color: coral;
     background-color: rgba(255, 0, 0, 0.4);
+}
+
+.chosenSong {
+    font-size: 38px;
+    font-style: italic;
 }
\ No newline at end of file

From d1abb1a8ddea94aa577918a352aa5414fc0bf5e2 Mon Sep 17 00:00:00 2001
From: danielkravtsov5 <danielkravtsov5@gmail.com>
Date: Sat, 18 Sep 2021 16:16:50 +0300
Subject: [PATCH 4/4] Update index.js

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

diff --git a/scripts/index.js b/scripts/index.js
index eedbd0a3..2c122556 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -18,6 +18,7 @@
  function playSong(songId) {
     const chosenSong = document.getElementById(songId)
     chosenSong.classList.add("chosenSong");
+    
 }
 
 /**