Feature/delete subject: subject removal function

css/subject.css

@@ -13,6 +13,11 @@
   border-radius: 1rem;
 }
 
+.subject-header {
+  display: flex;
+  justify-content: space-between;
+}
+
 .add-subject-button {
   background: transparent;
 
@@ -26,3 +31,16 @@
   width: 2rem;
   height: 2rem;
 }
+
+.delete-subject-button {
+  background: transparent;
+
+  border: none;
+  outline: none;
+
+  cursor: pointer;
+}
+.delete-subject-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}

js/constant.js

@@ -1,4 +1,4 @@
 const OPEN = 'open';
 const IN_PROGRESS = 'in-progress';
 const DONE = 'done';
-const COLUMN_LIST = [OPEN, IN_PROGRESS, DONE];
+const STATE_LIST = [OPEN, IN_PROGRESS, DONE];

js/index.js

@@ -13,14 +13,14 @@ document.addEventListener('DOMContentLoaded', () => {
   taskViewModel.addTask('task 1', doneSubject1.getId());
   taskViewModel.addTask('task 2', doneSubject1.getId());
 
-  COLUMN_LIST.forEach((column) => {
+  STATE_LIST.forEach((state) => {
     const addSubjectButtonElement = document.getElementById(
-      `add-subject-button-${column.toLowerCase()}`
+      `add-subject-button-${state.toLowerCase()}`
     );
 
     addSubjectButtonElement.addEventListener('click', () => {
       const subjectName = 'New Subject';
-      subjectViewModel.addSubject(subjectName, column);
+      subjectViewModel.addSubject(subjectName, state);
     });
   });
 });

js/viewModels/subjectViewModel.js

@@ -15,33 +15,55 @@ class SubjectViewModel {
     return subject;
   }
 
-  getSubjectsByColumn(columnId) {
-    return this.subjectList.get(columnId) || [];
+  deleteSubject(subjectId, state) {
+    const subjects = this.subjectList.get(state);
+    const subjectIndex = subjects.findIndex(
+      (subject) => subject.getId() === subjectId
+    );
+    subjects.splice(subjectIndex, 1);
+
+    this.render();
+  }
+
+  getSubjectsByState(state) {
+    return this.subjectList.get(state) || [];
   }
 
   render() {
-    COLUMN_LIST.forEach((column) => {
+    STATE_LIST.forEach((state) => {
       const subjectListElement = document.getElementById(
-        `${column}-subject-list`
+        `${state}-subject-list`
       );
       subjectListElement.innerHTML = '';
 
-      this.getSubjectsByColumn(column).forEach((subject) => {
+      this.getSubjectsByState(state).forEach((subject) => {
         const subjectId = subject.getId();
-        if (subject.getState() !== column) {
+        if (subject.getState() !== state) {
           return;
         }
 
         const subjectElement = document.createElement('li');
         subjectElement.classList.add('subject');
         subjectElement.innerHTML = `
-            <h3>${subject.getTitle()}</h3>
+            <header class="subject-header">
+              <h3>${subject.getTitle()}</h3>
+              <button class="delete-subject-button" id="${subjectId}-delete-button">
+                <img src="assets/deleteIcon.svg" class="delete-subject-icon" />
+              </button>
+            </header>
             <main>
               <ol id=${`${subjectId}-task-list`} />
             </main>
             `;
         subjectListElement.appendChild(subjectElement);
 
+        const deleteButtonElement = document.getElementById(
+          `${subjectId}-delete-button`
+        );
+        deleteButtonElement.addEventListener('click', () =>
+          this.deleteSubject(subjectId, state)
+        );
+
         this.taskViewModel.render(subjectId);
       });
     });