🎉 Add initial searchbox functionality

Scratch-Client-4 · Sep 6, 2020 · 1be16c3 · 1be16c3
1 parent 5fff6c4
commit 1be16c3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, width=device-width">
-  <title>SC4</title>
+  <title>SC4 | Home</title>
   <link rel="stylesheet" href="styles/index.css">
   <link rel="stylesheet" href="styles/loader.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@@ -14,7 +14,7 @@
   <div id="app">
     <div class="top">
       <h1>Your front page <img src="asset/icon-settings.svg" id="menuButton"></h1>
-      <input type="text" id="searchbox" placeholder="Search for User"></input>
+      <input type="search" id="searchbox" placeholder="Search for User"></input>
     </div>
     <div class="scroller" id="tagScroller"><a href="#" class="selected">Featured</a><a href="#" class="unselected">Top Loved</a><a href="#" class="unselected">Trending</a><a href="#" class="unselected">Mobile-Friendly</a><a href="#"
         class="unselected">Recent</a><a href="#" class="unselected">Games</a><a href="#" class="unselected">Animations</a>

diff --git a/scripts/index.js b/scripts/index.js
@@ -1,4 +1,4 @@
-console.log("Scratch Client 4 Mobile")
+console.log("Scratch Client 4 Mobile");
 
 let scrollOptions = document.getElementById('tagScroller').childNodes,
   root = document.documentElement;
@@ -157,5 +157,9 @@ function windowLoaded() {
       }
     })
   }
+  document.getElementById('searchbox').addEventListener('search', function() {
+    let searchterm = document.getElementById('searchbox').value;
+    window.location.replace('search.html?q=' + searchterm);
+  });
   getFeaturedProjects(0);
 }
diff --git a/scripts/search.js b/scripts/search.js
diff --git a/search.html b/search.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, width=device-width">
-  <title>SC4</title>
+  <title>SC4 | Search</title>
   <link rel="stylesheet" href="styles/index.css">
   <link rel="stylesheet" href="styles/loader.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@@ -13,7 +13,7 @@
 <body>
   <div id="app">
     <div class="top">
-      <h1>Search <img src="asset/icon-back.svg" id="menuButton"></h1>
+      <h1>Search <img src="asset/icon-settings.svg" id="menuButton"></h1>
       <input type="text" id="searchbox" placeholder="Search for User"></input>
     </div>
     <div class="scroller" id="tagScroller"><a href="#" class="selected">Popular</a><a href="#" class="unselected">Recent</a><a href="#" class="unselected">Trending</a>
@@ -26,7 +26,7 @@ <h1>Search <img src="asset/icon-back.svg" id="menuButton"></h1>
     <circle class="circle" fill="none" stroke-width="0.4em" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
   </svg>
   <script src="cordova.js" charset="utf-8"></script>
-  <script src="scripts/index.js" charset="utf-8"></script>
+  <script src="scripts/search.js" charset="utf-8"></script>
 
 </body>