tod
/
odin-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Icons, little CSS tweaks, changed DOM/genElement functions

This commit is contained in:
NetMan 2024-02-08 01:17:43 +01:00
parent 05e20d25d2
commit 45e4a28cc1
10 changed files with 129 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

16
package-lock.json generated
View File

@ -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",

2
package.json
View File

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

70
src/elements/task.js
View File

@ -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",
innerHTML: "task",
})
className: "task flex gap-2 justify-between",
})
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;

6
src/main.js
View File

@ -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);

7
src/modules/genElement.js
View File

@ -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;
}
}

48
src/modules/refreshDOM.js
View File

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

3
src/modules/task.js
View File

@ -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() {

8
src/template.html
View File

@ -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>
<div id="contain" class="grid md:grid-cols-[minmax(200px,_300px)_1fr] w-11/12 m-auto gap-4">
<div id="projects-div" class="bg-slate-800 rounded-md p-4 border border-green-200">
<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="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>

4
tailwind.config.js
View File

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