detect key from longer URL

examples/archive.html

@@ -98,10 +98,33 @@ <h3 id="offcanvasRightLabel">Images</h3>
 
     form.addEventListener('submit', (event) => {
       event.preventDefault();
-      const url = input.value.replace('details', 'metadata');
-      let splitUrl = url.split('/');
-      let detectKey = splitUrl[splitUrl.length - 2];
-      console.log("detected key", detectKey);
+      extractKey();
+    });
+
+    welcomeModal.addEventListener('hidden.bs.modal', (event) => {
+      new bootstrap.Offcanvas(sidebar).show();
+    });
+
+    function extractKey() {
+      let getUrl;
+      if(!input.value.includes('archive.org/details/') && !input.value.includes('https://'))
+      {
+        getUrl = `https://archive.org/details/${input.value}/`;
+        showImages(getUrl); 
+      }
+      else if(!input.value.includes('https://')) {
+        getUrl = `https://${input.value}`;
+        showImages(getUrl);   
+      }
+      else
+      {
+        getUrl = input.value;
+        showImages(getUrl)
+      }
+    }
+
+    function showImages(getUrl) {
+      const url = getUrl.replace('details', 'metadata');
       let fetchedFrom
       axios.get(url)
         .then((response) => {
@@ -142,7 +165,7 @@ <h3 id="offcanvasRightLabel">Images</h3>
         .finally(() => {
           bootstrap.Modal.getInstance(welcomeModal).hide();
         });
-    });
+    }
 
     welcomeModal.addEventListener('hidden.bs.modal', (event) => {
         new bootstrap.Offcanvas(sidebar).show();