Icons, little CSS tweaks, changed DOM/genElement functions

README.md

@@ -1,6 +1,6 @@
 # odin-todo
 
-Project using npm, webpack, tailwindcss
+Project using npm, webpack, tailwindcss, lucide (icons)
 
 ## setup
 

package-lock.json

@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "date-fns": "^3.3.1",
+        "lucide": "^0.323.0",
         "tailwindcss": "^3.4.1"
       },
       "devDependencies": {
@@ -2383,6 +2385,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
+      "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -3930,6 +3941,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide": {
+      "version": "0.323.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.323.0.tgz",
+      "integrity": "sha512-7LBupKOYKOIKvJ1vCAzwuDY4IVM57Z+KEQqeeXmIAQxUV33N76uI+ctITd8gnA1RMyUWpL1FmdoMpXf+seeGBA=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

package.json

@@ -25,6 +25,8 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
+    "date-fns": "^3.3.1",
+    "lucide": "^0.323.0",
     "tailwindcss": "^3.4.1"
   }
 }

src/elements/task.js

@@ -1,9 +1,69 @@
 import generateElement from "../modules/genElement";
+import { createElement as createIcon, Trash, Pencil, Star, AlarmClock } from 'lucide';
+import { format, isPast } from 'date-fns';
+import { idValue } from "../modules/refreshDOM";
 
-const task = generateElement({
+function generateTask(title, description, dueDate, priority, done) {
+    const task = generateElement({
         element: "div",
-    className: "task text-4xl",
+        className: "task flex gap-2 justify-between",
-    innerHTML: "task",
+    })
-})
 
-export default task;
+    const doneElement = generateElement({
+        element: "input",
+        type: "checkbox",
+        className: "done block",
+        checked: done,
+    })
+    const priorityCheckbox = generateElement({
+        element: "input",
+        type: "checkbox",
+        className: `priority peer/priority hidden`,
+        id: `priority-${idValue.val}`,
+    })
+    const priorityElement = generateElement({
+        element: "label",
+        "_for": `priority-${idValue.val}`,
+        className: `priority peer-checked/priority:bg-yellow-500 block cursor-pointer"`,
+    })
+    priorityElement.append(createIcon(Star));
+    const titleElement = generateElement({
+        element: "div",
+        className: "title block",
+        innerHTML: `${title}`,
+    })
+    const descriptionElement = generateElement({
+        element: "div",
+        className: "description block flex-1",
+        innerHTML: `${description}`,
+    })
+    function bodge() {
+        let icon = createIcon(AlarmClock); icon.classList.add("inline-block"); return icon.outerHTML;
+    }
+    const dueDateElement = generateElement({
+        element: "div",
+        className: `due-date block${isPast(dueDate) ? ` text-red-300` : ""}`,
+        innerHTML: `${dueDate ? `${bodge()}` + format(dueDate, "dd.MM.yyyy hh:mm") : ""}`,
+    })
+    const changeDetailsButton = generateElement({
+        element: "button",
+        className: "change-details block",
+    })
+    changeDetailsButton.append(createIcon(Pencil));
+    const removeButton = generateElement({
+        element: "button",
+        className: "remove block",
+    })
+    removeButton.append(createIcon(Trash));
+
+    task.append(
+        doneElement, priorityCheckbox, priorityElement,
+        titleElement, descriptionElement, dueDateElement,
+        changeDetailsButton, removeButton
+    );
+    idValue.val += 1;
+    return task;
+
+}
+
+export default generateTask;

src/main.js

@@ -6,20 +6,16 @@ import projects from "./projects";
 import './style.css';
 
 const app = document.querySelector("#app")
-// app.innerHTML = "Hello world";
 
 function firstLaunch() {
   const defaultProject = new Project("New project");
   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);
   projects.push(defaultProject);
-  // console.log(projects);
 }
 
 document.addEventListener("DOMContentLoaded", firstLaunch);
 
 pubsub.subscribe("refreshDOM", refreshDOM);
-
-import task from "./elements/task";
-app.append(task);

src/modules/genElement.js

@@ -4,8 +4,15 @@ export default function generateElement(obj) {
     } else {
         const element = document.createElement(`${obj.element}`);
         for (let key in obj) {
+            if (key[0] == "_") {
+                element.setAttribute(`${Array.from(key).splice(1, key.length).join("")}`, obj[key]);
+                // element[`${Array.from(key).splice(1, key.length).join("")}`] = obj[key];
+                // console.log(Array.from(key).splice(1, key.length).join(""));
+                // console.log(element[Array.from(key).splice(1, key.length).join("")]);
+            } else {
                 element[key] = obj[key];
             }
+        }
         return element;
     }
 }

src/modules/refreshDOM.js

@@ -1,37 +1,33 @@
 import projects from "../projects";
 
 export default function refreshDOM() {
-  // projects.forEach(project => {
+  const projectsDiv = document.querySelector("#projects-div #list");
-  //   document.querySelector("#app").innerHTML += `
+  const tasksDiv = document.querySelector("#tasks-div #list");
-  //   name: ${project.name},
-  //   <br>
-  //   todos:
-  //   <br>
-  //   `;
-  //   project.todos.forEach(task => {
-  //     for (let key in task) {
-  //       document.querySelector("#app").innerHTML += `
-  //       ${key}: ${task[key]}
-  //       <br>
-  //       `;
-  //     }
-  //   });
-  // })
 
-  document.querySelector("#projects-div #list").innerHTML = ``;
+  [projectsDiv, tasksDiv].forEach(div => {
-  document.querySelector("#tasks-div #list").innerHTML = ``;
+    while (div.lastChild) {
+      div.lastChild.remove();
+    }
+  })
   
-  document.querySelector("#projects-div #list").innerHTML += `
+  projectsDiv.innerHTML += `
     name: ${projects[0].name},
     <br>`;
 
+  
   projects[0].todos.forEach(task => {
-    for (let key in task) {
+    tasksDiv.append(task.element);
-      document.querySelector("#tasks-div #list").innerHTML += `
-      ${key}: ${task[key]}
-      <br>
-      `;
-    }
   });
-  console.log(projects);
 }
+
+let idValue = {
+  value: 0,
+  get val() {
+    return this.value;
+  },
+  set val(value) {
+    this.value = value;
+  }
+}
+
+export { idValue };

src/modules/task.js

@@ -1,4 +1,5 @@
 import pubsub from "./pubsub";
+import generateTask from "../elements/task";
 
 export default class Task {
   constructor(title, description, dueDate, priority, done) {
@@ -7,6 +8,7 @@ export default class Task {
     this.dueDate = dueDate;
     this.priority = priority;
     this.done = done;
+    this.element = generateTask(title, description, dueDate, priority, done);
     pubsub.publish("refreshDOM");
   }
   remove() {
@@ -18,6 +20,7 @@ export default class Task {
     this.dueDate = dueDate;
     this.priority = priority;
     this.done = done;
+    this.element = generateTask(title, description, dueDate, priority, done);
     pubsub.publish("refreshDOM");
   }
   toggleDone() {

src/template.html

@@ -10,12 +10,12 @@
         <button type="button" class="bg-green-600">add task</button>
     </div> -->
     <div id="app">
-        <header class="w-11/12 border border-t-0 border-white text-center m-auto mb-4 rounded-b-lg p-4 bg-neutral-950 text-2xl">Tasks</header>
+        <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] 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">
-            <div id="projects-div" class="bg-slate-800 rounded-md p-4 border border-green-200">
+            <div id="projects-div" class="bg-slate-800 md:rounded-md p-4 border border-green-200">
                 <div id="list"></div>
             </div>
-            <div id="tasks-div" class="bg-slate-700 rounded-md p-4 border border-green-100">
+            <div id="tasks-div" class="bg-slate-700 md:rounded-md p-4 border border-green-100">
                 <div id="list"></div>
             </div>
         </div>

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/*.html"],
+  content: [
+    "./src/**/*.{html,js}"
+  ],
   theme: {
     extend: {
       gridTemplateColumns: {