btnI at the beginning

index.html

@@ -42,11 +42,12 @@
     <div class="container">
       <form class="row g-3 text-center mt-5">
         <!-- Google -->
-        <label class="display-1 form-label fw-normal" for="input">
+        <label class="display-1 form-label fw-normal mb-0" for="input">
           <span class="text-primary">G</span><span class="text-danger">o</span
           ><span class="text-warning">o</span><span class="text-primary">g</span
           ><span class="text-success">l</span><span class="text-danger">e</span>
         </label>
+        <small class="text-muted mt-0">Let me Google that for you</small>
 
         <!-- Input -->
         <div
@@ -70,27 +71,22 @@
             name="search"
             placeholder="Search"
             required
-            title="Search"
             type="text"
           />
         </div>
 
         <!-- Actions -->
         <div>
-          <button
-            class="btn btn-light"
-            id="search"
-            onclick="onClickSearch()"
-            type="submit"
-          >
+          <button class="btn btn-light" id="search" type="submit">
             Google Search
           </button>
           <button
             class="btn btn-light"
             id="lucky"
-            onclick="onClickLucky()"
+            name="lucky"
             title="Open the first search result"
-            type="button"
+            type="submit"
+            value="true"
           >
             I'm feeling lucky
           </button>

index.js

@@ -1,6 +1,6 @@
 "use strict"
 
-/** @type {{search?: string; lucky?: boolean;}} */
+/** @type {{search: string; lucky?: boolean;}} */
 const query = window.location.search
   .substr(1)
   .split("&")
@@ -40,11 +40,9 @@ window.addEventListener("load", async () => {
   await setMessage("Come on", "Was it really that hard?", "alert-success")
   await new Promise(resolve => setTimeout(resolve, 3000))
 
-  window.location.href = encodeURI(
-    `https://www.google.com/search?q=${query.search}${
-      query.lucky ? "&btnI" : ""
-    }`
-  )
+  window.location.href = `https://www.google.com/search?${
+    query.lucky ? "btnI&" : ""
+  }q=${query.search}`
 })
 
 function makeCursor() {
@@ -55,6 +53,11 @@ function makeCursor() {
   return cursor
 }
 
+/**
+ * Move the cursor to the targeted element
+ * @param {HTMLSpanElement} cursor
+ * @param {HTMLButtonElement} target
+ */
 async function move(cursor, target) {
   return new Promise(resolve => {
     const diffX =
@@ -93,6 +96,12 @@ async function write() {
   }
 }
 
+/**
+ * Set the message box under the search buttons.
+ * @param {string} heading
+ * @param {string} content
+ * @param {string} type
+ */
 async function setMessage(heading, content, type = "alert-primary") {
   const message = document.getElementById("message")
 
@@ -108,21 +117,3 @@ async function setMessage(heading, content, type = "alert-primary") {
   message.classList.remove("opacity-0")
   await new Promise(resolve => setTimeout(resolve, 300))
 }
-
-// eslint-disable-next-line no-unused-vars
-function onClickSearch() {
-  onClickButton(false)
-}
-
-// eslint-disable-next-line no-unused-vars
-function onClickLucky() {
-  onClickButton(true)
-}
-
-function onClickButton(lucky = false) {
-  if (!input.validity.valid) return
-  const url = new URL(window.location.href)
-  url.searchParams.set("search", input.value.trim())
-  if (lucky) url.searchParams.set("lucky", "true")
-  window.location.href = url.href
-}