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 */
@@ -89,9 +90,9 @@ li {
 
 ul {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
-  max-width: 50vw;
+  margin: 0;
-  margin: 0 auto;
+  padding: 0;
 }
 
 td {
@@ -115,10 +116,12 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-top: 5em;
 }
 
 nav {
   font-size: 1.5rem;
+  margin: 1em 0;
 }
 
 a {
@@ -127,8 +130,7 @@ a {
 
 .container {
   width: 100%;
-  max-width: 800px;
+  margin: 0.25em 0;
-  margin: 0.25em 1em;
 }
 
 .flex {
@@ -137,7 +139,7 @@ a {
 
 .btn {
   padding: 0.5em 1em;
-  width: 100%;
+  /*width: 100%;*/
 }
 
 .container.flex {
@@ -154,7 +156,7 @@ a {
 }
 
 .items-table {
-  width: 80%;
+  width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
@@ -162,6 +164,8 @@ a {
 .form-item {
   display: flex;
   flex-direction: column;
+  margin: 0.7em 0;
+  width: 100%;
 }
 
 .form-item.btn-row {
@@ -176,3 +180,102 @@ a {
 .add-form {
   display: none;
 }
+
+@media only screen and (min-width: 778px) {
+  body {
+    font-size: 18px;
+  }
+  ul {
+    display: flex;
+    justify-content: space-around;
+    max-width: 50vw;
+    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;
+    margin-top: 5em;
+  }
+
+  nav {
+    font-size: 1.5rem;
+    margin: 1em 0;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .container {
+    width: 100%;
+    max-width: 800px;
+    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: 80%;
+    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;
+  }
+}

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,18 +3,15 @@
 <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">
-		<div class="form-item">
+		<label for="name">Name</label>
-			<label for="name">Name</label>
+		<input type="text" name="name" placeholder="" required>
-			<input type="text" name="name" placeholder="" required>
+	</div>
-		</div>
+	<div class="form-item btn-row">
-		<div class="form-item btn-row">
+		<button type="submit">Submit</button>
-			<button type="submit">Submit</button>
+		<button type="button">Cancel</button>
-			<button type="button">Cancel</button>
-		</div>
 	</div>
-	
 </form>
+</div>
 

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>