Merge pull request #1 from nklmkln/item_tag_support

Item tag support
nklmkln · Jul 21, 2024 · b6005d2 · b6005d2
2 parents b65a419 + e75c9f6
commit b6005d2
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/css/list.css b/css/list.css
@@ -27,8 +27,8 @@
     margin-top: var(--space-md);
 
     font-size: small;
-    font-weight: 600;
     color: var(--text-secondary);
+    font-weight: 500;
 
     border-top: var(--border) var(--border-width) solid;
 }
@@ -79,7 +79,7 @@
     width: 100%;
 }
 
-.itemTime {
+.itemData {
     font-size: small;
     color: var(--text-secondary);
 }

diff --git a/css/newItem.css b/css/newItem.css
@@ -5,30 +5,54 @@
     width: 40%;
     height: 100%;
     max-height: 100svh;
+    padding: var(--space-md);
 
     outline: var(--border-width) var(--border) solid;
 }
 
+#tagWrapper {
+    display: flex;
+    flex-direction: row;
+
+    height: 1.25rem;
+
+    font-size: small;
+    line-height: var(--line-height-base);
+    color: var(--text-secondary);
+}
+
+#newItemTag {
+    font-size: small;
+    color: var(--text-secondary);
+    line-height: var(--line-height-base);
+    text-transform: uppercase;
+    width: 11rem;
+
+    padding: 0 0 0 4px;
+    background-color: var(--background);
+    border: none;
+}
+
 #newItemText {
     flex: 1;
 
-    padding: var(--space-lg) var(--space-xl) 0 var(--space-lg);
     font-size: x-large;
     line-height: var(--line-height-base);
     resize: none;
-
     color: var(--text-primary);
 
+    padding: var(--space-xs) var(--space-lg) 0 0;
     background-color: var(--main);
     border: none;
 }
 
-#newItemText:focus {
+#newItemText:focus, #newItemTag:focus {
     outline: none;
 }
 
-#newItemText::placeholder {
+#newItemText::placeholder, #newItemTag::placeholder {
     color: var(--text-secondary);
+    opacity: 0.5;
 }
 
 .newItemControls {
@@ -37,7 +61,7 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: var(--space-md);
+    padding-top: var(--space-md);
 }
 
 .sentimentSelect {

diff --git a/db.js b/db.js
@@ -25,14 +25,19 @@ dbReq.onerror = function (event) {
   alert("error opening database " + event.target.errorCode);
 };
 
-function addItem(db, itemText, category) {
+function addItem(db, itemText, sentiment, itemTag) {
   let tx = db.transaction(["sentiments"], "readwrite");
   let store = tx.objectStore("sentiments");
-  let item = { text: itemText, type: category, timestamp: Date.now() };
+  let item = {
+    text: itemText,
+    type: sentiment,
+    tag: itemTag,
+    timestamp: Date.now(),
+  };
   store.add(item);
 
   tx.oncomplete = function (event) {
-    item.key = event.target.result; // Store the generated key
+    item.key = event.target.result;
     getAndDisplayItems(db);
   };
   tx.onerror = function (event) {
@@ -45,12 +50,14 @@ document.addEventListener("DOMContentLoaded", function () {
     .getElementById("newItem")
     .addEventListener("submit", function (event) {
       event.preventDefault();
+      let itemTag = document.getElementById("newItemTag").value.toUpperCase();
       let itemText = document.getElementById("newItemText").value;
       let sentiment = document.querySelector(
         `input[name="sentiment"]:checked`
       ).value;
 
-      addItem(db, itemText, sentiment);
+      addItem(db, itemText, sentiment, itemTag);
+      document.getElementById("newItemTag").value = "";
       document.getElementById("newItemText").value = "";
       document.querySelector(`input[name="sentiment"]:checked`).checked = false;
     });
@@ -103,13 +110,16 @@ function displayItems(items) {
       minute: "2-digit",
     });
 
+    const itemTag = item.tag == "" ? "" : ` → ${item.tag}`;
+
     itemsList +=
       "<div class='item'><img class='itemSentiment' src='./assets/" +
       item.type +
       ".png' alt='" +
       item.type +
-      "' /><div class='itemContent'><div class='itemHeader'><div class='itemTime'>" +
+      "' /><div class='itemContent'><div class='itemHeader'><div class='itemData'>" +
       timeString +
+      itemTag +
       "</div><div class='itemDelete' onClick='deleteItem(" +
       item.key +
       ")'>Delete</div></div><div class='itemText'>" +

diff --git a/index.html b/index.html
@@ -39,6 +39,11 @@
 <body>
   <div class="app">
     <form id="newItem">
+      <div id="tagWrapper">
+        →
+        <input id="newItemTag" type="text" placeholder="add tag" autocomplete="on" name="tag" maxlength="20" />
+      </div>
+
       <textarea id="newItemText" autofocus="true" placeholder="What's on your mind?"></textarea>
 
       <div class="newItemControls">