From: Scott Worley Date: Thu, 27 Jan 2022 21:24:18 +0000 (-0800) Subject: Color tags X-Git-Url: http://git.scottworley.com/vopamoi/commitdiff_plain/c70b3eedcfa3521a21239d7f0a6d2168e063dea2?ds=inline Color tags --- diff --git a/vopamoi.css b/vopamoi.css index 9f4469c..1fceed9 100644 --- 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 5916d0a..135fe0a 100644 --- 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; },