random game button

css/style.css

@@ -208,10 +208,22 @@ body.noscript {
   margin-bottom: 5px;
 }
 
+.randgame {
+  cursor: pointer;
+  width: 15%;
+  border: none;
+  margin-left: 4px;
+  font-size: 100%;
+  font-family: var(--font-family);
+  color: var(--font-color);
+  background-color: var(--block-color);
+
+}
+
 #search {
   all: unset;
   margin-right: 4px;
-  width: 100%;
+  width: 70%;
   padding: 1rem;
   font-family: var(--font-family);
   color: var(--font-color);
@@ -227,7 +239,7 @@ body.noscript {
   font-size: 1rem;
   font-family: var(--font-family);
   padding: 1rem;
-  width: 20%;
+  width: 15%;
 }
 
 .keySlot{

index.html

@@ -247,6 +247,7 @@
                     <option value="alphabetical">Alphabetical</option>
                     <option value="reverse">Reverse Alphabetical</option>
                 </select>
+                <button class="randgame" onclick="randomGame()">Random Game</button>
             </div>
             <ul id="gamesList"></ul>
         </div>

js/index.js

@@ -496,6 +496,15 @@ function restoreColorChanges() {
     alert("Defaults Restored! Changes will take place upon reload");
 }
 
+function randomGame() {
+    const gameLinks = document.querySelectorAll('#gamesList li');
+    const randomIndex = Math.floor(Math.random() * gameLinks.length);
+    const randomGameLink = gameLinks[randomIndex];
+    window.location.href = randomGameLink.getAttribute('url');
+    ;
+} 
+
+
 const preferencesDefaults = {
     cloak: true,
     cloakUrl: "https://classroom.google.com",