first commit with existing project files

1-HTMLMediaElement V2/Playlist.js

@@ -0,0 +1,50 @@
+export class Playlist {
+    constructor() {
+        this._tracks = [];
+    }
+
+    get tracks() {
+        return this._tracks;
+    }
+
+    addTrack(track) {
+        this._tracks.push(track);
+
+        const div = document.createElement('div');
+
+        div.classList.add('d-flex');
+        div.classList.add('align-items-center');
+        div.classList.add('justify-content-between');
+
+        const deleteBtn = document.createElement('button');
+        deleteBtn.innerHTML = `<i class="bi bi-trash"></i>`;
+        deleteBtn.classList.add("btn");
+        deleteBtn.classList.add("btn-danger");
+        deleteBtn.classList.add("col-md-1");
+        deleteBtn.style.marginRight = "10px";
+        deleteBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._tracks.splice(this._tracks.indexOf(track), 1);
+            div.remove();
+        });
+        div.appendChild(deleteBtn);
+        const li = document.createElement('li');
+        li.classList.add("card");
+        li.classList.add("shadow-sm");
+        li.classList.add("p-4");
+        li.classList.add("col-md-11");
+        li.textContent = track.name;
+        li.style.margin = "5px 0";
+
+        div.appendChild(li);
+
+        div.setAttribute('id', this._tracks.indexOf(track).toString());
+        div.setAttribute('draggable', 'true');
+
+        div.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('text/plain', e.target.id);
+        });
+
+        return div;
+    }
+}