From 57b152afcd1f38fd8a8f65d1083ed948ed1f134c Mon Sep 17 00:00:00 2001 From: sagigolan8 Date: Sun, 12 Sep 2021 21:33:27 +0300 Subject: [PATCH 01/14] createElements completed --- .prettierrc | 6 ++-- index.html | 15 ++++++++-- scripts/index.js | 59 ++++++++++++++++++++++++++++++++++---- style.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+), 11 deletions(-) diff --git a/.prettierrc b/.prettierrc index 0fc66c4d..87a023cb 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "semi": false, - "tabWidth": 4, - "printWidth": 120 + "semi": false, + "tabWidth": 4, + "printWidth": 120 } diff --git a/index.html b/index.html index c55fb482..de7761e3 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,25 @@ Awesome MP3 Player - + + + +
- + + Generated songs go here
- + + playlists Generated playlists go here -->
diff --git a/scripts/index.js b/scripts/index.js index 6842c794..6c9efce2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -12,7 +12,11 @@ function playSong(songId) { * 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)), + const classes = [] const attrs = { onclick: `playSong(${id})` } return createElement("div", children, classes, attrs) @@ -22,7 +26,12 @@ 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",title,[],{}), + createElement("p",album,[],{}), + createElement("p",artist,[],{}), + createElement("p",durationFormat()), + createElement()] const classes = [] const attrs = {} return createElement("div", children, classes, attrs) @@ -34,14 +43,54 @@ 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