suvelocity · MaorKurztag21 · Sep 12, 2021 · Sep 12, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5504
+}
diff --git a/images/icon.png b/images/icon.png
diff --git a/index.html b/index.html
@@ -9,9 +9,11 @@
         <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>

diff --git a/index.new.html b/index.new.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <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">
+        <script src="./scripts/player.js"></script>
+        <script src="./scripts/index.js" defer></script>
+    </head>
+    <body>
+        <h1>New Mp3 Player</h1>
+        <div id="add-section">
+            <h2>Add a new song</h2>
+            <div id="inputs">
+                <input name="title" placeholder="Title"><br>
+                <input name="album" placeholder="Album"><br>
+                <input name="artist" placeholder="Artist"><br>
+                <input name="duration" placeholder="duration (mm:ss)"><br>
+                <input name="cover-art" placeholder="Cover art link">
+            </div>
+            <button id="add-button">Add</button>
+        </div>
+        <div id="songs">
+            <div class="list">
+                </div> 
+            </div>
+        </div>
+        <div id="playlists">
+            <h2>Playlists</h2>
+            <div class="list">
+            </div>
+        </div>
+    </body>
diff --git a/index.new.js b/index.new.js
diff --git a/scripts/index.js b/scripts/index.js
@@ -1,47 +1,161 @@
 /**
+ * 
  * 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
+ function playSong(songId) {
+  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)";
+  console.log(songId);
+  if (songId < 7) {
+    setTimeout(()=> { playSong(Number(songId) + 1); }, getSongObjectById(songId).duration * 1000);
+}
 }
 
 /**
- * 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)
+      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 playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' });
+      let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' });
+      let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell'],{id:id});
+      const eventListeners = {};
+      console.log(songElement);
+      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.
- */
+* 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)
+  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']);
+  const eventListeners = {};
+  return playlistElem;
+}
+for(let playlist of player.playlists){
+  let playlistList = document.getElementById('playlists');
+   playlistList.append(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
+* @param {Object} eventListeners - the event listeners on the element
+*/
+function createElement(tagName, children = [], classes = [], attributes = {},eventListeners = {}) {
+let newEl = document.createElement(tagName);
+for(let child of children){
+  if (typeof(child) === "string") {
+    child = document.createTextNode(child);
+}
+     newEl.append(child);
+}
+for(let cls of classes){
+    newEl.classList.add(cls);
+}
+for(let attr in attributes){
+    newEl.setAttribute(attr, attributes[attr]);
 }
+return newEl
+}
+document.getElementById("add-button").addEventListener("click", handleAddSongEvent);
+
+function removeSong(songId) {
+  let removedSong = document.getElementById(songId);
+  removedSong.style = 'display: none';
+  for (let playlist of player.playlists) {
+      for (let i = 0; i <= playlist.songs.length; i++) {
+          if (playlist.songs[i] == songId) {
+              playlist.songs.splice(i, 1);
+              console.log(playlist.songs);
+          }
+      }
+  }
+  let removePlaylists = Array.from(document.querySelectorAll('.playlistShell'));
+  for (let playlist of removePlaylists) {
+      console.log(playlist);
+      playlist.style = 'display: none';
+  }
+  for (let playlist of player.playlists) {
+      let playlistDiv = document.getElementById('playlists');
+      playlistDiv.append(createPlaylistElement(playlist));
+      playlistDiv.style = "display: block";
+  }
+
 
+}
+function addSong({ title, album, artist, duration, coverArt }) {
+  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 playButton = createElement('button',["🔊"],["play-button"],{ type: 'button' });
+  let removeButton = createElement('button',["✖"],["remove-button"],{ type: 'button' });
+  let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt,playButton,removeButton],['songShell']);
+  let addingSong = document.getElementById('songs');
+  const eventListeners = {};
+  addingSong.append(songElement);
+}
 /**
- * Creates a new DOM element.
+ * Acts on a click event on an element inside the songs list.
+ * Should handle clicks on play buttons and remove buttons of songs.
  *
- * Example usage:
- * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
+ * @param {MouseEvent} event - the click event
+ */
+function handleSongClickEvent(event) {
+  let newSongObj = {
+      'title': document.getElementsByName('title')[0].value,
+      'album': document.getElementsByName('album')[0].value,
+      'artist': document.getElementsByName('artist')[0].value,
+      'duration': document.getElementsByName('duration')[0].value,
+      'coverArt:': document.getElementsByName('cover-art')[0].value
+  }
+  console.log(newSongObj);
+  addSong(newSongObj);
+}
+
+let addButton = document.getElementById('add-button');
+addButton.addEventListener('click', handleSongClickEvent);
+
+/**
+ * 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) {
 }
+let songSlist = document.getElementById('songs');
+songSlist.addEventListener('click', (event) => {
+    if (event.target.className === 'play-button') {
+        console.log(event.target.parentElement);
+        playSong(event.target.parentElement.id)
+    } else if (event.target.className === 'remove-button') {
+        removeSong(event.target.parentElement.id);
+    }
+});
 
-// You can write more code below this line
+ 
diff --git a/scripts/player.js b/scripts/player.js
@@ -31,34 +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] },
-    ],
-}
+          },
+        ],
+        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 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;
+        }