Add go button

index.css

@@ -19,12 +19,15 @@
   width: 95%;
   font-size: 1em;
   padding: 0.5rem 0.8rem;
-  margin-bottom: 1rem;
   border: none;
   border-radius: 10px;
   background-color: rgba(0, 0, 0, 0.07);
 }
 
+/* input:focus {
+  outline: none;
+} */
+
 .suggestion {
   padding: 1rem 1rem 1rem 0;
   margin-left: 1rem;
@@ -57,4 +60,12 @@
   align-items: center;
   justify-content: center;
   padding: 0 1rem;
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+#go {
+  font-size: 1.1rem;
+  display: none;
+  transition: opacity 0.25s ease-in-out;
 }

index.html

@@ -20,7 +20,8 @@
   <div id="main">
     <h1 id="title">AltSource Viewer</h1>
     <div class="textfield">
-      <input type="text" placeholder="Source URL">
+      <input type="url" placeholder="Source URL">
+      <a id="go">Go</a>
     </div>
     <div id="suggestions" class="section">
       <div class="header">

index.js

@@ -11,27 +11,48 @@ import { isValidHTTPURL, open } from "./common/modules/utilities.js";
 const { default: sources } = await import("./common/assets/sources.json", { assert: { type: "json" } });
 
 (function main() {
-    const textField = document.querySelector("input");
-    
     for (const url of sources)
         insertSource(url);
 
+    const textField = document.querySelector("input");
+    const goButton = document.getElementById("go");
+    const viewSource = () => {
+        const sourceURL = textField.value;
+        if (!isValidHTTPURL(sourceURL))
+            alert("Invalid HTTP URL.");
+        else open(`./view/?source=${sourceURL}`);
+    };
+
     // If source provided
     if (urlSearchParams.has('source')) {
         textField.value = urlSearchParams.get("source");
         textField.focus();
     }
 
-    textField.addEventListener("keypress", function (event) {
+    textField.addEventListener("keypress", event => {
         if (event.key === "Enter") {
             event.preventDefault();
-            const sourceURL = textField.value;
+            viewSource();
-            if (!isValidHTTPURL(sourceURL))
-                alert("Invalid HTTP URL.");
-            else open(`./view/?source=${sourceURL}`);
         }
     });
 
+    const toggleGoButton = () => {
+        if (textField.value.length) {
+            goButton.style.display = "block";
+            setTimeout(() => {
+                goButton.style.opacity = 1;
+            }, 5);
+        } else {
+            goButton.style.opacity = 0;
+            setTimeout(() => {
+                goButton.style.display = "none";
+            }, 125);
+        }
+    }; toggleGoButton();
+    textField.addEventListener("input", toggleGoButton);
+
+    goButton.addEventListener("click", viewSource);
+
     async function insertSource(url) {
         fetch(url).then(data => data.json()).then(source => {
             document.getElementById("source-code").insertAdjacentHTML("beforebegin",`