sagigolan8 · sagigolan8 · Sep 12, 2021 · Sep 12, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-    "semi": false,
-    "tabWidth": 4,
-    "printWidth": 120
+   "semi": false,
+   "tabWidth": 4,
+   "printWidth": 120
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -4,16 +4,23 @@
         <meta charset="UTF-8" />
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
-        <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css" />
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.js" defer></script>
     </head>
+
+
+    </div>
+
     <body>
-        <div id="songs">
-            <!-- Generated songs go here -->
-        </div>
-        <div id="playlists">
-            <!-- Generated playlists go here -->
-        </div>
+        <div id="player">
+            <h1>Mp3 player(old web)</h1>
+            <div id="lists">
+                <div class="songs" id="songs">
+                    <h1>Songs</h1>
+                </div>
+                <div id="playlists" class="playlists">
+                    <h1>Playlists</h1>
+                </div>
     </body>
 </html>
diff --git a/index.new.html b/index.new.html
@@ -4,57 +4,39 @@
         <meta charset="UTF-8" />
         <title>Awesome MP3 Player</title>
         <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" />
-        <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css" />
         <script src="./scripts/player.js"></script>
         <script src="./scripts/index.new.js" defer></script>
     </head>
+
     <body>
-        <h1>Awesome Player!!!</h1>
-        <div id="add-section">
-            <h2>Add a new song</h2>
-            <div id="inputs">
-                <input name="title" placeholder="Title">
-                <input name="album" placeholder="Album">
-                <input name="artist" placeholder="Artist">
-                <input name="duration" placeholder="Duration (mm:ss)">
-                <input name="cover-art" placeholder="Cover art link">
-            </div>
-            <button id="add-button">Add</button>
-        </div>
-        <div id="songs">
-            <h2>Songs</h2>
-            <div class="list">
-                <!-- <div class="song">
-                    <div class="left">
-                        <img class="cover-art" src="./images/cover_art/jinjer_vortex.jpg">
-                        <div class="song-details">
-                            <span class="title">Vortex</span>
-                            <span class="album">Wallflowers</span>
-                            <span class="artist">Jinjer</span>
-                        </div>
-                    </div>
-                    <div class="right">
-                        <div class="song-duration">04:02</div>
-                        <div class="song-actions">
-                            <button class="play-button">Play</button>
-                            <button class="remove-button">Remove</button>
+        <div id="player">
+            <h1 style="color: white; text-decoration: underline">Mp3 player</h1>
+            <div id="lists">
+                <div class="songs" id="songs" style="text-align: center">
+                    <h2>Songs</h2>
+                    <div class="list">
+                        <div id="add-section" style="text-align: center">
+                            <h3>Add a new song</h3>
+                            <div id="inputs">
+                                <input class="input" name="title" placeholder="Title" id="title" />
+                                <input class="input" name="album" placeholder="Album" id="album" />
+                                <input class="input" name="artist" placeholder="Artist" id="artist" />
+                                <input class="input" name="duration" placeholder="Duration (mm:ss)" id="duration" />
+                                <input class="input" name="cover-art" placeholder="Cover art link" id="cover-art" />
+                            </div>
+                            <button id="add-button"><b>Add</b></button>
+                            <button id="reset-button" type="reset" value="reset">
+                                <b>Reset</b>
+                            </button>
                         </div>
                     </div>
-                </div> -->
-            </div>
-        </div>
-        <div id="playlists">
-            <h2>Playlists</h2>
-            <div class="list">
-                <!-- <div class="playlist">
-                    <div class="left">
-                        <span class="name">Metal</span>
-                    </div>
-                    <div class="right">
-                        <span class="playlist-length">4 songs</span>
-                        <span class="playlist-duration">25:36</span>
+                </div>
+                <div id="playlists" class="playlists" style="text-align: center">
+                    <h2>Playlists</h2>
+                    <div class="list">
                     </div>
-                </div> -->
+                </div>
             </div>
         </div>
     </body>

diff --git a/scripts/index.js b/scripts/index.js
@@ -4,26 +4,51 @@
  *
  * @param {String} songId - the ID of the song to play
  */
+
 function playSong(songId) {
-    // Your code here
+    const divAllSong = document.getElementsByClassName("child") //the div that wrap of the song
+    for (const divSong of divAllSong) {
+        //remove the green mark from all songs
+        divSong.style.borderLeft = "transparent"
+    }
+    const currentSong = document.getElementById(songId)
+    currentSong.style.borderRadius = "10px" //the left green mark when song playing
+    currentSong.style.borderLeft = "20px solid green"
 }
 
+const divOfAllSongs = document.getElementById("songs")
+divOfAllSongs.addEventListener("click", (e) => {
+    playSong(e.target.id)
+})
+
 /**
  * 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 children = [
+        createElement("img", [], ["border-Img"], { src: coverArt }),
+        createElement("span", "Title | " + title, [], {}),
+        createElement("span", "Album | " + album, [], {}),
+        createElement("span", "Artist | " + artist, [], {}),
+        createElement("span", durationFormat(duration), ["duration"], {}),
+    ]
+    const classes = ["child"]
+    const attrs = { id: "song" + id, title: "title" + title }
     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 children = [
+        createElement("span", name, [], {}),
+        createElement("span", "  | " + [songs.length] + " songs ", [], {}),
+        createElement("span", playlistDuration(id), ["duration"], {}),
+    ]
+    const classes = ["child"]
     const attrs = {}
     return createElement("div", children, classes, attrs)
 }
@@ -34,14 +59,76 @@ function createPlaylistElement({ id, name, songs }) {
  * 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.
+ * @param {String} tagName - the type of the element: for example- p,h1,div...
+ * @param {Array} children - the child elements for the new element: for example- assume ew have <ul> his children <li>
  *                           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
+    const element = document.createElement(tagName)
+    for (let child of children) {
+        element.append(child)
+    }
+    for (let name of classes) {
+        element.classList.add(name)
+    }
+    for (let attribute in attributes) {
+        element.setAttribute(attribute, attributes[attribute])
+    }
+    return element
 }
 
 // You can write more code below this line
+
+function durationFormat(duration) {
+    //converting from seconds to mm:ss format
+    const minutes = Math.floor(duration / 60)
+    const seconds = duration % 60
+    if (minutes < 10 && seconds < 10) return "0" + minutes + ":" + "0" + seconds
+    else if (minutes < 10) return "0" + minutes + ":" + seconds
+    else if (seconds < 10) return minutes + ":" + "0" + seconds
+    else return minutes + ":" + seconds
+}
+
+function playlistDuration(id) {
+    const correctPlaylist = findPlaylistById(id) //correctPlaylist contain the wanted playlist
+    let saveSongId = 0,
+        sum = 0
+    for (let i = 0; i < correctPlaylist.songs.length; i++) {
+        //run on the songs array inside this playlist
+        saveSongId = correctPlaylist.songs[i]
+        for (let j = 0; j < player.songs.length; j++) {
+            //run on the songs array
+            if (player.songs[j].id === saveSongId) sum += player.songs[j].duration
+        }
+    }
+    return durationFormat(sum)
+}
+
+function findPlaylistById(id) {
+    //Get a playlist id and return the wanted playlist by his id
+    let correctPlaylist
+    for (let i = 0; i < player.playlists.length; i++) {
+        //run on playlists array
+        if (id === player.playlists[i].id) correctPlaylist = player.playlists[i]
+    }
+    return correctPlaylist
+}
+
+const songsElement = document.getElementById("songs")
+const playlistsElement = document.getElementById("playlists")
+
+player.playlists.sort((playlistA, playlistB) => playlistA.name.localeCompare(playlistB.name)) //sort the songs
+player.songs.sort((songA, songB) => songA.title.localeCompare(songB.title)) //sort the playlists
+
+for (let i = 0; i < player.songs.length; i++) {
+    // run on songs array
+
+    songsElement.append(createSongElement(player.songs[i]))
+}
+
+for (let i = 0; i < player.playlists.length; i++) {
+    // run on playlists array
+    playlistsElement.append(createPlaylistElement(player.playlists[i]))
+}