call it done

inventory/public/css/style.css

@@ -15,7 +15,8 @@ body {
   line-height: 1.5;
   /* 4. Improve text rendering */
   -webkit-font-smoothing: antialiased;
-  font-size: 18px;
+  font-size: 14px;
+  font-family: "Inter", serif;
 }
 
 /* 5. Improve media defaults */
@@ -87,6 +88,103 @@ li {
   list-style-type: none;
 }
 
+ul {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0;
+  padding: 0;
+}
+
+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;
+  margin-top: 5em;
+}
+
+nav {
+  font-size: 1.5rem;
+  margin: 1em 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.container {
+  width: 100%;
+  margin: 0.25em 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.btn {
+  padding: 0.5em 1em;
+  /*width: 100%;*/
+}
+
+.container.flex {
+  width: 100%;
+}
+
+.container.flex p {
+  align-self: center;
+}
+
+.container.flex p,
+.container.flex button {
+  flex: 1;
+}
+
+.items-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  margin: 0.7em 0;
+  width: 100%;
+}
+
+.form-item.btn-row {
+  justify-content: center;
+  width: 100%;
+}
+
+.btn-row button {
+  flex: 1;
+}
+
+.add-form {
+  display: none;
+}
+
+@media only screen and (min-width: 778px) {
+  body {
+    font-size: 18px;
+  }
   ul {
     display: flex;
     justify-content: space-around;
@@ -115,10 +213,12 @@ main {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 5em;
   }
 
   nav {
     font-size: 1.5rem;
+    margin: 1em 0;
   }
 
   a {
@@ -128,7 +228,7 @@ a {
   .container {
     width: 100%;
     max-width: 800px;
-  margin: 0.25em 1em;
+    margin: 0.25em 0;
   }
 
   .flex {
@@ -162,6 +262,8 @@ a {
   .form-item {
     display: flex;
     flex-direction: column;
+    margin: 0.7em 0;
+    width: 100%;
   }
 
   .form-item.btn-row {
@@ -176,3 +278,4 @@ a {
   .add-form {
     display: none;
   }
+}

inventory/public/js/script.js

@@ -66,5 +66,19 @@ modalElement.addEventListener("click", (e) => {
   modalToggle = !modalToggle;
 });
 
+const itemTitles = document.querySelectorAll("p.title");
+const editItemBtn = document.querySelectorAll(".edit-btn");
+editItemBtn.forEach((btn) => {
+  btn.addEventListener("click", (e) => {
+    const parent = e.target.parentElement;
+    const itemId = e.target.nextElementSibling.dataset.id;
+    const p = e.target.previousElementSibling;
+    // temp hide
+    p.remove();
+    const input = document.createElement("input");
+    parent.insertBefore(input, e.target);
+  });
+});
+
 document.body.append(modalElement);
 addForm();

inventory/src/controllers/indexController.js

@@ -143,7 +143,7 @@ async function itemEditPost(req, res, next) {
 async function itemDelete(req, res) {
   const itemId = await db.getItemByName(req.body.name);
   if (itemId) db.deleteItem(itemId);
-  console.log(`Delted item: ${itemId}`);
+  console.log(`Delted item: ${JSON.stringify(itemId)}`);
   res.redirect("deleted item: ${item}");
 }
 

inventory/src/views/addForm.ejs

@@ -3,9 +3,7 @@
 <div class="container">
 <%- include("card", {items: data}) %>
 <button class="btn add-btn">New <%= type %></button>
-</div>
 <form method="POST" action="/<%= type %>" class="add-form">
-	<div class="container">
 	<div class="form-item">
 		<label for="name">Name</label>
 		<input type="text" name="name" placeholder="" required>
@@ -14,7 +12,6 @@
 		<button type="submit">Submit</button>
 		<button type="button">Cancel</button>
 	</div>
+</form>
 </div>
 
-</form>
-

inventory/src/views/card.ejs

@@ -3,10 +3,10 @@
 	<p class="title">
 		<%= item.name %>
 	</p>
-		<button>Edit</button>
 		<% let itemId; %>
 		<% if (item.category_id) {itemId = item.category_id} else { itemId = item.store_id } %>
-		<button class="delete-btn" data-id="<%= itemId %>">Delete</button>
+		<button class="edit-btn btn">Edit</button>
+		<button class="delete-btn btn" data-id="<%= itemId %>">Delete</button>
 
 	</div>
 	<% }); %>

inventory/src/views/header.ejs

@@ -2,8 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title><%= pageTitle %></title>
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 		<link href="/css/style.css" rel="stylesheet">
 	</head>
 	<body>