]> git.scottworley.com Git - vopamoi/commitdiff
Color tags
authorScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 21:24:18 +0000 (13:24 -0800)
committerScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 21:24:18 +0000 (13:24 -0800)
vopamoi.css
vopamoi.ts

index 9f4469c367b127851cf79d76555181e0721d3a2b..1fceed9d329e494892c65007696fe596d26b0d88 100644 (file)
@@ -4,7 +4,12 @@ input {
 .tag {
   float: right;
   margin-left: 1em;
 .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;
 }
 input.tag {
   width: 7em;
index 5916d0a9b21d5fe722d5e05cfa2151b2e1057dd1..135fe0afe417539547816bdab6f807ed58eef10e 100644 (file)
@@ -29,6 +29,12 @@ function Clock() {
 }
 const clock = 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");
 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");
     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;
   },
     task.appendChild(tag);
     return tag;
   },