diff --git a/src/elements/task.js b/src/elements/task.js
index d50cdea..7e06f68 100644
--- a/src/elements/task.js
+++ b/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({
diff --git a/src/main.js b/src/main.js
index fccfc5a..3f27edd 100644
--- a/src/main.js
+++ b/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);
-pubsub.subscribe("refreshDOM", refreshDOM);
\ No newline at end of file
+function valtest(event, eventy) {
+ console.log(eventy);
+}
+
+pubsub.subscribe("refreshDOM", refreshDOM);
+pubsub.subscribe("toggleDone", valtest);
\ No newline at end of file
diff --git a/src/modules/refreshDOM.js b/src/modules/refreshDOM.js
index 4593340..d252572 100644
--- a/src/modules/refreshDOM.js
+++ b/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},
`;
+ 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 };
\ No newline at end of file
diff --git a/src/modules/task.js b/src/modules/task.js
index bac95d1..0bcd5cf 100644
--- a/src/modules/task.js
+++ b/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() {
diff --git a/src/template.html b/src/template.html
index d9530e9..3fab010 100644
--- a/src/template.html
+++ b/src/template.html
@@ -11,11 +11,13 @@
-->