diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..f0e59eaf 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -4,17 +4,29 @@
*
* @param {String} songId - the ID of the song to play
*/
-function playSong(songId) {
- // Your code here
+
+ function playSong(songId) {
+ for (let song of player.songs) {
+ document.getElementById("song" + song.id).classList.remove("playing")
+ if (song.id === songId) {
+ document.getElementById("song" + song.id).classList.add("playing")
+ }
+ }
}
/**
* Creates a song DOM element based on a song object.
*/
function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
+ const children = [
+ createElement("p", title, [], {}),
+ createElement("p", album, [], {}),
+ createElement("p", artist, [], {}),
+ createElement("p", durationFormat(duration), [], {}),
+ createElement("img", [], [], { src: coverArt }),
+ ]
const classes = []
- const attrs = { onclick: `playSong(${id})` }
+ const attrs = { onclick: `playSong(${id})`, id: "song" + id }
return createElement("div", children, classes, attrs)
}
@@ -22,7 +34,11 @@ function createSongElement({ id, title, album, artist, duration, coverArt }) {
* Creates a playlist DOM element based on a playlist object.
*/
function createPlaylistElement({ id, name, songs }) {
- const children = []
+ const children = [
+ createElement("p", name, [], {}),
+ createElement("p", [songs.length], [], {}),
+ createElement("p", playlistDuration(id), [], {}),
+ ]
const classes = []
const attrs = {}
return createElement("div", children, classes, attrs)
@@ -34,14 +50,75 @@ 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
his children -
* 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
+ let minutes = Math.floor(duration / 60)
+ let 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) {
+ let 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 elemHtml = document.getElementById("songs")
+const elemHtml1 = document.getElementById("playlists")
+
+player.playlists.sort((playlistA, playlistB) => playlistA.name.localeCompare(playlistB.name))
+player.songs.sort((songA, songB) => songA.title.localeCompare(songB.title))
+
+for (let i = 0; i < player.songs.length; i++) {
+ //songs
+ elemHtml.append(createSongElement(player.songs[i]))
+}
+
+for (let i = 0; i < player.playlists.length; i++) {
+ //playlists
+ elemHtml1.append(createPlaylistElement(player.playlists[i]))
+}
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index 5a85f825..059a8c43 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -62,3 +62,5 @@ const player = {
{ id: 5, name: "Israeli", songs: [4, 5] },
],
}
+
+
diff --git a/style.css b/style.css
index f4645fe9..252d7885 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,30 @@
/* Your code here */
+
+.playing {
+ color: rgb(126, 255, 249);
+}
+
+body {
+ background-color: darkcyan;
+ font-weight: bold;
+ font-size: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap-reverse;
+}
+
+img {
+ width: 80px;
+ height: 80px;
+ border-radius: 5%;
+}
+
+#list {
+ display: flex;
+ justify-content: start;
+ flex-direction: column;
+ align-items: center;
+ line-height: 1.5rem;
+}
\ No newline at end of file
From 9731da0b96dc24336407b749af7a3ea15bac8d77 Mon Sep 17 00:00:00 2001
From: galgluska <89578212+galgluska@users.noreply.github.com>
Date: Sat, 18 Sep 2021 13:51:07 +0300
Subject: [PATCH 2/3] lovely
it was lovely
---
index.html | 5 +-
index.new.html | 31 ++++----
scripts/index.js | 15 ++--
scripts/index.new.js | 177 ++++++++++++++++++++++++++++++++++++++-----
style.css | 37 ++++++++-
5 files changed, 222 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 87aef6d4..aae65b9f 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,14 @@
+
+
-
+
+
diff --git a/index.new.html b/index.new.html
index eba39f17..3a44588b 100644
--- a/index.new.html
+++ b/index.new.html
@@ -9,20 +9,9 @@
- Awesome Player!!!
-
-