From efeabfa1687b58a039917738f5d6da5dda08829c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Wed, 6 Sep 2023 21:32:04 +0200
Subject: [PATCH] Add a remaining description characters countdown

---
 src/pages/submit.astro | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/submit.astro b/src/pages/submit.astro
index 5b41ba8..6c5da19 100644
--- a/src/pages/submit.astro
+++ b/src/pages/submit.astro
@@ -55,7 +55,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <label for="description">Cat's description (optional)</label>
       <textarea id="description" name="description" maxlength="300"></textarea>
       <small>
-        Some ideas: nicknames, age, breed(s), where you adopted this cat
+        <span id="remaining-chars">300</span> characters left
       </small>
     </div>
     <div>
@@ -83,6 +83,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   </form>
 </BaseLayout>
 
+<script is:inline>
+const descriptionTextarea = document.getElementById('description');
+const remainingCharacters = document.getElementById('remaining-chars');
+const maxDescriptionLength = Number(
+  descriptionTextarea.getAttribute('maxlength')
+);
+
+descriptionTextarea.addEventListener('input', () => {
+  const currentDescriptionLength = descriptionTextarea.value.length;
+
+  remainingCharacters.textContent =
+    maxDescriptionLength - currentDescriptionLength;
+});
+</script>
+
 <style>
   h1 {
     margin-bottom: 0;