Add character count to ntfy message

src/routes/+page.svelte

@@ -4,6 +4,17 @@
     import links from "../data/links.json";
 
     const pages = getPages();
+
+    function updateCharCount(_) {
+        const message = document.getElementById("ntfy-message").value;
+        const el = document.getElementById("ntfy-char-count");
+
+        if (message.length >= 15 && message.length <= 128)
+            el.setAttribute("style", "color: var(--success);");
+        else el.setAttribute("style", "color: var(--error);");
+
+        el.innerText = 128 - message.length;
+    }
 </script>
 
 <main id="main-content">
@@ -343,18 +354,24 @@
     </p>
 
     <input
+        on:input={updateCharCount}
         type="text"
         id="ntfy-message"
+        name="ntfy-message"
         placeholder="Message"
         minlength="15"
         maxlength="128"
     />
+    <label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
+        128
+    </label>
+    <br />
     <button
         on:click={() => {
             const message = document.getElementById("ntfy-message").value;
             if (message.length < 15)
                 return alert(
-                    `Message must be 15 to 128 chars. Current length is ${message.length}`,
+                    `Message must be 15 to 128 characters. Current length is ${message.length}`,
                 );
             fetch("https://ntfy.meow.company/pancakes", {
                 method: "POST",
@@ -366,6 +383,7 @@
                 },
             });
         }}
+        style="margin-top: 1rem;"
     >
         Send
     </button>