Highlighter

ts/highlighter.ts

@@ -0,0 +1,21 @@
+import { ElemWrapper } from "./elemwrapper";
+import { SingleTimer } from "./singletimer";
+
+export class Highlighter {
+    private elem: ElemWrapper;
+    private timer: SingleTimer;
+
+    constructor(elem: ElemWrapper) {
+        this.elem = elem;
+        this.elem.classList.add("preHighlight");
+
+        this.timer = new SingleTimer(() => {
+            this.elem.classList.remove("highlight");
+        }, 1000);
+    }
+
+    public highlight() {
+        this.elem.classList.add("highlight");
+        this.timer.start();
+    }
+}

ts/main.ts

@@ -1,4 +1,5 @@
 import { ElemWrapper } from "./elemwrapper";
+import { Highlighter } from "./highlighter";
 import { SLCard } from "./slcard";
 import { SLIcon } from "./slicon";
 import { SLInput } from "./slinput";
@@ -19,8 +20,9 @@ async function main() {
     const tasksInput = new SLInput();
     tasksCard.append(tasksInput);
     tasksInput.setPill();
-    
+
     const tasksAddIcon = tasksInput.addSuffixIcon("plus-circle");
+    const highlighter = new Highlighter(tasksAddIcon);
 
     const addTask = () => {
         const task = tasksInput.getValue();
@@ -31,9 +33,7 @@ async function main() {
         tasksInput.clear();
         tasksInput.focus();
 
-        tasksAddIcon.classList.remove("highlight");
-        void tasksAddIcon.elem.offsetWidth; // force reflow
-        tasksAddIcon.classList.add("highlight");
+        highlighter.highlight();
     };
 
     tasksAddIcon.addEventListener("click", () => {

ts/singletimer.ts

@@ -0,0 +1,18 @@
+export class SingleTimer {
+    private callback: () => void;
+    private delay: number;
+    private timer: number | undefined;
+
+    constructor(callback: () => void, delay: number) {
+        this.callback = callback;
+        this.delay = delay;
+    }
+
+    public start() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+
+        this.timer = setTimeout(this.callback, this.delay);
+    }
+}