advanced ntfy!

astro/public/scripts/ntfy.js

@@ -1,3 +1,6 @@
+const ntfyInput = document.getElementById("ntfy-input");
+const ntfyButton = document.getElementById("ntfy-send");
+
 // both
 function send(message) {
   const r = new XMLHttpRequest();
@@ -5,10 +8,33 @@ function send(message) {
   r.setRequestHeader("Content-Type", "text/plain");
   r.send(message);
 }
+
 // send notification
-const ntfyInput = document.getElementById("ntfy-input");
 function sendNotification() {
-  if (ntfyInput.value.length <= 0) return;
   send(ntfyInput.value);
   ntfyInput.value = "";
 }
+
+async function ntfyClick() {
+  if (ntfyInput.value.length >= 0) {
+    ntfyButton.innerHTML = "ಠ﹏ಠ";
+    setTimeout(()=> {
+      ntfyButton.innerHTML = "Send";
+      return;
+  }, 1000);
+  }
+  if (ntfyInput.value === ' ') {
+    ntfyButton.innerHTML = "ಠ﹏ಠ";
+    setTimeout(()=> {
+      ntfyButton.innerHTML = "Send";
+      return;
+  }, 1000);
+  }
+  if (ntfyInput.value.length >= 1 && ntfyInput.value !== " ") {
+    ntfyButton.innerHTML = "Sent! ( ꈍᴗꈍ)";
+    sendNotification();
+    setTimeout(()=> {
+      ntfyButton.innerHTML = "Send";
+  }, 1000);
+  }
+}

astro/src/pages/index.astro

@@ -56,8 +56,9 @@ import Layout from "../layouts/Layout.astro";
         <br style="margin-bottom: 10px;">
         <textarea id="ntfy-input" placeholder="Hi nelle~!"></textarea><button
           class="ntfy-send nob4 custom-btn btn-1"
-          onclick="sendNotification()"
-          style="margin-left:10px;">Send</button
+          onclick="ntfyClick()"
+          style="margin-left:10px;"
+          id="ntfy-send">Send</button
         >
       </div>
       </div>