show form input when you click the clock

index.html

@@ -143,6 +143,7 @@
     margin-top: -.06em;
     font-size: 6rem;
     letter-spacing: .05em;
+    cursor: pointer;
   }
 
   #search-form {
@@ -402,10 +403,12 @@
   };
 
   class Clock {
-    constructor({ delimiter }) {
+    constructor(options) {
       this._el = $.el('#clock');
-      this._delimiter = delimiter;
+      this._delimiter = options.delimiter;
+      this._form = options.form;
       this._setTime = this._setTime.bind(this);
+      this._registerEvents();
       this._start();
     }
 
@@ -413,6 +416,10 @@
       return ('0' + num.toString()).slice(-2);
     }
 
+    _registerEvents() {
+      this._el.addEventListener('click', this._form.show);
+    }
+
     _setTime() {
       const date = new Date();
       const hours = this._pad(date.getHours());
@@ -881,7 +888,17 @@
       this._loadQueryParam();
     }
 
+    hide() {
+      $.bodyClassRemove('form')
+    }
+
+    show() {
+      $.bodyClassAdd('form');
+      this._inputEl.focus();
+    }
+
     _bindMethods() {
+      this.show = this.show.bind(this);
       this._clearPreview = this._clearPreview.bind(this);
       this._handleKeydown = this._handleKeydown.bind(this);
       this._handleInput = this._handleInput.bind(this);
@@ -915,8 +932,7 @@
         case '?': if (!$.bodyClassHas('form')) this._help.toggle(); return;
       }
 
-      $.bodyClassAdd('form');
+      this.show();
-      this._inputEl.focus();
     }
 
     _handleInput() {
@@ -924,7 +940,7 @@
       const { isKey } = this._queryParser.parse(newQuery);
       this._inputElVal = newQuery;
       this._setBackgroundFromQuery(newQuery);
-      if (!newQuery) $.bodyClassRemove('form');
+      if (!newQuery) this.hide();
       else if (this._instantRedirect && isKey) this._submitWithValue(newQuery);
       else if (this._suggester) this._suggester.suggest(newQuery);
     }
@@ -1016,16 +1032,19 @@
     });
   };
 
+  const getForm = () => {
+    return new Form({
+      colors: CONFIG.colors,
+      help: getHelp(),
+      instantRedirect: CONFIG.instantRedirect,
+      newTab: CONFIG.newTab,
+      queryParser: getQueryParser(),
+      suggester: CONFIG.suggestions ? getSuggester() : false,
+    });
+  };
+
   new Clock({
     delimiter: CONFIG.clockDelimiter,
-  });
+    form: getForm(),
-
-  new Form({
-    colors: CONFIG.colors,
-    help: getHelp(),
-    instantRedirect: CONFIG.instantRedirect,
-    newTab: CONFIG.newTab,
-    queryParser: getQueryParser(),
-    suggester: CONFIG.suggestions ? getSuggester() : false,
   });
 </script>