diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..a0de46ff
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5504
+}
\ No newline at end of file
diff --git a/images/icon.png b/images/icon.png
deleted file mode 100644
index 6b01e2f4..00000000
Binary files a/images/icon.png and /dev/null differ
diff --git a/index.html b/index.html
index c55fb482..5934db5e 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,11 @@
+ New MP3 Player
-
+
+ Playlists
diff --git a/index.new.html b/index.new.html
new file mode 100644
index 00000000..b277531d
--- /dev/null
+++ b/index.new.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Awesome MP3 Player
+
+
+
+
+
+
+ New Mp3 Player
+
+
+
+
+
diff --git a/index.new.js b/index.new.js
new file mode 100644
index 00000000..e69de29b
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..4e59c52b 100644
--- 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
+
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index 5a85f825..9947d12f 100644
--- 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;
+ }
\ No newline at end of file
diff --git a/style.css b/style.css
index f4645fe9..df9a4b07 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,58 @@
-/* Your code here */
+body{
+ font-family: sans-serif;
+ background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
+}
+h1{
+ color: rgba(5, 56, 25, 0.637);
+ text-decoration: underline;
+ text-align: center;
+ font-size: 100px;
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+}
+.songShell{
+border: 7px solid rgb(224, 19, 104);
+border-width: 3px;
+border-color: darkgoldenrod;
+align-items: center;
+margin-right: 100px;
+margin-left: 300px;
+margin-top: 100px;
+margin-bottom: 50px;
+}
+.playlistShell {
+ border: 10px double rgb(95, 84, 158);
+ border-radius: 10%;
+
+}
+.songShell img{
+ border-radius: 20%;
+ display: block;
+ margin-left: auto;
+ margin-right:80px;
+ padding-top: 30px;
+ padding-right: 100px;
+ padding-bottom: 40px;
+
+}
+.playlistShell h3{
+ color: blue;
+ font-family: verdana;
+ font-size: 100%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+div{
+ color:darkviolet;
+ font-size: 20px;
+}
+h2{
+ font-size: 60px;
+ font-family: monospace;
+}
+h3{
+ font-size: 40px;
+}
+h4{
+ font-size: 30px;
+ font-family: cursive;
+}