diff --git a/index.html b/index.html index 56a1e86..11558f7 100644 --- a/index.html +++ b/index.html @@ -43,9 +43,8 @@ .wrapper { position: relative; - top: 40%; + top: 25%; padding: 1rem; - transform: translateY(-50%); } .time { @@ -67,6 +66,12 @@ color: #fff; font-size: 1.1rem; } + + .help { + width: 300px; + margin: 1rem auto 0; + text-align: left; + } @@ -76,6 +81,8 @@ + +

 
 
 
@@ -104,6 +111,7 @@
     var Commander = {
       searchForm: document.getElementById('js-search'),
       searchText: document.getElementById('js-search-text'),
+      searchHelp: document.getElementById('js-help'),
 
       init: function(commands) {
         Commander.commands = commands;
@@ -112,18 +120,33 @@
 
       search: function(e) {
         var q = Commander.searchText.value;
-        Commander.location = 'https://www.google.com/search?q=' + q;
 
-        Commander.commands.forEach(function(command) {
-          if (q === command.key) Commander.location = command.url;
-        });
+        if (q === '?') {
+          var helpMessage = '';
 
-        window.location.href = Commander.location;
+          Commander.commands.forEach(function(command) {
+            helpMessage += command.key + ': ' + command.url + '\n';
+          });
+
+          Commander.searchHelp.innerHTML = helpMessage;
+        } else {
+          Commander.location = 'https://www.google.com/search?q=' + q;
+
+          Commander.commands.forEach(function(command) {
+            if (q === command.key) Commander.location = command.url;
+          });
+
+          window.location.href = Commander.location;
+        }
+
+        Commander.searchText.value = '';
         e.preventDefault();
       }
     };
 
     Clock.init();
+
+    // add commands here
     Commander.init([
       { key: 'i', url: 'https://inbox.google.com' },
       { key: 'k', url: 'https://keep.google.com' },