Add stories filter form JS

5 files changed, 55 insertions, 18 deletions

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);
diff --git a/templates/base.html b/templates/base.html
index ab83cfb..025f1d9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -23,6 +23,8 @@
     <footer>
         Vithuran Vishnuthas &copy; 2022
     </footer>
+    {% block jsfile %}
+    {% endblock jsfile %}
 </body>
 
 </html>
diff --git a/templates/stories.html b/templates/stories.html
index e342c02..431453c 100644
--- a/templates/stories.html
+++ b/templates/stories.html
@@ -4,21 +4,19 @@
 <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>
             {% for work in works | unique(attribute="language") %}
             <option value="{{work.language}}">{{work.language}}</option>
             {% endfor %}
         </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>
             {% for work in works | unique(attribute="story_type") %}
             <option value="{{work.story_type}}">{{work.story_type}}</option>
             {% endfor %}
         </select>
-        <input type="reset">
-        <input type="submit" value="Filter">
     </form>
 </div>
 <div class="works">
@@ -30,10 +28,11 @@
                     </div>
                     <div class="info">
                         <span>{{work.number_of_pages}} Pages</span>
-                        <span>{{work.language}}</span>
-                        <span>{{work.story_type}}</span>
+                        <span class="story-language">{{work.language}}</span>
+                        <span class="story-type">{{work.story_type}}</span>
                     </div>
         </a>
     {% endfor %}
 </div>
 {% endblock content %}
+{% block jsfile %}<script src="./stories.js"></script>{% endblock jsfile %}