Working on assigning DOM events to object class functions

src/elements/task.js

@@ -2,6 +2,7 @@ import generateElement from "../modules/genElement";
 import { createElement as createIcon, Trash, Pencil, Star, AlarmClock, Archive } from 'lucide';
 import { format, isPast } from 'date-fns';
 import { idValue } from "../modules/refreshDOM";
+import pubsub from "../modules/pubsub";
 
 function generateTask(title, description, dueDate, priority, done) {
 
@@ -9,6 +10,7 @@ function generateTask(title, description, dueDate, priority, done) {
     css.doneCheck = "peer-checked/done";
     css.doneColor = `${css.doneCheck}:text-slate-300`;
     css.doneStrike = `${css.doneCheck}:line-through`;
+    console.log(css);
 
     const icons = Object.create({
         stroke(icon, stroke) {
@@ -40,11 +42,14 @@ function generateTask(title, description, dueDate, priority, done) {
         className: "done block peer/done",
         checked: done,
     })
+    let copyId = idValue.val;
+    doneElement.addEventListener("change", () => pubsub.publish("toggleDone", copyId));
     const priorityCheckbox = generateElement({
         element: "input",
         type: "checkbox",
         className: `priority peer/priority hidden`,
         id: `priority-${idValue.val}`,
+        checked: priority,
     })
     const priorityElement = generateElement({
         element: "label",
@@ -52,19 +57,17 @@ function generateTask(title, description, dueDate, priority, done) {
         className: `priority peer-checked/priority:*:fill-yellow-500
                     peer-checked/priority:*:stroke-yellow-500 block
                     cursor-pointer *:stroke-slate-300 *:stroke-1
-                    peer-checked/priority:*:stroke-2
-                    
-                    peer-checked/priority/done:*:bg-yellow-500`,
+                    peer-checked/priority:*:stroke-2`,
     })
     priorityElement.append(createIcon(Star));
     const titleElement = generateElement({
         element: "div",
-        className: `title block ${css.doneStrike} ${css.doneColor}`,
+        className: `title block peer-checked/done:line-through peer-checked/done:text-slate-300`,
         innerHTML: `${title}`,
     })
     const descriptionElement = generateElement({
         element: "div",
-        className: `description block flex-1 ${css.doneColor} ${css.doneStrike}`,
+        className: `description block flex-1 peer-checked/done:text-slate-300 peer-checked/done:line-through`,
         innerHTML: `${description}`,
     })
     function bodge() {
@@ -72,7 +75,7 @@ function generateTask(title, description, dueDate, priority, done) {
     }
     const dueDateElement = generateElement({
         element: "div",
-        className: `due-date block${isPast(dueDate) ? ` text-red-300 ${css.doneColor} ${css.doneStrike}` : ""} flex gap-1`,
+        className: `due-date block ${isPast(dueDate) ? `text-red-300 peer-checked/done:text-red-100` : "text-slate-200"} peer-checked/done:text-slate-300 peer-checked/done:line-through flex gap-1`,
         innerHTML: `${dueDate ? `${bodge()}` + format(dueDate, "dd.MM.yyyy hh:mm") : ""}`,
     })
     const changeDetailsBtn = generateElement({

src/main.js

@@ -12,10 +12,15 @@ function firstLaunch() {
   defaultProject.todos.push(new Task("Task #1", "getting to-do's to work", new Date("2024-02-12 12:00:00 PM"), false, false));
   defaultProject.todos.push(new Task("Task #2", "simple default settings", new Date("2024-02-07 8:00:00 AM"), false, true));
   defaultProject.todos.push(new Task("Task #3", "learn more", undefined, true, false));
-  defaultProject.todos[1].changeDetails("Task #5", "thanks", new Date("2024-02-01 12:00:00 AM"), true, false);
+  defaultProject.todos[1].changeDetails("Task #5", "thanks", new Date("2024-02-01 12:00:00 AM"), true, true);
   projects.push(defaultProject);
 }
 
 document.addEventListener("DOMContentLoaded", firstLaunch);
 
+function valtest(event, eventy) {
+  console.log(eventy);
+}
+
 pubsub.subscribe("refreshDOM", refreshDOM);
+pubsub.subscribe("toggleDone", valtest);

src/modules/refreshDOM.js

@@ -1,5 +1,15 @@
 import projects from "../projects";
 
+let idValue = {
+  value: 0,
+  get val() {
+    return this.value;
+  },
+  set val(value) {
+    this.value = value;
+  }
+}
+
 export default function refreshDOM() {
   const projectsDiv = document.querySelector("#projects-div #list");
   const tasksDiv = document.querySelector("#tasks-div #list");
@@ -14,20 +24,11 @@ export default function refreshDOM() {
     name: ${projects[0].name},
     <br>`;
 
+  idValue.val = 0;
   
   projects[0].todos.forEach(task => {
     tasksDiv.append(task.element);
   });
 }
 
-let idValue = {
-  value: 0,
-  get val() {
-    return this.value;
-  },
-  set val(value) {
-    this.value = value;
-  }
-}
-
 export { idValue };

src/modules/task.js

@@ -24,7 +24,7 @@ export default class Task {
     pubsub.publish("refreshDOM");
   }
   toggleDone() {
-    this.done = !this.done;
+    pubsub.subscribe("toggleDone", () => {this.done = !this.done});
     pubsub.publish("refreshDOM");
   }
   togglePriority() {

src/template.html

@@ -11,11 +11,13 @@
     </div> -->
     <div id="app">
         <header class="md:w-11/12 3xl:w-[1000px] border border-t-0 border-white text-center m-auto mb-4 md:rounded-b-lg p-4 bg-neutral-950 text-2xl">Tasks</header>
-        <div id="contain" class="grid md:grid-cols-[minmax(200px,_300px)_1fr] md:w-11/12 m-auto gap-4">
+        <div id="contain" class="grid md:grid-cols-[minmax(200px,_300px)_1fr] md:w-11/12 m-auto gap-4 [&_h1]:text-2xl">
             <div id="projects-div" class="bg-slate-800 md:rounded-md p-4 border border-green-200">
+                <h1>Projects</h1>
                 <div id="list"></div>
             </div>
             <div id="tasks-div" class="bg-slate-700 md:rounded-md p-4 border border-green-100">
+                <h1>Tasks</h1>
                 <div id="list"></div>
             </div>
         </div>