Adding search JS

assets/js/script.js

@@ -6,6 +6,7 @@
  *
  */
 
+// Time and date settings
 function startTime() {
   var currentDate = new Date();
   var hr = parseInt(currentDate.getHours());
@@ -29,21 +30,16 @@ function startTime() {
   var time = setTimeout(function(){ startTime() }, 60000);
 }
 
+// You can add your own random quotes and stuff here
 const quotes = [
   'Hello, world...',
-  'yeet',
+  'Goodbye world sudo rm -rf *',
-  'fuq'
+  'This is a random quote'
 ];
 document.getElementById("header-quote").innerText = quotes[
   Math.floor(Math.random() * quotes.length)
 ];
 
-$(document).ready(function(){
-  $("#togglebookmarks").click(function(){
-    $("#hiddenbookmarks").toggle();
-  });
-});
-
 document.addEventListener('click', function (event) {
 
 	// If the clicked element doesn't have the right selector, bail
@@ -53,4 +49,62 @@ document.addEventListener('click', function (event) {
 
 }, false);
 
+// SEARCH
+
+const $s = {
+  qS: e => document.querySelector(e),
+  qA: e => document.querySelectorAll(e)
+};
+
+// You can add your own search query here for anything you're interested in.
+// [command character]: ['search url', 'title']
+function engines () {
+  return {
+	g: ['https://google.com/search?q=', 'Google'],
+	i: ['https://google.com/search?tbm=isch&q=', 'Google Images'],
+	yt: ['https://youtube.com/results?search_query=', 'Youtube'],
+  s: ['https://stackoverflow.com/search?q=', 'Stackoverflow'],
+	a: ['https://web.archive.org/web/*/', 'Archive'],
+	w: ['https://en.wikipedia.org/w/index.php?search=', 'Wikipedia'],
+  };
+}
+
+var search  = $s.qS('#search'),
+    input   = $s.qS('#search input[type="text"]'),
+    engines = engines();
+
+for (var key in engines)
+  $s.qS('.search-engines').innerHTML += `<li><p title="${engines[key][1]}">!${key}</p></li>`;
+
+document.onkeypress = (e) => {
+    if (e.key == 's')
+      search.classList.add('active');
+
+    input.focus();
+    input.scrollIntoView();
+
+    search.onkeyup = (e) => {
+      let args   = e.target.value.split(' '),
+          prefix = args[0],
+          engine = engines['g'][0], // the default engine (google in this case)
+          str    = 0;
+
+      $s.qA('.search-engines li p').forEach((eng) => {
+        let current = eng.parentNode;
+
+        (prefix == eng.innerHTML)
+          ? current.classList.add('active')
+          : current.classList.remove('active');
+      });
+
+      if (e.key == 'Enter') {
+        if (prefix.indexOf('!') == 0)
+          (engine = engines[prefix.substr(1)][0], str = 3);
+
+        window.location = engine + args.join(' ').substr(str).toString().replace(/\s+/m, '%20');
+      } else if (e.keyCode == 27)
+        search.classList.remove('active');
+    };
+};
+
 document.getElementById("container").addEventListener("DOMContentLoaded", startTime());