Color tags

diff --git a/vopamoi.css b/vopamoi.css
index 9f4469c367b127851cf79d76555181e0721d3a2b..1fceed9d329e494892c65007696fe596d26b0d88 100644 (file)
--- a/vopamoi.css
+++ b/vopamoi.css
@@ -4,7 +4,12 @@ input {
 .tag {
   float: right;
   margin-left: 1em;
-  font-size: 85%;
+  font-size: 80%;
+}
+span.tag {
+  color: white;
+  padding: 1px .5em;
+  font-weight: bold;
 }
 input.tag {
   width: 7em;

diff --git a/vopamoi.ts b/vopamoi.ts
index 5916d0a9b21d5fe722d5e05cfa2151b2e1057dd1..135fe0afe417539547816bdab6f807ed58eef10e 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -29,6 +29,12 @@ function Clock() {
 }
 const clock = Clock();
 
+// Returns a promise for a hue based on a hash of the string
+function hashHue(str: string) {
+  // Using crypto for this is overkill
+  return crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)).then((buf) => (new Uint16Array(buf)[0] * 360) / 2 ** 16);
+}
+
 const Model = {
   addTask: function (timestamp: string, description: string): Element {
     const task = document.createElement("div");
@@ -53,6 +59,7 @@ const Model = {
     tag.appendChild(document.createTextNode(tagName));
     tag.classList.add("tag");
     tag.setAttribute("tabindex", "0");
+    hashHue(tagName).then((hue) => (tag.style.backgroundColor = `hsl(${hue},90%,45%)`));
     task.appendChild(tag);
     return tag;
   },