From 41307c228f8d42f1a7b65558bc69a1d0f04fc125 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Mon, 13 Sep 2021 15:40:30 +0300
Subject: [PATCH 1/2] all the Requirements
---
.vscode/launch.json | 15 ++++++++
scripts/index.js | 91 ++++++++++++++++++++++++++++++++++++++-------
style.css | 29 ++++++++++++++-
3 files changed, 120 insertions(+), 15 deletions(-)
create mode 100644 .vscode/launch.json
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..7a9dfa0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // 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://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index 6842c79..52ec4fc 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -5,29 +5,66 @@
* @param {String} songId - the ID of the song to play
*/
function playSong(songId) {
- // Your code here
+ const song=document.getElementById(songId+"song")
+ song.classList.add("now-playing")
+ setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
+ console.log(findSong(songId).duration*1000)
}
/**
* 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)
-}
+ function createSongElement({ id, title, album, artist, duration, coverArt }) {
+ const nameEl=createElement("span", [title],["song-name"]);
+ const albumEl=createElement("span",[album],["album-name"])
+ const artistEl = createElement("span", [artist],["artist"]);
+ const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
+ const coverImageArtUrl = getSongImage(id);
+ const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+ }
/**
* 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)
+ const nameEl=createElement("span", [name,":"],["playlist-name"]);
+ const quantityEl=createElement("span",[songs.length],["num-of-song"])
+ const attrs = {id:id}
+ return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
+}
+
+function getSongImage(id){
+ return findSong(id).coverArt
}
+function secToDur(sec){
+ return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+}
+function findSong(id,mPlayer=player){
+ for(let song of mPlayer.songs){
+ if (song.id===id){
+ return song;
+ }
+ }
+ throw "ID not found";
+}
+function findPlaylist(id,mPlayer=player){
+ for(let Playlist of mPlayer.playlists){
+ if (Playlist.id===id){
+ return Playlist;
+ }
+ }
+ throw "ID not found";
+}
+
+function playlistDuration(id) {
+ let plDuration=0;
+ for(let songID of findPlaylist(id).songs){
+ plDuration+=(findSong(songID).duration);
+ }
+ return (plDuration);
+}
/**
* Creates a new DOM element.
*
@@ -40,8 +77,34 @@ function createPlaylistElement({ id, name, songs }) {
* @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
+ 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;
+ }
+function appendingSongs(player){
+ const songEl=document.getElementById("songs")
+ for(song of player.songs){
+ songEl.append(createSongElement(song));
+ }
}
-// You can write more code below this line
+function appendingPlaylists(player){
+ const playListEl=document.getElementById("playlists")
+ for(playlist of player.playlists){
+ playListEl.append(createPlaylistElement(playlist));
+ }
+}
+appendingPlaylists(player)
+appendingSongs(player)
diff --git a/style.css b/style.css
index f4645fe..0e769bd 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,28 @@
-/* Your code here */
+body{
+text-align: center;
+font-size: 200%;
+background-image: url("https://www.freepik.com/free-photo/abstract-smoke-wallpaper-background-desktop_17581093.htm#page=1&query=Background&position=9");
+background-color: #b9992d;
+}
+
+.album-art{
+ border-radius: 50%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 5%;
+ margin-top: 2%;
+ width: 25%;
+ border: 3px solid rgb(26, 167, 136);
+ padding: 2px;
+ align-items: center;
+}
+
+.now-playing{
+ background-color: rgb(5, 58, 58);
+
+}
+span{
+ margin-right: 2%;
+}
+
From 199ebddbac6734410e71b1439a05c28ecb816980 Mon Sep 17 00:00:00 2001
From: tsoriLache <89573774+tsoriLache@users.noreply.github.com>
Date: Tue, 14 Sep 2021 20:26:05 +0300
Subject: [PATCH 2/2] last?
---
index.new.html | 10 +--
scripts/index.js | 166 ++++++++++++++++++++++---------------------
scripts/index.new.js | 136 ++++++++++++++++++++++++++++-------
3 files changed, 200 insertions(+), 112 deletions(-)
diff --git a/index.new.html b/index.new.html
index eba39f1..b5bafb1 100644
--- a/index.new.html
+++ b/index.new.html
@@ -13,11 +13,11 @@ Awesome Player!!!
diff --git a/scripts/index.js b/scripts/index.js
index 52ec4fc..6e98192 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,67 +4,73 @@
*
* @param {String} songId - the ID of the song to play
*/
-function playSong(songId) {
- const song=document.getElementById(songId+"song")
- song.classList.add("now-playing")
- setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
- console.log(findSong(songId).duration*1000)
-}
+// let lastSongPlayed;
+// function playSong(songId) {
+// try{
+// lastSongPlayed.classList.remove("now-playing");
+// }finally{
+// const song=document.getElementById(songId+"song")
+// song.classList.add("now-playing")
+// setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
+// setTimeout(()=>playSong(player.songs[(player.songs.indexOf(findSong(songId))+1)].id),findSong(songId).duration*1000);
+// lastSongPlayed=song;
+// }
+// }
/**
* Creates a song DOM element based on a song object.
*/
- function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const nameEl=createElement("span", [title],["song-name"]);
- const albumEl=createElement("span",[album],["album-name"])
- const artistEl = createElement("span", [artist],["artist"]);
- const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
- const coverImageArtUrl = getSongImage(id);
- const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
- return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
- }
+// function createSongElement({ id, title, album, artist, duration, coverArt }) {
+// const nameEl=createElement("span", [title],["song-name"]);
+// const albumEl=createElement("span",[album],["album-name"])
+// const artistEl = createElement("span", [artist],["artist"]);
+// const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
+// const coverImageArtUrl = getSongImage(id);
+// const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
+// return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+// }
/**
* Creates a playlist DOM element based on a playlist object.
*/
-function createPlaylistElement({ id, name, songs }) {
- const nameEl=createElement("span", [name,":"],["playlist-name"]);
- const quantityEl=createElement("span",[songs.length],["num-of-song"])
- const attrs = {id:id}
- return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
-}
+// function createPlaylistElement({ id, name, songs }) {
+// const nameEl=createElement("span", [name,":"],["playlist-name"]);
+// const quantityEl=createElement("span",[songs.length],["num-of-song"])
+// const attrs = {id:id}
+// return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
+// }
-function getSongImage(id){
- return findSong(id).coverArt
-}
+// function getSongImage(id){
+// return findSong(id).coverArt
+// }
-function secToDur(sec){
- return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
-}
-function findSong(id,mPlayer=player){
- for(let song of mPlayer.songs){
- if (song.id===id){
- return song;
- }
- }
- throw "ID not found";
-}
-function findPlaylist(id,mPlayer=player){
- for(let Playlist of mPlayer.playlists){
- if (Playlist.id===id){
- return Playlist;
- }
- }
- throw "ID not found";
-}
+// function secToDur(sec){
+// return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+// }
+// function findSong(id,mPlayer=player){
+// for(let song of mPlayer.songs){
+// if (song.id===id){
+// return song;
+// }
+// }
+// throw "ID not found";
+// }
+// function findPlaylist(id,mPlayer=player){
+// for(let Playlist of mPlayer.playlists){
+// if (Playlist.id===id){
+// return Playlist;
+// }
+// }
+// throw "ID not found";
+// }
-function playlistDuration(id) {
- let plDuration=0;
- for(let songID of findPlaylist(id).songs){
- plDuration+=(findSong(songID).duration);
- }
- return (plDuration);
-}
+// function playlistDuration(id) {
+// let plDuration=0;
+// for(let songID of findPlaylist(id).songs){
+// plDuration+=(findSong(songID).duration);
+// }
+// return (plDuration);
+// }
/**
* Creates a new DOM element.
*
@@ -77,34 +83,34 @@ function playlistDuration(id) {
* @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 = {}) {
- 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;
- }
-function appendingSongs(player){
- const songEl=document.getElementById("songs")
- for(song of player.songs){
- songEl.append(createSongElement(song));
- }
-}
+// 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;
+// }
+// function appendingSongs(player){
+// const songEl=document.getElementById("songs")
+// for(song of player.songs){
+// songEl.append(createSongElement(song));
+// }
+// }
-function appendingPlaylists(player){
- const playListEl=document.getElementById("playlists")
- for(playlist of player.playlists){
- playListEl.append(createPlaylistElement(playlist));
- }
-}
-appendingPlaylists(player)
-appendingSongs(player)
+// function appendingPlaylists(player){
+// const playListEl=document.getElementById("playlists")
+// for(playlist of player.playlists){
+// playListEl.append(createPlaylistElement(playlist));
+// }
+// }
+// appendingPlaylists(player)
+// appendingSongs(player)
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8..dd14499 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,9 +4,18 @@
*
* @param {Number} songId - the ID of the song to play
*/
-function playSong(songId) {
- // Your code here
-}
+ let lastSongPlayed;
+ function playSong(songId) {
+ try{
+ lastSongPlayed.classList.remove("now-playing");
+ }finally{
+ const song=document.getElementById(songId+"song")
+ song.classList.add("now-playing")
+ setTimeout(()=>song.classList.remove("now-playing"),findSong(songId).duration*1000);
+ setTimeout(()=>playSong(player.songs[(player.songs.indexOf(findSong(songId))+1)].id),findSong(songId).duration*1000);
+ lastSongPlayed=song;
+ }
+ }
/**
* Removes a song from the player, and updates the DOM to match.
@@ -16,12 +25,25 @@ function playSong(songId) {
function removeSong(songId) {
// Your code here
}
-
+let newSongId=10;
+function generateSongId(){
+ newSongId+=1;
+ return newSongId;
+}
/**
* Adds a song to the player, and updates the DOM to match.
*/
function addSong({ title, album, artist, duration, coverArt }) {
- // Your code here
+ player.songs.push({
+ id: generateSongId(),
+ title: title,
+ album: album,
+ artist: artist,
+ duration: duration,
+ coverArt: coverArt
+ })
+ console.log(player.songs)
+ songEl.append(createSongElement(player.songs[player.songs.length-1]));
}
/**
@@ -40,31 +62,39 @@ function handleSongClickEvent(event) {
* @param {MouseEvent} event - the click event
*/
function handleAddSongEvent(event) {
- // Your code here
+ let title=document.getElementById("title").value
+ ,album=document.getElementById("album").value
+ ,artist=document.getElementById("artist").value
+ ,duration=document.getElementById("duration").value
+ ,coverArt=document.getElementById("cover-art").value
+ addSong({title,album,artist,duration,coverArt})
}
+
/**
* Creates a song DOM element based on a song object.
*/
-function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
-}
+ function createSongElement({ id, title, album, artist, duration, coverArt }) {
+ const nameEl=createElement("span", [title],["song-name"]);
+ const albumEl=createElement("span",[album],["album-name"])
+ const artistEl = createElement("span", [artist],["artist"]);
+ const durationEl = createElement("span", ["" + secToDur(duration)] ,["duration", "short-duration"], {onclick: `console.log('${duration}')`});
+ const coverImageArtUrl = getSongImage(id);
+ const imgEl = createElement("img", [] ,["album-art"], {src: coverImageArtUrl});
+ return createElement("div", [nameEl,albumEl,"Artist: ", artistEl, "Duration: ", durationEl, imgEl],["song"],{id:id+"song", onclick: `playSong(${id})` });
+ }
/**
* Creates a playlist DOM element based on a playlist object.
*/
-function createPlaylistElement({ id, name, songs }) {
- const children = []
- const classes = []
- const attrs = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
+ function createPlaylistElement({ id, name, songs }) {
+ const nameEl=createElement("span", [name,":"],["playlist-name"]);
+ const quantityEl=createElement("span",[songs.length],["num-of-song"])
+ const attrs = {id:id}
+ return createElement("div", [nameEl,"Number Of Songs:",quantityEl,"Playlist Duration:",secToDur(playlistDuration(id))], ["playlist"],{id:id+"pl"})
}
+
/**
* Creates a new DOM element.
*
@@ -79,26 +109,78 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Object} eventListeners - the event listeners on the element
*/
function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
- // Your code here
+ 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;
}
/**
* Inserts all songs in the player as DOM elements into the songs list.
*/
-function generateSongs() {
- // Your code here
+const songEl=document.getElementById("songs")
+function appendingSongs(player){
+ for(song of player.songs){
+ songEl.append(createSongElement(song));
+ }
}
/**
* Inserts all playlists in the player as DOM elements into the playlists list.
*/
-function generatePlaylists() {
- // Your code here
+const playListEl=document.getElementById("playlists")
+function appendingPlaylists(player){
+ for(playlist of player.playlists){
+ playListEl.append(createPlaylistElement(playlist));
+ }
}
-// Creating the page structure
-generateSongs()
-generatePlaylists()
+
// Making the add-song-button actually do something
document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+
+function getSongImage(id){
+ return findSong(id).coverArt
+}
+
+function secToDur(sec){
+ return((Math.floor(sec/60))<10? "0": "")+`${Math.floor(sec/60)}:` +((sec%60)<10? "0": "")+`${sec%60}`
+}
+function findSong(id,mPlayer=player){
+ for(let song of mPlayer.songs){
+ if (song.id===id){
+ return song;
+ }
+ }
+ throw "ID not found";
+}
+function findPlaylist(id,mPlayer=player){
+ for(let Playlist of mPlayer.playlists){
+ if (Playlist.id===id){
+ return Playlist;
+ }
+ }
+ throw "ID not found";
+}
+
+function playlistDuration(id) {
+ let plDuration=0;
+ for(let songID of findPlaylist(id).songs){
+ plDuration+=(findSong(songID).duration);
+ }
+ return (plDuration);
+}
+// Creating the page structure
+appendingPlaylists(player)
+appendingSongs(player)
\ No newline at end of file