close #6

index.html

@@ -29,7 +29,7 @@
                 </button>
             </div>
             <div>
-                <a href="#">show all words</a> <a href="#">uh. something else</a>
+                <a id="showAllWords">show all words</a> <a href="#">random word</a> <a href="#">resources</a>
             </div>
             <noscript>turn on js doofus</noscript>
         </header>

main.js

@@ -28,6 +28,7 @@ function animateHeader(inout = false) {
             header.classList.add("fullscreen");
             main.style.opacity = "0";
             main.classList.remove("main-animation-reverse");
+            main.innerHTML = "";
         }, 500);
         setTimeout(() => {
             header.classList.remove("header-animation-reverse");
@@ -259,11 +260,18 @@ function search(word) {
     return result;
 }
 
-function doSearch(state = true) {
+function doSearch(state = true, all = false) {
+    if (all == true) {
+        header.querySelector("input").value = "show:all";
+    }
     let val = header.querySelector("input").value;
-    let results = search(val);
+    if (val == "") {
+        main.innerHTML = "enter some search terms...";
+        return;
+    }
+    let results = search(val == "show:all" ? "" : val);
     if (results.length == 0) {
-        main.innerHTML = "no results lulw";
+        main.innerHTML = "no results (todo: cool form)";
     } else {
         main.innerHTML = "";
         /*
@@ -406,6 +414,12 @@ window.onload = () => {
             goHome();
         }
     };
+    header.querySelector("#showAllWords").onclick = () => {
+        if (header.classList.contains("fullscreen")) {
+            animateHeader(false);
+        }
+        doSearch(true, true);
+    };
     loadDictionary();
     window.addEventListener('popstate', (e) => {
         if (e.state == null) {