diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/stories.html | 71 | ||||
| -rw-r--r-- | docs/stories.js | 10 |
2 files changed, 19 insertions, 62 deletions
diff --git a/docs/stories.html b/docs/stories.html index 6f2a47c..0f1c88a 100644 --- a/docs/stories.html +++ b/docs/stories.html @@ -21,74 +21,37 @@ <div class="works-filter"> <form> - <label for="language">Language: </label> + <label for="language-select">Language: </label> <select name="language" id="language-select"> <option value="*">All</option> <option value="German">German</option> - <option value="English">English</option> - - </select> - <label for="story-type">Story Type: </label> - <select name="story-type" id="story-type-select"> - <option value="*">All</option> - - <option value="Shortstory">Shortstory</option> - - <option value="Screenplay">Screenplay</option> - </select> </form> </div> <div class="works"> <a href="./stories/mit_gutem_gewissen.pdf" class="work-card" download> - <div class="title-and-description"> - <h3>Mit gutem Gewissen</h3> - <p>Lorem ipsum dolor sit amet, officia excepteur.</p> - </div> - <div class="info"> - <span>7 Pages</span> - <span class="story-language">German</span> - <span class="story-type">Shortstory</span> - </div> + <div class="title-and-description"> + <h3>Mit gutem Gewissen</h3> + <p>Lorem ipsum dolor sit amet, officia excepteur.</p> + </div> + <div class="info"> + <span>7 Pages</span> + <span class="story-language">German</span> + </div> </a> <a href="./stories/das_schweigende_spiegelbild.pdf" class="work-card" download> - <div class="title-and-description"> - <h3>Das schweigende Spiegelbild</h3> - <p>Em pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.</p> - </div> - <div class="info"> - <span>2 Pages</span> - <span class="story-language">German</span> - <span class="story-type">Shortstory</span> - </div> - </a> - - <a href="./stories/hubristic_failures.pdf" class="work-card" download> - <div class="title-and-description"> - <h3>Hubristic Failures</h3> - <p>Ui minim labore adipisicing minim sint cillum sint consectetur cupidatat.ex esse exercitation idatat excepteur officia.</p> - </div> - <div class="info"> - <span>2 Pages</span> - <span class="story-language">English</span> - <span class="story-type">Screenplay</span> - </div> - </a> - - <a href="./stories/hubristic_failures.pdf" class="work-card" download> - <div class="title-and-description"> - <h3>Hubristic Failures</h3> - <p>Ui minim labore adipisicing minim sint cillum sint consectetur cupidatat.ex esse exercitation idatat excepteur officia.</p> - </div> - <div class="info"> - <span>2 Pages</span> - <span class="story-language">English</span> - <span class="story-type">Screenplay</span> - </div> + <div class="title-and-description"> + <h3>Das schweigende Spiegelbild</h3> + <p>Em pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.</p> + </div> + <div class="info"> + <span>2 Pages</span> + <span class="story-language">German</span> + </div> </a> </div> diff --git a/docs/stories.js b/docs/stories.js index e5a57ec..cb39b0c 100644 --- a/docs/stories.js +++ b/docs/stories.js @@ -1,14 +1,12 @@ // 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 +// filter cards based on language filter function filterWorkCards() { // restore initial state with all cards // (TODO: Explore more efficient solutions without another loop) @@ -17,18 +15,14 @@ function filterWorkCards() { document.querySelector(".works").appendChild(card); }) - // filter card if language or story type filter doesn't match + // filter card if language 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); |