suvelocity · romans1995 · Sep 13, 2021 · Sep 13, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://127.0.0.1:5500/index.html",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ 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`)
+-   7ya 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.

diff --git a/index.html b/index.html
@@ -9,11 +9,23 @@
         <script src="./scripts/index.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">
-            <!-- Generated songs go here -->
+
         </div>
         <div id="playlists">
-            <!-- Generated playlists go here -->
+
         </div>
     </body>
 </html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -1,47 +1,288 @@
+// converting duration 
+const convertDuration = (duration) => {
+  const minutes = Math.floor(duration / 60);
+  let seconds = duration % 60;
+  if (seconds < 10) {
+    seconds = `0${seconds}`;
+  }
+  return `${minutes}:${seconds}`;
+}
+let runLoop;
+// is playSong is runing ? 
+plrun = false;
+const getIdForPlaysong = (id) =>{
+  return playSong(Math.abs(id.path[1].id))
+}
+function playSong(id) {
+  // make all song background white 
+  for (song of player.songs){
+    document.getElementById(song.id).style.backgroundColor = "white";
+  }
+  if(plrun){
+    document.getElementById(id).style.backgroundColor = "white";
+    clearTimeout(runLoop);
+    plrun = false;
+    } 
+  if (id === player.songs.length+1) {
+    id = 1;
+  }
+  if(plrun === false){
+    let changeButton = document.getElementsByClassName("play");
+   console.log(changeButton);
+      changeButton.innerHTML = "⏸";
+
+    document.getElementById(id).style.backgroundColor = "#af934c";
+
+    plrun = true;
+    // after 3 sec or duration of song turn off song 
+  runLoop = setTimeout(() => {
+    plrun = false;
+    document.getElementById(id).style.backgroundColor = "white";
+    playSong(id+ 1);
+
+  }, 3000); //duration of song here
+  changeButton.innerHTML = "▶"; 
+  }
+}
 /**
- * Plays a song from the player.
- * Playing a song means changing the visual indication of the currently playing song.
+ * Removes a song from the player, and updates the DOM to match.
  *
- * @param {String} songId - the ID of the song to play
+ * @param {Number} songId - the ID of the song to remove
  */
-function playSong(songId) {
-    // Your code here
+function removeSong(songId) {
+  console.log(songId.path[1]);
+  const song = player.songs[songId.path[1].id]
+  let numberOfElementToRemove = 1;
+  player.songs.splice(songId.path[1].id  , numberOfElementToRemove);
+  document.getElementById(songId.path[1].id).remove();
+  console.log(player.songs);
 }
-
 /**
- * Creates a song DOM element based on a song object.
+ * Adds a song to the player, and updates the DOM to match.
  */
-function createSongElement({ id, title, album, artist, duration, coverArt }) {
-    const children = []
-    const classes = []
-    const attrs = { onclick: `playSong(${id})` }
-    return createElement("div", children, classes, attrs)
-}
+document.getElementById("add-button").addEventListener("click", function () {
+  let ele = {};
+  let id = player.songs.length + 1;
+  ele.id = id;
+  let title = document.querySelectorAll('input[name = title]')[0].value;
+  ele.title = title;
+  let album = document.querySelectorAll('input[name = album]')[0].value;
+  ele.album = album;
+  let artist = document.querySelectorAll('input[name = artist]')[0].value;
+  ele.artist = artist;
+  let duration = document.querySelectorAll('input[name = duration]')[0].value;
+  ele.duration = duration;
+  duration = document.querySelectorAll('input[name = duration]')[0].value;
+  let coverArt = document.querySelectorAll('input[name = cover-art]')[0].value;
+  ele.coverArt = coverArt;
+  addSong({
+    id,
+    title,
+    album,
+    artist,
+    duration,
+    coverArt
+  });
+  // make the input ready for new song 
+  document.querySelectorAll('input[name = artist]')[0].value = '';
+  document.querySelectorAll('input[name = duration]')[0].value = '';
+  document.querySelectorAll('input[name = cover-art]')[0].value = '';
+  document.querySelectorAll('input[name = album]')[0].value = '';
+  document.querySelectorAll('input[name = title]')[0].value = '';
+});
 
+function addSong({
+  id,
+  title,
+  album,
+  artist,
+  duration,
+  coverArt
+}) {
+  let allSongs = player.songs;
+  allSongs.push({
+    id,
+    title,
+    album,
+    artist,
+    duration,
+    coverArt
+  });
+  printaSong(id, title, album, artist, duration, coverArt);
+}
 /**
- * Creates a playlist DOM element based on a playlist object.
+ * Acts on a click event on an element inside the songs list.
+ * Should handle clicks on play buttons and remove buttons of songs.
+ *
+ * @param {MouseEvent} event - the click event
  */
-function createPlaylistElement({ id, name, songs }) {
-    const children = []
-    const classes = []
-    const attrs = {}
-    return createElement("div", children, classes, attrs)
+function handleSongClickEvent(event) {
+
 }
 
 /**
- * Creates a new DOM element.
- *
- * Example usage:
- * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
+ * Handles a click event on the button that adds 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 {Object} attributes - the attributes for the new element
+ * @param {MouseEvent} event - the click event
  */
-function createElement(tagName, children = [], classes = [], attributes = {}) {
-    // Your code here
+function handleAddSongEvent(event) {
+  // Your code here
 }
+//  gives platlist duration 
+function playlistDuration(id) {
+  const foundPlaylist = player.playlists.find(currPlaylist => currPlaylist.id === id);
+
+  // Reduce function to sum all the song durations, by finding each of them, and then adding to the sum
+  return foundPlaylist.songs.reduce((sum, currSong) =>
+    sum + player.songs.find(song => song.id === currSong).duration, 0);
+}
+
+function createSongElement({
+  id,
+  title,
+  artist,
+  duration,
+  coverArt
+}) {
+  const colored = (duration) => {
+    return duration < 600 ? 'color:green' : 'color:red';
+  }
+  // const classes = [];
+  const getId = createElement('p', [id]);
+  const titleSong = createElement('p',[title]);
+  const artistEl = createElement("p", [artist]);
+  let newDuration = convertDuration(duration)
+  const durationEl = createElement("p", [newDuration], ["duration", "short-duration"], {
+    style: colored(duration)
+  }, {});
+  const coverImageArtUrl = coverArt;
+  const imgEl = createElement("img", [], ["album-art"], {
+    src: coverImageArtUrl
+  });
+  const attrs = {
+    // onclick: `playSong(${id})`,
+    id,
+    class: `songs`
+  };
+
+  const playButton = createElement('button', ["▶"],['play']);
+  playButton.addEventListener("click", getIdForPlaysong);
+  const removeButton = createElement('button', ["❌"], ['remove']);
+  removeButton.addEventListener("click", removeSong);
+  // classes.push("songs");
+  return createElement("div", [getId, "Title: ",titleSong , "Artist: ", artistEl, "Duration: ", durationEl, imgEl,removeButton,  playButton], [], attrs, []);
+}
+
+
+function createPlaylistElement({
+  id,
+  name,
+  songs = []
+}) {
+  const children = [];
+  const classes = [];
+  const attrs = {};
+  const idEl = createElement("span", ["" + id], ["id"]);
+  const playListName = createElement("p", [name]);
+  const PLsongs = createElement("p", [songs]);
+  const durationEl = createElement("p", ["" + convertDuration(playlistDuration(id))], ["duration", "short-duration"]);
+  classes.push("playlist")
+  children.push(idEl, "Play list Name: ", playListName, 'songs: ', PLsongs, " time: ", durationEl);
+
+  return createElement("div", children, classes, attrs, );
+
 
-// You can write more code below this line
+}
+
+function createElement(tagName, children = [], classes = [], attributes = {}, ) {
+  const el = document.createElement(tagName);
+
+  // Children
+  for (const child of children) {
+    el.append(child);
+  }
+
+  // Classes
+  for (const cls of classes) {
+    el.classList.add(cls);
+  }
+
+  // Attributes
+  for (const attr in attributes) {
+    el.setAttribute(attr, attributes[attr]);
+  }
+
+  return el;
+}
+// sorting songs
+const sortBySong = () => {
+  player.songs.sort((a, b) => (a.title > b.title) * 2 - 1);
+}
+// sorting platlists 
+const sortByPlayList = () => {
+  player.playlists.sort((a, b) => (a.title > b.title) * 2 - 1);
+}
+// printing all songs 
+const printAllSongs = (id) => {
+  const songPrint = document.getElementById("songs");
+
+  for (let song of player.songs) {
+    const {
+      title,
+      album,
+      artist,
+      duration = duration,
+      id,
+      coverArt
+    } = song;
+    const songElemnt = createSongElement({
+      id,
+      title,
+      album,
+      artist,
+      duration,
+      coverArt
+    });
+    songPrint.appendChild(songElemnt);
+  }
+
+}
+
+// printing all plalysts 
+const printAllPlaylists = () => {
+  const playlistPrint = document.getElementById("playlists");
+
+  for (let playlist of player.playlists) {
+    const {
+      id,
+      name,
+      songs
+    } = playlist;
+    const playlistElem = createPlaylistElement({
+      id,
+      name,
+      songs
+    });
+    playlistPrint.append(playlistElem);
+  }
+}
+
+const printaSong = (id, title, album, artist, duration, coverArt) => {
+  const songPrint = document.getElementById("songs");
+  let song = '';
+  const songElemnt = createSongElement({
+    id,
+    title,
+    album,
+    artist,
+    duration,
+    coverArt
+  });
+  console.log(song)
+  songPrint.appendChild(songElemnt)
+}
+// calling functions 
+sortBySong();
+printAllSongs();
+printAllPlaylists();
+document.getElementById("add-button").addEventListener("click", handleAddSongEvent);
diff --git a/scripts/player.js b/scripts/player.js
@@ -62,3 +62,5 @@ const player = {
         { id: 5, name: "Israeli", songs: [4, 5] },
     ],
 }
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -62,3 +62,5 @@ const player = {
		{ id: 5, name: "Israeli", songs: [4, 5] },
		],
		}