more code

inventory/public/css/style.css

@@ -79,6 +79,79 @@ ul {
   margin: 0 auto;
 }
 
+td {
+  text-align: center;
+}
+
+th,
+td {
+  border-bottom: 1px solid #ddd;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+thead {
+  text-transform: uppercase;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+  font-size: 1.5rem;
+}
+
+.container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0.25em 1em;
+}
+
 .flex {
   display: flex;
 }
+
+.btn {
+  padding: 0.5em 1em;
+  margin: 1em;
+}
+
+.container.flex {
+  width: 100%;
+}
+
+.container.flex p {
+  align-self: center;
+}
+
+.container.flex p,
+.container.flex button {
+  flex: 1;
+}
+
+.items-table {
+  width: 80%;
+  border-collapse: collapse;
+}
+
+.form-item {
+  display: flex;
+}
+
+.form-item.btn-row {
+  justify-content: center;
+  width: 100%;
+}
+
+.btn-row button {
+  flex: 1;
+}
+
+.add-form {
+  display: none;
+}

inventory/public/js/components/addForm.js

@@ -0,0 +1,14 @@
+function addForm() {
+  let buttonClicked = true;
+  const addForm = document.querySelector(".add-form");
+  const button = document.querySelector(".add-btn");
+
+  button.addEventListener("click", () => {
+    buttonClicked
+      ? (addForm.style.display = " block")
+      : (addForm.style.display = "none");
+    buttonClicked = !buttonClicked;
+  });
+}
+
+export { addForm };

inventory/public/js/script.js

@@ -1,8 +1,7 @@
 import { modal } from "./components/modal.js";
+import { addForm } from "./components/addForm.js";
 
 const newItemLink = document.querySelector("a[href='/add']");
-//
-//if (newItemLink && window.location !== "/item/") {
 const modalElement = await modal();
 let modalToggle = false;
 async function handleDelete(e) {
@@ -25,7 +24,7 @@ document.querySelectorAll(".delete-button").forEach((button) =>
 
 document.querySelectorAll(".edit-button").forEach((button) => {
   button.addEventListener("click", async (e) => {
-    const itemId = e.target.parentNode.dataset.itemId;
+    const itemId = e.target.parentNode.parentNode.dataset.itemId;
 
     window.location.href = `/item/${itemId}`;
   });
@@ -37,7 +36,8 @@ document.querySelectorAll(".delete-btn").forEach((button) => {
     const data = new URLSearchParams(new FormData());
     data.append("id", itemId);
 
-    const res = await fetch("/category", {
+    const path = window.location.pathname;
+    const res = await fetch(`${path}`, {
       method: "DELETE",
       body: data,
     });
@@ -46,7 +46,7 @@ document.querySelectorAll(".delete-btn").forEach((button) => {
     if (message.includes("error")) {
       alert("unable to delete as item is using category");
     } else {
-      window.location.href = "/category";
+      window.location.href = `${path}`;
     }
   });
 });
@@ -60,4 +60,4 @@ newItemLink.addEventListener("click", (e) => {
 });
 
 document.body.append(modalElement);
-//}
+addForm();