Awesome Player!!!
+Add a new song
@@ -22,40 +22,10 @@
Add a new song
-
- Songs
-
-
-
+
- )
+ const titleEl = createElement("header", [title], ["title-class"]);
+ // Song album ()
+ const albumEl = createElement("li", ["From: ", album], ["item-class"]);
+ // Song artist ( )
+ const artistEl = createElement("li", ["By: ", artist], ["item-class"]);
+ // Song duration ( )
+ const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`});
+
+ const coverImageArtUrl = coverArt;
+ const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl});
+
+ //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]);
+ return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"], {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)
-}
+ // Playlist's name ()
+ const nameEl = createElement("header", [name], ["title-class"]);
+ //Playlist's amount of songs
+ const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]);
+ //Playlist's duration ()
+ const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]);
+
+
+ return createElement("div", [nameEl, noOfSongsEl, durationsEl], ["playlist-class"]);
+};
+
+//console.log(createPlaylistElement({id: 5, name: "Israeli"}));
+//console.log(playlistDuration(5));
+
/**
* Creates a new DOM element.
@@ -40,8 +99,154 @@ function createPlaylistElement({ id, name, songs }) {
* @param {Array} classes - the class list of the new element
* @param {Object} attributes - the attributes for the new element
*/
+
+/* First try
function createElement(tagName, children = [], classes = [], attributes = {}) {
- // Your code here
-}
+ let element = document.createElement(tagName);
+ for(let child of children){
+ element.appendChild(child);
+ }
+ for(let clas of classes){
+ element.className = clas;
+ }
+
+ //coudln't figure this out
+
+ for(let attri in attributes){
+ element.setAttribute(attri, attributes[attri]);
+ }
+ return element;
+};
+*/
+
+// Second try
+function createElement(tagName, children = [], classes = [], attributes = {}) {
+ //Create element
+ 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;
+ }
+
// You can write more code below this line
+
+//Duration convertor (from seconds to mm:ss)
+
+
+
+//Get existing elements in the html index and place them in variables
+let body = document.getElementById('body');
+let songsContainer = document.getElementById('songs');
+let playlistsContainer = document.getElementById("playlists");
+
+//-----------Main container------\\
+
+const intro = createElement("p", ["This MP3 player was created to light up your mood, do not hesitate to use it :)"], ["paragraph"], {});
+const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {});
+const mainHeader = createElement("header", [mainH1], ["header"], {});
+const mainContainer = createElement("div", [mainHeader, intro], ["container"], {});
+body.appendChild(mainContainer);
+body.insertBefore(mainContainer, songsContainer);
+
+//--------Songs container------\\
+
+const songsH2 = createElement("h2", ["Songs"], ["headline"], {});
+const songsHeader = createElement("header", [songsH2], ["header"], {});
+const listOfSongs = createElement("ul", [], ["list"], {});
+for(let song of player.songs){
+ let songEl = createSongElement(song);
+ attachId(songEl, "song", song.id);
+ listOfSongs.appendChild(songEl);
+}
+songsContainer.className = "container";
+songsContainer.appendChild(songsHeader);
+songsContainer.appendChild(listOfSongs);
+
+//--------Playlists container------\\
+const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {});
+const playlistsHeader = createElement("header", [playlistsH3], ["header"], {});
+const listOfPlaylists = createElement("ul", [], ["list"], {});
+
+playlistsContainer.className = "container";
+playlistsContainer.appendChild(playlistsHeader);
+playlistsContainer.appendChild(listOfPlaylists);
+for(let playlist of player.playlists){
+ let playlistEl = createPlaylistElement(playlist);
+ attachId(playlistEl, "playlist", playlist.id)
+ listOfPlaylists.appendChild(playlistEl);
+}
+
+
+//-------Functions------\\
+//Converts the duration format to mm:ss
+function durationConvertor(duration){
+ let minutes = Math.floor(duration / 60);
+ let seconds = duration % 60;
+ if (seconds < 10){
+ seconds = "0" + seconds;
+ }
+ if (minutes < 10){
+ minutes = "0" + minutes;
+ }
+ return minutes + ":" + seconds;
+ };
+
+//Returns the duration of a song
+function getDuration(id){
+ for(let song of player.songs){
+ if(song.id == id){
+ return song.duration;
+ }
+ }
+ };
+
+//Counts the amount of songs in a playlist and returns the counter
+function songsCounter(id){
+ let count = 0;
+ for(let playlist of player.playlists){
+ if(playlist.id == id){
+ for(let i = 0; i < playlist.songs.length; i++){
+ count++;
+ }
+ }
+ }
+ return count;
+};
+
+//Returns the duration of a playlist
+function playlistDuration(id) {
+
+ let durations = 0;
+ for(let playlist of player.playlists){
+ if(playlist.id == id){
+ for(let i = 0; i < playlist.songs.length; i++){
+ durations += getDuration(playlist.songs[i]);
+ }
+ }
+ }
+ return durations;
+ };
+
+//ID attacher
+function attachId(element, string, id){
+ element.id = string + id;
+}
+
+
+// let test = document.getElementById("song2");
+// test.style.backgroundColor = "yellow";
\ No newline at end of file
diff --git a/scripts/index.new.js b/scripts/index.new.js
index c3a39c8e..d9933172 100644
--- a/scripts/index.new.js
+++ b/scripts/index.new.js
@@ -4,9 +4,29 @@
*
* @param {Number} songId - the ID of the song to play
*/
-function playSong(songId) {
- // Your code here
-}
+
+
+ function playSong(songId) {
+ //Converting the id to the song ID and to the element itself
+ elementId = "song"+songId;
+ songEl = document.getElementById(elementId);
+ //changing the backgroundColor to blue
+ blueBackgroundColor(songEl);
+ let duration = getDuration(songId) * 1000;
+ //Playing the song for the duration of that song
+ setTimeout(function(){stopBlueColor(songEl)}, duration);
+ console.log("Now playing :" + songEl.innerText);
+ }
+
+ //Changes the background color
+ function blueBackgroundColor(elem){
+ elem.style.backgroundColor = "blue";
+ }
+
+ //Stop the color change (returns to noraml)
+ function stopBlueColor(elem){
+ elem.style.backgroundColor = "whitesmoke";
+ }
/**
* Removes a song from the player, and updates the DOM to match.
@@ -14,15 +34,44 @@ function playSong(songId) {
* @param {Number} songId - the ID of the song to remove
*/
function removeSong(songId) {
- // Your code here
+ //ID checker
+ if(!idCheck(songId)) throw new Error("Invalid ID");
+ //Delete from player
+ player.songs.splice(IndexOfSong(songId), 1);
+ DeleteInPlayLists(songId);
+ //Remove element from DOM
+ elementId = "song"+songId;
+ let songEl = document.getElementById(elementId);
+ songEl.remove();
+ console.log("A song was removed! " + "ID: " + songId);
}
+
/**
* Adds a song to the player, and updates the DOM to match.
*/
-function addSong({ title, album, artist, duration, coverArt }) {
- // Your code here
-}
+function addSong(title, album, artist, duration, coverArt, id = randomId()) {
+ duration = reverseDurationConvertor(duration);
+ //Random ID generator
+ while(idCheck(id)){
+ id = randomId();
+ }
+ //Add to player
+ player.songs.push({
+ id: id,
+ title: title,
+ album: album,
+ artist: artist,
+ duration: duration
+ });
+
+ //Create new DOM element and appen as child to listOfSongs, log the action
+ let newSongEl = createSongElement({ id, title, album, artist, duration, coverArt });
+ attachId(newSongEl, "song", id);
+ listOfSongs.appendChild(newSongEl);
+ console.log("New song was added! " + title + " ID: " + id);
+};
+
/**
* Acts on a click event on an element inside the songs list.
@@ -30,8 +79,31 @@ function addSong({ title, album, artist, duration, coverArt }) {
*
* @param {MouseEvent} event - the click event
*/
-function handleSongClickEvent(event) {
- // Your code here
+ function handleSongClickEvent(e) {
+ const target = e.target;
+ let buttonClass = target.classList[1];
+ let parentId;
+ if(buttonClass === "btn-play"){
+ parentId = getParentId(target);
+ playSong(parentId);
+ }else if(buttonClass === "btn-remove"){
+ parentId = getParentId(target);
+ removeSong(parentId);
+ }
+ }
+
+//returns the ID of the song from the song element's ID
+
+function songIdReturn(songId){
+ let id = songId.slice(4);
+ id = parseInt(id, 10);
+ return(id);
+}
+
+function getParentId(target){
+ let parentId = target.parentElement.id;
+ parentId = songIdReturn(parentId);
+ return(parentId);
}
/**
@@ -39,31 +111,55 @@ function handleSongClickEvent(event) {
*
* @param {MouseEvent} event - the click event
*/
-function handleAddSongEvent(event) {
- // Your code here
+function handleAddSongEvent(e) {
+ e.preventDefault();
+ let title = newTitle.value;
+ let album = newAlbum.value;
+ let artist = newArtist.value;
+ let duration = newDuration.value;
+ let coverArt = newCoverArt.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 }) {
+ // Song title ()
+ const titleEl = createElement("header", [title], ["title-class"]);
+ // Song album ()
+ const albumEl = createElement("li", ["From: ", album], ["item-class"]);
+ // Song artist ( )
+ const artistEl = createElement("li", ["By: ", artist], ["item-class"]);
+ // Song duration ( )
+ const durationEl = createElement("li", ["Duration: ", durationConvertor(duration)], ["duration-class"], {onclick: `console.log('${durationConvertor(duration)}')`});
+ //Song cover (![]()
)
+ const coverImageArtUrl = coverArt;
+ const imgEl = createElement("img", [] ,["image-class"], {src: coverImageArtUrl});
+ //Play button
+ const playBtn = createElement("button", ["PLAY"], ["btn", "btn-play"],{});
+ //Delete button
+ const removeBtn = createElement("button", ["X"], ["btn", "btn-remove"], {});
+ //return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl], ["song-class"]);
+ return createElement("div", [titleEl, artistEl, albumEl, durationEl, imgEl, playBtn, removeBtn], ["song-class"], {click: `playSong(${id})`});
+};
/**
- * 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 = {}
- const eventListeners = {}
- return createElement("div", children, classes, attrs, eventListeners)
-}
+ // Playlist's name ()
+ const nameEl = createElement("header", [name], ["title-class"]);
+ //Playlist's songs ()
+ const playlistSongs = createElement("li", ["Songs: " + songs], ["item-class", "playlist-songs"]);
+ //Playlist's amount of songs
+ const noOfSongsEl = createElement("li", ["No. of songs: ", songsCounter(id)], ["item-class"]);
+ //Playlist's duration ()
+ const durationsEl = createElement("li", ["Duration: ",durationConvertor(playlistDuration(id))], ["item-class"]);
+
+
+ return createElement("div", [nameEl, playlistSongs, noOfSongsEl, durationsEl], ["playlist-class"]);
+};
/**
* Creates a new DOM element.
@@ -78,27 +174,250 @@ function createPlaylistElement({ id, name, songs }) {
* @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 = {}) {
- // Your code here
-}
+
+ function createElement(tagName, children = [], classes = [], attributes = {}, eventListeners = {}) {
+ //Create element
+ 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]);
+ }
+
+ //Evenetlisteners ???
+ for(const [key, value] of Object.entries(eventListeners)){
+ el.addEventListener(`${key}`, `${value}`);
+ }
+
+ return el;
+ }
+
+//Takes an input and creates
+
+
+// Making the add-song-button actually do something
+document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+
+
/**
* Inserts all songs in the player as DOM elements into the songs list.
*/
-function generateSongs() {
- // Your code here
+ function generateSongs(playerObj, songsList) {
+ for(let song of playerObj.songs){
+ let songEl = createSongElement(song);
+ attachId(songEl, "song", song.id);
+ songsList.appendChild(songEl);
+ }
}
/**
* Inserts all playlists in the player as DOM elements into the playlists list.
*/
-function generatePlaylists() {
- // Your code here
+ function generatePlaylists(playerObj, playlistsList) {
+ for(let playlist of player.playlists){
+ let playlistEl = createPlaylistElement(playlist);
+ attachId(playlistEl, "playlist", playlist.id)
+ playlistsList.appendChild(playlistEl);
+}
}
-// Creating the page structure
-generateSongs()
-generatePlaylists()
-// Making the add-song-button actually do something
-document.getElementById("add-button").addEventListener("click", handleAddSongEvent)
+//-----------Creatin page structure---------\\
+
+//-----------Main container---------\\
+const body = document.getElementById('body');
+const intro = createElement("p", ["This MP3 player was created to light up your mood, do not hesitate to use it :)"], ["paragraph"], {});
+const mainH1 = createElement("h1", ["Aviv's MP3 Player"], ["headline"], {});
+const mainHeader = createElement("header", [mainH1], ["header"], {});
+const mainContainer = createElement("div", [mainHeader, intro], ["container"], {});
+mainContainer.id = "main-container";
+body.appendChild(mainContainer);
+body.insertBefore(mainContainer, body.firstElementChild);
+
+//------Add a new song container------\\
+const songSection = document.getElementById("add-section");
+songSection.className = "container";
+
+//I tried to take the value of the inputs but could not reach them
+
+//const newTitle = document.getElementsByName("title")[0].value;
+//const newAlbum = document.getElementsByName("album")[0].value;
+//const newArtist = document.getElementsByName("artist")[0].value;
+//const newDuration = document.getElementsByName("duration")[0].value;
+//const newCoverArt = document.getElementsByName("cover-art")[0].value;
+
+//So I'm making an array of inputs
+inputCollection = document.getElementsByTagName("input");
+//Now I'm placing it in a regular arr
+let inputArr = [];
+for(input of inputCollection){
+ inputArr.push(input);
+}
+//And giving them IDs
+for(let i = 0; i < inputArr.length; i++){
+ inputArr[i].id = "input"+i;
+}
+
+const newTitle = document.getElementById("input0");
+const newAlbum = document.getElementById("input1");
+const newArtist = document.getElementById("input2");
+const newDuration = document.getElementById("input3");
+const newCoverArt = document.getElementById("input4");
+
+
+
+//--------Songs container------\\
+const songsContainer = document.getElementById('songs');
+const songsH2 = createElement("h2", ["Songs"], ["headline"], {});
+const songsHeader = createElement("header", [songsH2], ["header"], {});
+const listOfSongs = createElement("ul", [], ["list"], {});
+
+songsContainer.className = "container";
+songsContainer.appendChild(songsHeader);
+songsContainer.appendChild(listOfSongs);
+//add event listener
+songsContainer.addEventListener("click", handleSongClickEvent);
+
+generateSongs(player, listOfSongs);
+
+
+//--------Playlists container------\\
+const playlistsContainer = document.getElementById("playlists");
+const playlistsH3 = createElement("h3", ["Playlists"], ["headline"], {});
+const playlistsHeader = createElement("header", [playlistsH3], ["header"], {});
+const listOfPlaylists = createElement("ul", [], ["list"], {});
+
+playlistsContainer.className = "container";
+playlistsContainer.appendChild(playlistsHeader);
+playlistsContainer.appendChild(listOfPlaylists);
+
+
+generatePlaylists(player, listOfPlaylists)
+
+
+
+
+//-------------Functions----------------\\
+
+//Converts the duration format to mm:ss
+function durationConvertor(duration){
+ let minutes = Math.floor(duration / 60);
+ let seconds = duration % 60;
+ if (seconds < 10){
+ seconds = "0" + seconds;
+ }
+ if (minutes < 10){
+ minutes = "0" + minutes;
+ }
+ return minutes + ":" + seconds;
+ };
+
+//Duration reverse convertor (from mm:ss to seconds)
+
+function reverseDurationConvertor(duration){
+ duration = duration.split(":");
+ let minutes = parseInt(duration[0]) * 60;
+ let seconds = parseInt(duration[1]);
+ return minutes + seconds;
+}
+
+
+//Returns the duration of a song
+function getDuration(id){
+ for(let song of player.songs){
+ if(song.id == id){
+ return song.duration;
+ }
+ }
+ };
+
+//Counts the amount of songs in a playlist and returns the counter
+function songsCounter(id){
+ let count = 0;
+ for(let playlist of player.playlists){
+ if(playlist.id == id){
+ for(let i = 0; i < playlist.songs.length; i++){
+ count++;
+ }
+ }
+ }
+ return count;
+};
+
+//Returns the duration of a playlist
+function playlistDuration(id) {
+
+ let durations = 0;
+ for(let playlist of player.playlists){
+ if(playlist.id == id){
+ for(let i = 0; i < playlist.songs.length; i++){
+ durations += getDuration(playlist.songs[i]);
+ }
+ }
+ }
+ return durations;
+ };
+
+//ID attacher
+function attachId(element, string, id){
+ element.id = string + id;
+}
+
+//Returns true if id exists and false if not
+function idCheck(id){
+ for(let song of player.songs){
+ if(song.id == id){
+ return true;
+ }
+ }
+ return false;
+}
+
+//Returns an index of a song in songs by id
+function IndexOfSong(id) {
+ for(let song of player.songs){
+ if(song.id == id){
+ return player.songs.indexOf(song);
+ }
+ }
+ }
+
+ //Deleting the specific song from playlists
+function DeleteInPlayLists(id) {
+ for(let playlistSongs of player.playlists){
+ for(let i = 0; i < playlistSongs.songs.length; i++){
+ if(playlistSongs.songs[i] == id){
+ playlistSongs.songs.splice(i, 1);
+ }
+ }
+ }
+ };
+
+
+//Random ID generator between 1-100
+function randomId(){
+ return Math.floor(Math.random() * 101);
+}
+
+//Just for fun =]
+
+body.addEventListener("mousemove", changeBackgroundColor);
+
+
+function changeBackgroundColor(e){
+ mainContainer.style.backgroundColor = "rgb("+e.offsetY+", "+e.offsetX+", 20)";
+ songs.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)";
+ playlists.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)";
+ songSection.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", 40)";
+}
\ No newline at end of file
diff --git a/scripts/player.js b/scripts/player.js
index 5a85f825..f7029e3b 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -62,3 +62,4 @@ const player = {
{ id: 5, name: "Israeli", songs: [4, 5] },
],
}
+
diff --git a/style.css b/style.css
index f4645fe9..c6f86cc2 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,111 @@
-/* Your code here */
+/* ------Main section------ */
+#main-container{
+ background-color: lightgray;
+}
+.container{
+ box-shadow: 2px 0 4px rgba(0,0,0,0.5);
+ border-radius: 2px;
+ border: 1px black;
+ border-style: solid;
+ text-align: center;
+ font-size: 1.25em;
+
+}
+
+#header{
+ font-family: 'Orbitron', sans-serif;
+ color: slategray(0, 0, 0);
+ font-size: 2em;
+ text-align: center;
+ border: 1px black;
+ border-style: solid;
+ margin: 0%;
+ padding: 0%;
+ justify-content: center;
+ justify-content: stretch;
+}
+
+#headline{
+ font-size: 2em;
+}
+
+.paragraph{
+ font-family: "Comic Sans MS";
+
+}
+
+/* ------Add song section------ */
+
+#add-section{
+display: flex;
+display: flex;
+flex-flow: column wrap;
+justify-content: center;
+background-color: whitesmoke;
+}
+#add-button{
+ margin-top: 1%;
+ margin-bottom: 1%;
+ margin-left: 4%;
+ margin-right: 4%;
+}
+/* ------Songs && Playlists sections------ */
+#songs, #playlists{
+ background-color: lightgray;
+ padding-right: 4%;
+}
+
+.list{
+ list-style-type: none;
+}
+
+
+.song-class, .playlist-class{
+ background-color: whitesmoke;
+ margin: 5%;
+ padding-right: 4%;
+ padding-top: 3%;
+ padding-bottom: 3%;
+ border: 3px black solid;
+ font-family: 'Oswald', sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ text-align:center !important;
+ color: white;
+
+}
+
+.item-class{
+ color: gray;
+
+}
+
+.title-class{
+ color: slategray;
+ font-size: 1.5em;
+}
+
+.duration-class{
+color: #5d8680;
+font-style: italic;
+}
+
+.image-class{
+ height: 10em;
+ width: 10em;
+ margin-left: 17%;
+}
+
+.btn{
+ float: right;
+ font-size: 1em;
+}
+
+.btn-play{
+ background-color: green;
+ margin-left: 2%;
+}
+
+.btn-remove{
+ background-color: red;
+}
\ No newline at end of file
Playlists
-
-
-
+
+
diff --git a/scripts/index.js b/scripts/index.js
index 6842c794..e51684fe 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -5,28 +5,87 @@
* @param {String} songId - the ID of the song to play
*/
function playSong(songId) {
- // Your code here
-}
+ let songEl = document.getElementById("song"+songId);
+ songEl.style.backgroundColor = "yellow";
+ console.log("Now playing :", '\n' + songEl.innerText)
+ }
+
/**
* Creates a song DOM element based on a song object.
*/
+
+/* First try
function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
- const classes = []
- const attrs = { onclick: `playSong(${id})` }
- return createElement("div", children, classes, attrs)
-}
+
+ -------Song elements-------\\
+ const songTitle = document.createElement("header");
+ songTitle.innerHTML = title;
+ songTitle.className = "song-title";
+
+ const songAlbum = document.createElement("li");
+ songAlbum.innerHTML = album;
+ songAlbum.className = "song-item";
+
+ const songArtist = document.createElement("li");
+ songArtist.innerHTML = artist;
+ songArtist.className = "song-item";
+
+ const songDuration = document.createElement("li");
+ songDuration.innerHTML = durationConvertor(duration);
+ songDuration.className = "song-duration";
+
+ const songCover = document.createElement("img");
+ songCover.innerHTML = coverArt;
+ songCover.className = "song-cover";
+
+
+ const children = [songTitle, songAlbum, songArtist, songDuration, songCover];
+ const classes = ["song-class"];
+ const attrs = { onclick: `playSong(${id})` }
+
+ return createElement("div", children, classes, attrs)
+};
+*/
+
+// Second try
+function createSongElement({ id, title, album, artist, duration, coverArt }) {
+ // Song title (