From 4c56f6e1611524b47e93048fe87180fa50aff0ef Mon Sep 17 00:00:00 2001 From: Nico Date: Sun, 21 Jul 2024 16:49:47 +0200 Subject: [PATCH 1/2] add tag input --- css/list.css | 1 - css/newItem.css | 20 +++++++++++++++----- db.js | 15 +++++++++++---- index.html | 2 ++ 4 files changed, 28 insertions(+), 10 deletions(-) diff --git a/css/list.css b/css/list.css index 64f8951..e80d74d 100644 --- a/css/list.css +++ b/css/list.css @@ -27,7 +27,6 @@ margin-top: var(--space-md); font-size: small; - font-weight: 600; color: var(--text-secondary); border-top: var(--border) var(--border-width) solid; diff --git a/css/newItem.css b/css/newItem.css index e491945..895e5cb 100644 --- a/css/newItem.css +++ b/css/newItem.css @@ -5,29 +5,39 @@ width: 40%; height: 100%; max-height: 100svh; + padding: var(--space-md); outline: var(--border-width) var(--border) solid; } +#newItemTag { + font-size: small; + color: var(--text-primary); + line-height: var(--line-height-base); + text-transform: uppercase; + + 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); } @@ -37,7 +47,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 index 08da104..14f5858 100644 --- 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; 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; }); diff --git a/index.html b/index.html index 42e4f08..3ef1636 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,8 @@
+ +
From e75c9f6cf7f63ec35e27bcdf43959520a1008912 Mon Sep 17 00:00:00 2001 From: Nico Date: Sun, 21 Jul 2024 18:55:45 +0200 Subject: [PATCH 2/2] add tag display --- css/list.css | 3 ++- css/newItem.css | 16 +++++++++++++++- db.js | 7 +++++-- index.html | 5 ++++- 4 files changed, 26 insertions(+), 5 deletions(-) diff --git a/css/list.css b/css/list.css index e80d74d..69fb798 100644 --- a/css/list.css +++ b/css/list.css @@ -28,6 +28,7 @@ font-size: small; color: var(--text-secondary); + font-weight: 500; border-top: var(--border) var(--border-width) solid; } @@ -78,7 +79,7 @@ width: 100%; } -.itemTime { +.itemData { font-size: small; color: var(--text-secondary); } diff --git a/css/newItem.css b/css/newItem.css index 895e5cb..44cd248 100644 --- a/css/newItem.css +++ b/css/newItem.css @@ -10,12 +10,25 @@ 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-primary); + 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; } @@ -39,6 +52,7 @@ #newItemText::placeholder, #newItemTag::placeholder { color: var(--text-secondary); + opacity: 0.5; } .newItemControls { diff --git a/db.js b/db.js index 14f5858..81e803b 100644 --- a/db.js +++ b/db.js @@ -50,7 +50,7 @@ document.addEventListener("DOMContentLoaded", function () { .getElementById("newItem") .addEventListener("submit", function (event) { event.preventDefault(); - let itemTag = document.getElementById("newItemTag").value; + let itemTag = document.getElementById("newItemTag").value.toUpperCase(); let itemText = document.getElementById("newItemText").value; let sentiment = document.querySelector( `input[name="sentiment"]:checked` @@ -110,13 +110,16 @@ function displayItems(items) { minute: "2-digit", }); + const itemTag = item.tag == "" ? "" : ` → ${item.tag}`; + itemsList += "
" + item.type + - "
" + + "' />
" + timeString + + itemTag + "
Delete
" + diff --git a/index.html b/index.html index 3ef1636..95b0923 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,10 @@
- +
+ → + +