suvelocity · dorbr · Sep 12, 2021 · Sep 14, 2021 · Sep 14, 2021 · Sep 14, 2021
diff --git a/images/image.jpg b/images/image.jpg
diff --git a/index.html b/index.html
@@ -9,8 +9,10 @@
         <script src="./scripts/index.js" defer></script>
     </head>
     <body>
+        <div id="main"></div>
         <div id="songs">
             <!-- Generated songs go here -->
+            <div id="songsTop"></div>
         </div>
         <div id="playlists">
             <!-- Generated playlists go here -->

diff --git a/index.new.html b/index.new.html
@@ -5,25 +5,29 @@
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
         <link rel="stylesheet" href="./style.css">
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.new.js" defer></script>
     </head>
-    <body>
+    <body style="background-color: bisque;">
         <h1>Awesome Player!!!</h1>
+        <div id="main">
+            <h1>MP3</h1>
+        </div>
         <div id="add-section">
             <h2>Add a new song</h2>
             <div id="inputs">
-                <input name="title" placeholder="Title">
-                <input name="album" placeholder="Album">
-                <input name="artist" placeholder="Artist">
-                <input name="duration" placeholder="Duration (mm:ss)">
-                <input name="cover-art" placeholder="Cover art link">
+                <input class="form-control m-5 w-50" name="title" placeholder="Title">
+                <input class="form-control m-5 w-50" name="album" placeholder="Album">
+                <input class="form-control m-5 w-50" name="artist" placeholder="Artist">
+                <input class="form-control m-5 w-50" name="duration" placeholder="Duration (mm:ss)">
+                <input class="form-control m-5 w-50"name="cover-art" placeholder="Cover art link">
             </div>
-            <button id="add-button">Add</button>
+            <button class="btn m-2 w-10 btn-outline-secondary" id="add-button">ADD</button>
         </div>
         <div id="songs">
             <h2>Songs</h2>
-            <div class="list">
+            <div id = "songsList" class="list">
                 <!-- <div class="song">
                     <div class="left">
                         <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
@@ -45,7 +49,7 @@ <h2>Songs</h2>
         </div>
         <div id="playlists">
             <h2>Playlists</h2>
-            <div class="list">
+            <div id="playlistsList" class="list">
                 <!-- <div class="playlist">
                     <div class="left">
                         <span class="name">Metal</span>

diff --git a/scripts/index.js b/scripts/index.js
@@ -4,26 +4,98 @@
  *
  * @param {String} songId - the ID of the song to play
  */
+//a function that gets a song id and displaying in the browser.
 function playSong(songId) {
-    // Your code here
+    while (document.getElementById("main").firstChild) {
+        document.getElementById("main").removeChild(document.getElementById("main").lastChild);
+      }
+
+    let r = document.createElement("div");
+    let songPlayed;
+    player.songs.forEach(song => {
+        if(song.id == songId)
+            songPlayed = song;
+    });
+    const children = [{
+        content:"PLAYING",
+        type:'h1'
+    },{
+        content:songPlayed.title,
+        type:'p'
+    },{
+        content:songPlayed.album,
+        type:'p'
+    },{
+        content:songPlayed.artist,
+        type:'p'
+    },{
+        content:songPlayed.duration,
+        type:'p'
+    },{
+        content:songPlayed.coverArt,
+        type:'img'
+    }]
+    children.forEach(child => {
+        t = document.createElement(child.type);
+        if(child.type == 'img'){
+            t.setAttribute("src", child.content);
+
+            t.setAttribute("width", "100%");
+
+            t.setAttribute("height", "100%");
+        }
+        t.innerHTML = child.content;
+        r.appendChild(t);
+    });
+    r.classList.add("card");
+    document.getElementById("main").appendChild(r);
+    console.log(songPlayed);
 }
 
 /**
  * Creates a song DOM element based on a song object.
  */
+//a function that gets a song object and creates a div containing the song's details.
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
-    const classes = []
+    const children = [{
+        content:title,
+        type:'p'
+    },{
+        content:album,
+        type:'p'
+    },{
+        content:artist,
+        type:'p'
+    },{
+        content:calculateDuration(duration),
+        type:'p'
+    },{
+        content:coverArt,
+        type:'img'
+    }]
+    const classes = ['card', 'song'];
     const attrs = { onclick: `playSong(${id})` }
     return createElement("div", children, classes, attrs)
+
 }
 
 /**
  * Creates a playlist DOM element based on a playlist object.
  */
+//a function that gets a playlist object and create a div that contains the playlist details.
 function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
+
+    const children = [{
+        content:name,
+        type:'p'
+    },{
+        content:songs.length,
+        type:'p'
+    },{
+        content:calculateDuration(playlistDuration(id)),
+        type:'p'
+    }]
+    const classes = ['card', 'playlist']
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -37,11 +109,112 @@ function createPlaylistElement({ id, name, songs }) {
  * @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 {Array} classes - the class list of the new element 
  * @param {Object} attributes - the attributes for the new element
  */
+//a function that gets a tag name create it and add child tags, classes, attributes to the tag.
 function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
-}
+    let r = document.createElement(tagName);
+    children.forEach(child => {
+        t = document.createElement(child.type);
+        if(child.type == 'img'){
+            t.setAttribute("src", child.content);
+
+            t.setAttribute("width", "100%");
+
+            t.setAttribute("height", "100%");
 
+        }
+        t.innerHTML = child.content;
+        r.appendChild(t);
+    });
+    classes.forEach(cls => {
+        r.classList.add(cls);
+    });
+
+    for(const property in attributes){
+        r.setAttribute(property, attributes[property]);
+    }
+    classes.forEach(cls => {
+        if(cls == "song")
+            document.getElementById("songs").appendChild(r);
+        if(cls == "playlist")
+            document.getElementById("playlists").appendChild(r);
+    });
+
+}
+//a function that gets a playlist id and returns the playlist duration.
+function playlistDuration(id) {
+    let arr = getPlaylistAndSongIndex(id, 1);
+    let index = arr[0];
+    let sum = 0;
+    player.songs.forEach(song => {
+      player.playlists[index].songs.forEach(songID => {
+        if(song.id == songID){
+          sum += song.duration;
+        }
+      });
+    });
+    return sum;
+  }
+  //a function that gets a playlist id, and a song id and returns the index of the corresponding objects in the player's array.
+  function getPlaylistAndSongIndex(playlistID, songID){
+    let indexOfSong = -1;
+    let indexOfPlaylist = -1;
+    for (let i = 0; i < player.playlists.length; i++) {
+      const playlist = player.playlists[i];
+      if(playlist.id == playlistID){
+        indexOfPlaylist = i;
+        for (let j = 0; j < playlist.songs.length; j++) {
+          const song = playlist.songs[j];
+          if(song == songID){
+            indexOfSong = j;
+          }
+        }
+      }
+    }
+    if(indexOfPlaylist == -1){
+      throw "playlist index does not exisst";
+    }
+    return [indexOfPlaylist,indexOfSong];
+
+  }
+  //a function that converts duration in sec to mm:ss format.
+  function calculateDuration(duration){
+
+    mmDuration = Math.floor(duration / 60);
+    if(mmDuration < 10)
+      mmDuration = "0" + mmDuration;
+
+    ssDuration = duration - mmDuration * 60;
+    if(ssDuration < 10)
+        ssDuration = "0" + ssDuration;
+    return mmDuration+":"+ssDuration;
+  }
 // You can write more code below this line
+//a function that sort the array of songs and create an element for each of them separately.
+function displaySongsList(songs){
+    songs.sort(function(a, b){
+        if(a.title < b.title) { return -1; }
+        if(a.title > b.title) { return 1; }
+        return 0;
+    })
+    songs.forEach(song => {
+        createSongElement(song);
+    });
+
+}
+//a function that sort the array of playlists and create an element for each of them separately.
+
+function displayPlaylistsList(playlists){
+    playlists.sort(function(a, b){
+        if(a.name < b.name) { return -1; }
+        if(a.name > b.name) { return 1; }
+        return 0;
+    })
+    playlists.forEach(playlist => {
+        createPlaylistElement(playlist);
+    });
+}
+displaySongsList(player.songs);
+displayPlaylistsList(player.playlists);