Add new items as tr to table

dist/index.html

@@ -10,9 +10,23 @@
     <aside>
       Projects
     </aside>
-    <main class="content">
+    <main>
       <input type="text" name="todoInputField" id="todoInputField">
       <button>+</button>
+      <div class="content">
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Due date</th>
+              <th>Prio</th>
+            </tr>
+          </thead>
+          <tbody>
+
+          </tbody>
+        </table>
+      </div>
     </main>
     <footer>Made by Benjamin-Re</footer>
   </body>

package.json

@@ -12,6 +12,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "css-loader": "^6.7.1",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",

src/create.js

@@ -0,0 +1,46 @@
+import Todo from "./todo.js";
+
+const createTodo = () => {
+    // Get the basic elements on the page - the add button, the content container and the input field
+    const addButton = document.querySelector("main > button");
+    const tableBody = document.querySelector("tbody");
+    const inputField = document.querySelector("#todoInputField");
+
+    // Add new row to content table
+    addButton.addEventListener("click", (e) => {
+        const newTodo = new Todo(inputField.value);
+        // Look for the last rows id and increment it for the next one, or if none exists, then it should return undefined = falsy and therefore assign 0
+        let id = parseInt (
+                document.querySelector("tbody")?.lastElementChild?.getAttribute("id")
+            ) + 1 || 0;
+        const newItem = generateRow(id, newTodo.getTitle());
+        tableBody.appendChild(newItem);
+    });
+}
+
+//function to create new row
+const generateRow = (id, text) => {
+let newRow = document.createElement("tr");
+newRow.setAttribute("id", id);
+newRow.innerHTML = `
+        <td>
+            <i class="fa-solid fa-circle-check"></i>
+            <span contenteditable="true" class="task">${text}</span>
+        </td>
+        <td>
+            <span class="fa-stack fa-2x">
+                <i class="fa-solid fa-square fa-stack-2x"></i>
+                <i class="fa-solid fa-pen fa-stack-1x fa-inverse"></i>
+            </span>
+        </td>
+        <td>
+        <span class="fa-stack fa-2x">
+            <i class="fa-solid fa-square fa-stack-2x"></i>
+            <i class="fa-solid fa-trash fa-stack-1x fa-inverse"></i>
+        </span>
+        </td>
+        `;
+    return newRow;
+};
+
+export {createTodo};

src/index.html

@@ -10,9 +10,23 @@
     <aside>
       Projects
     </aside>
-    <main class="content">
+    <main>
       <input type="text" name="todoInputField" id="todoInputField">
       <button>+</button>
+      <div class="content">
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Due date</th>
+              <th>Prio</th>
+            </tr>
+          </thead>
+          <tbody>
+
+          </tbody>
+        </table>
+      </div>
     </main>
     <footer>Made by Benjamin-Re</footer>
   </body>

src/index.js

@@ -1,27 +1,42 @@
-import Todo from "./todo.js";
+import {createTodo} from "./create.js";
 // import {} from "./project";
-import css from './style.css';
+import css from "./style.css";
+import '@fortawesome/fontawesome-free/js/fontawesome'
+import '@fortawesome/fontawesome-free/js/solid'
 
 
-// Create Todo module
-
-
-const addButton = document.querySelector(".content > button");
-const contentContainer = document.querySelector(".content");
-const inputField = document.querySelector("#todoInputField");
-
-addButton.addEventListener("click", (e) => {
-    const newTodo = new Todo(inputField.value);
-    const newItem = document.createElement("div");
-    newItem.textContent = newTodo.title;
-    contentContainer.appendChild(newItem);
+window.addEventListener("load", () => {
+    createTodo();
 });
 
 
 
 
-// Set todo status to complete module
+// // Set todo status to complete module
+// // Get all check icons and add event listeners to them
+// let done = document.querySelectorAll(".fa-circle-check");
+// done.forEach((item) => {
+//   item.addEventListener("click", (event) => {
+//     completeTask(event);
+//   });
+// });
+
+// // Mark task complete
+// const completeTask = (event) => {
+//   let task = event.target.nextElementSibling;
+//   let text = task.innerHTML;
+//   if (text.includes("<del>")) {
+//     task.parentNode.parentNode.setAttribute("data-complete", "false");
+//     text = task.firstElementChild.textContent;
+//     task.innerHTML = text;
+//   } else {
+//     task.innerHTML = `<del>${text}</del>`;
+//     task.parentNode.parentNode.setAttribute("data-complete", "true");
+//   }
+// };
 
 // Changing todo priority module
 
-// Dom manipulation module
+// Dom manipulation module
+
+// Popup form https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup_form

webpack.config.js

@@ -8,7 +8,6 @@ module.exports = {
       },
     ],
   },
-
   mode: "development",
   devServer: {
     static: "./dist",