From 45e4a28cc1f1b4f29106d3aa9247cc9353d149c9 Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Thu, 8 Feb 2024 01:17:43 +0100 Subject: [PATCH] Icons, little CSS tweaks, changed DOM/genElement functions --- README.md | 2 +- package-lock.json | 16 +++++++++ package.json | 2 ++ src/elements/task.js | 72 +++++++++++++++++++++++++++++++++++---- src/main.js | 8 ++--- src/modules/genElement.js | 9 ++++- src/modules/refreshDOM.js | 52 +++++++++++++--------------- src/modules/task.js | 3 ++ src/template.html | 8 ++--- tailwind.config.js | 4 ++- 10 files changed, 129 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 0a7ebd7..b657d1c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # odin-todo -Project using npm, webpack, tailwindcss +Project using npm, webpack, tailwindcss, lucide (icons) ## setup diff --git a/package-lock.json b/package-lock.json index 6ba5935..707ed81 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 7d613fc..9735397 100644 --- a/package.json +++ b/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" } } diff --git a/src/elements/task.js b/src/elements/task.js index 4eb3dda..6402911 100644 --- a/src/elements/task.js +++ b/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({ - element: "div", - className: "task text-4xl", - innerHTML: "task", -}) +function generateTask(title, description, dueDate, priority, done) { + const task = generateElement({ + element: "div", + className: "task flex gap-2 justify-between", + }) -export default task; \ No newline at end of file + 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; \ No newline at end of file diff --git a/src/main.js b/src/main.js index b267151..fccfc5a 100644 --- a/src/main.js +++ b/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); \ No newline at end of file +pubsub.subscribe("refreshDOM", refreshDOM); \ No newline at end of file diff --git a/src/modules/genElement.js b/src/modules/genElement.js index f8bdbe0..436715f 100644 --- a/src/modules/genElement.js +++ b/src/modules/genElement.js @@ -4,7 +4,14 @@ export default function generateElement(obj) { } else { const element = document.createElement(`${obj.element}`); for (let key in obj) { - element[key] = obj[key]; + 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; } diff --git a/src/modules/refreshDOM.js b/src/modules/refreshDOM.js index d5e392c..4593340 100644 --- a/src/modules/refreshDOM.js +++ b/src/modules/refreshDOM.js @@ -1,37 +1,33 @@ import projects from "../projects"; export default function refreshDOM() { - // projects.forEach(project => { - // document.querySelector("#app").innerHTML += ` - // name: ${project.name}, - //
- // todos: - //
- // `; - // project.todos.forEach(task => { - // for (let key in task) { - // document.querySelector("#app").innerHTML += ` - // ${key}: ${task[key]} - //
- // `; - // } - // }); - // }) + const projectsDiv = document.querySelector("#projects-div #list"); + const tasksDiv = document.querySelector("#tasks-div #list"); - document.querySelector("#projects-div #list").innerHTML = ``; - document.querySelector("#tasks-div #list").innerHTML = ``; - - document.querySelector("#projects-div #list").innerHTML += ` + [projectsDiv, tasksDiv].forEach(div => { + while (div.lastChild) { + div.lastChild.remove(); + } + }) + + projectsDiv.innerHTML += ` name: ${projects[0].name},
`; + projects[0].todos.forEach(task => { - for (let key in task) { - document.querySelector("#tasks-div #list").innerHTML += ` - ${key}: ${task[key]} -
- `; - } + tasksDiv.append(task.element); }); - console.log(projects); -} \ No newline at end of file +} + +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 d1f3f36..bac95d1 100644 --- a/src/modules/task.js +++ b/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() { diff --git a/src/template.html b/src/template.html index 90230bb..d9530e9 100644 --- a/src/template.html +++ b/src/template.html @@ -10,12 +10,12 @@ -->
-
Tasks
-
-
+
Tasks
+
+
-
+
diff --git a/tailwind.config.js b/tailwind.config.js index df31b63..963613a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,8 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/*.html"], + content: [ + "./src/**/*.{html,js}" + ], theme: { extend: { gridTemplateColumns: {