Added basic display of default project and tasks

README.md

@@ -0,0 +1,13 @@
+# odin-todo
+
+Project using npm, webpack, tailwindcss
+
+## setup
+
+cd into this dir
+
+to install all required dependencies - first run: `npm i`
+
+to build for production @ /dist: `npm run build`
+
+to launch dev server: `npm run dev`

package.json

@@ -16,10 +16,15 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
     "image-minimizer-webpack-plugin": "^4.0.0",
+    "postcss-loader": "^8.1.0",
+    "postcss-preset-env": "^9.3.0",
     "style-loader": "^3.3.4",
     "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.10.0"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+  plugins: [
+    'postcss-preset-env',
+    tailwindcss
+  ],
+};

src/main.js

@@ -1,2 +1,22 @@
+import Project from "./modules/project";
+import Task from "./modules/task";
+import pubsub from "./modules/pubsub";
+import refreshDOM from "./modules/refreshDOM";
+import projects from "./projects";
+import './style.css';
+
 const app = document.querySelector("#app")
-app.innerHTML = "Hello world";
+// 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));
+  projects.push(defaultProject);
+  // console.log(projects);
+}
+
+document.addEventListener("DOMContentLoaded", firstLaunch);
+
+pubsub.subscribe("refreshDOM", refreshDOM);

src/modules/project.js

@@ -0,0 +1,16 @@
+import pubsub from "./pubsub";
+
+export default class Project {
+  constructor(name) {
+    this.name = name;
+    this.todos = [];
+    pubsub.publish("refreshDOM");
+  }
+  remove() {
+
+  }
+  changeDetails(name) {
+    this.name = name;
+    pubsub.publish("refreshDOM");
+  }
+}

src/modules/pubsub.js

@@ -0,0 +1,48 @@
+// PubSub from: https://gist.github.com/fatihacet/1290216
+var pubsub = {};
+(function(q) {
+    var topics = {}, subUid = -1;
+    q.subscribe = function(topic, func) {
+        if (!topics[topic]) {
+            topics[topic] = [];
+        }
+        var token = (++subUid).toString();
+        topics[topic].push({
+            token: token,
+            func: func
+        });
+        return token;
+    };
+
+    q.publish = function(topic, args) {
+        if (!topics[topic]) {
+            return false;
+        }
+        setTimeout(function() {
+            var subscribers = topics[topic],
+                len = subscribers ? subscribers.length : 0;
+
+            while (len--) {
+                subscribers[len].func(topic, args);
+            }
+        }, 0);
+        return true;
+
+    };
+
+    q.unsubscribe = function(token) {
+        for (var m in topics) {
+            if (topics[m]) {
+                for (var i = 0, j = topics[m].length; i < j; i++) {
+                    if (topics[m][i].token === token) {
+                        topics[m].splice(i, 1);
+                        return token;
+                    }
+                }
+            }
+        }
+        return false;
+    };
+}(pubsub));
+
+export default pubsub;

src/modules/refreshDOM.js

@@ -0,0 +1,37 @@
+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>
+  //       `;
+  //     }
+  //   });
+  // })
+
+  document.querySelector("#projects-div #list").innerHTML = ``;
+  document.querySelector("#tasks-div #list").innerHTML = ``;
+
+  document.querySelector("#projects-div #list").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>
+      `;
+    }
+  });
+  console.log(projects);
+}

src/modules/task.js

@@ -0,0 +1,31 @@
+import pubsub from "./pubsub";
+
+export default class Task {
+  constructor(title, description, dueDate, priority, done) {
+    this.title = title;
+    this.description = description;
+    this.dueDate = dueDate;
+    this.priority = priority;
+    this.done = done;
+    pubsub.publish("refreshDOM");
+  }
+  remove() {
+
+  }
+  changeDetails(title, description, dueDate, priority, done) {
+    this.title = title;
+    this.description = description;
+    this.dueDate = dueDate;
+    this.priority = priority;
+    this.done = done;
+    pubsub.publish("refreshDOM");
+  }
+  toggleDone() {
+    this.done = !this.done;
+    pubsub.publish("refreshDOM");
+  }
+  togglePriority() {
+    this.priority = !this.priority;
+    pubsub.publish("refreshDOM");
+  }
+}

src/projects.js

@@ -0,0 +1,2 @@
+let projects = [];
+export default projects;

src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/template.html

@@ -3,9 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>To-Do</title>
+    <title>Tasks</title>
 </head>
-<body>
+<body class="bg-neutral-950 text-slate-50">
-    <div id="app"></div>
+    <!-- <div id="btns">
+        <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 rounded-b-lg p-2">Tasks</header>
+        <div id="contain" class="flex w-11/12 m-auto">
+            <div id="projects-div" class="bg-green-600 flex-1">
+                <div id="list"></div>
+            </div>
+            <div id="tasks-div" class="bg-green-400 flex-1 text-black">
+                <div id="list"></div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>

tailwind.config.js

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

webpack.common.js

@@ -13,7 +13,7 @@ module.exports = {
         rules: [
             {
                 test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
+                use: ['style-loader', 'css-loader', 'postcss-loader'],
             },
             {
                 test: /\.(png|gif|jpe?g|webp|svg)$/i,