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

Little changes, grid, adding "template" elements

This commit is contained in:
NetMan 2024-02-07 17:38:08 +01:00
parent 60d29ceb12
commit 05e20d25d2
6 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/elements/project.js Normal file
View File

9
src/elements/task.js Normal file
View File

@ -0,0 +1,9 @@
import generateElement from "../modules/genElement";
const task = generateElement({
element: "div",
className: "task text-4xl",
innerHTML: "task",
})
export default task;

3
src/main.js
View File

@ -20,3 +20,6 @@ function firstLaunch() {
document.addEventListener("DOMContentLoaded", firstLaunch); document.addEventListener("DOMContentLoaded", firstLaunch);
pubsub.subscribe("refreshDOM", refreshDOM); pubsub.subscribe("refreshDOM", refreshDOM);
import task from "./elements/task";
app.append(task);

11
src/modules/genElement.js Normal file
View File

@ -0,0 +1,11 @@
export default function generateElement(obj) {
if (!obj.element) {
throw new Error("No element argument provided");
} else {
const element = document.createElement(`${obj.element}`);
for (let key in obj) {
element[key] = obj[key];
}
return element;
}
}

10
src/template.html
View File

@ -5,17 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title> <title>Tasks</title>
</head> </head>
<body class="bg-neutral-950 text-slate-50"> <body class="bg-neutral-800 text-slate-50">
<!-- <div id="btns"> <!-- <div id="btns">
<button type="button" class="bg-green-600">add task</button> <button type="button" class="bg-green-600">add task</button>
</div> --> </div> -->
<div id="app"> <div id="app">
<header class="w-11/12 border border-t-0 border-white text-center m-auto rounded-b-lg p-2">Tasks</header> <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="flex w-11/12 m-auto"> <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-green-600 flex-1"> <div id="projects-div" class="bg-slate-800 rounded-md p-4 border border-green-200">
<div id="list"></div> <div id="list"></div>
</div> </div>
<div id="tasks-div" class="bg-green-400 flex-1 text-black"> <div id="tasks-div" class="bg-slate-700 rounded-md p-4 border border-green-100">
<div id="list"></div> <div id="list"></div>
</div> </div>
</div> </div>

6
tailwind.config.js
View File

@ -2,7 +2,11 @@
module.exports = { module.exports = {
content: ["./src/*.html"], content: ["./src/*.html"],
theme: { theme: {
extend: {}, extend: {
gridTemplateColumns: {
'lists': 'minmax(1fr, 400px)) 1fr',
}
},
}, },
plugins: [], plugins: [],
} }