From 50f0dd83857d824ebf808ef252d3c614428c9dfb Mon Sep 17 00:00:00 2001
From: WriterV2 <primary-v2@protonmail.com>
Date: Sat, 5 Nov 2022 18:04:22 +0100
Subject: Add stories filter form JS

---
 docs/index.html   |  3 +++
 docs/stories.html | 21 ++++++++++-----------
 docs/stories.js   | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 docs/stories.js

(limited to 'docs')

diff --git a/docs/index.html b/docs/index.html
index cd7df22..4a16d7c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,6 +25,9 @@
     <footer>
         Vithuran Vishnuthas &copy; 2022
     </footer>
+    
+    <script src=""></script>
+    
 </body>
 
 </html>
diff --git a/docs/stories.html b/docs/stories.html
index e48400d..720a6ee 100644
--- a/docs/stories.html
+++ b/docs/stories.html
@@ -22,7 +22,7 @@
 <div class="works-filter">
     <form>
         <label for="language">Language: </label>
-        <select name="language" id="language">
+        <select name="language" id="language-select">
             <option value="*">All</option>
             
             <option value="German">German</option>
@@ -30,8 +30,8 @@
             <option value="English">English</option>
             
         </select>
-        <label for="story_type">Story Type: </label>
-        <select name="story_type" id="story_type">
+        <label for="story-type">Story Type: </label>
+        <select name="story-type" id="story-type-select">
             <option value="*">All</option>
             
             <option value="Shortstory">Shortstory</option>
@@ -39,8 +39,6 @@
             <option value="Screenplay">Screenplay</option>
             
         </select>
-        <input type="reset">
-        <input type="submit" value="Filter">
     </form>
 </div>
 <div class="works">
@@ -52,8 +50,8 @@
                     </div>
                     <div class="info">
                         <span>7 Pages</span>
-                        <span>German</span>
-                        <span>Shortstory</span>
+                        <span class="story-language">German</span>
+                        <span class="story-type">Shortstory</span>
                     </div>
         </a>
     
@@ -64,8 +62,8 @@
                     </div>
                     <div class="info">
                         <span>2 Pages</span>
-                        <span>German</span>
-                        <span>Shortstory</span>
+                        <span class="story-language">German</span>
+                        <span class="story-type">Shortstory</span>
                     </div>
         </a>
     
@@ -76,8 +74,8 @@
                     </div>
                     <div class="info">
                         <span>2 Pages</span>
-                        <span>English</span>
-                        <span>Screenplay</span>
+                        <span class="story-language">English</span>
+                        <span class="story-type">Screenplay</span>
                     </div>
         </a>
     
@@ -87,6 +85,7 @@
     <footer>
         Vithuran Vishnuthas &copy; 2022
     </footer>
+    <script src="./stories.js"></script>
 </body>
 
 </html>
diff --git a/docs/stories.js b/docs/stories.js
new file mode 100644
index 0000000..e5a57ec
--- /dev/null
+++ b/docs/stories.js
@@ -0,0 +1,34 @@
+// every story card
+const workCards = document.querySelectorAll(".work-card");
+
+// story type select input
+const storyTypeSelect = document.querySelector("#story-type-select");
+// language select input
+const languageSelect = document.querySelector("#language-select");
+// copy of works with all work cards 
+const works = Array.from(document.querySelector(".works").children);
+
+// filter cards based on storytype and language filter
+function filterWorkCards() {
+    // restore initial state with all cards
+    // (TODO: Explore more efficient solutions without another loop)
+    document.querySelector(".works").replaceChildren();
+    works.forEach((card) => {
+        document.querySelector(".works").appendChild(card);
+    })
+
+    // filter card if language or story type filter doesn't match
+    workCards.forEach((card) => {
+        if (languageSelect.value != "*" && card.querySelector(".story-language").innerHTML != languageSelect.value) {
+            document.querySelector(".works").removeChild(card);
+        } else if (storyTypeSelect.value != "*" && card.querySelector(".story-type").innerHTML != storyTypeSelect.value) {
+            document.querySelector(".works").removeChild(card);
+        }
+    })
+}
+
+// filter cards when
+// story type selection changes
+storyTypeSelect.addEventListener("change", filterWorkCards);
+// language selection changes
+languageSelect.addEventListener("change", filterWorkCards);
-- 
cgit v1.2.3