navigation between pages

index.html

@@ -39,7 +39,13 @@
     <div id="right" class="column">
         <button class="action-button">Create solo game</button>
         <button class="action-button">Join game</button>
-        <button class="action-button">New Game</button>
+        <button id="newGame" class="action-button">New Game</button>
+        <script>
+            let button=document.querySelector("#newGame")
+            button.addEventListener('click', event => {
+                window.location.href = "/views/room.html";
+            }); 
+        </script>
     </div>
 </div>
 

styles/index.css

@@ -62,27 +62,6 @@
      background-color: white;
 }
 
-.action-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 50%;
-    padding: 1.2em;
-    padding-top: 2.1rem;
-    background-color: white;
-    border: 0.2rem solid black;
-    border-radius: 0.5em;
-    font-family: var(--font);
-    font-size: 1.5em;
-    transition: 0.3s;
-}
-
-.action-button:hover {
-    background-color: black;
-    color: white;
-    transform: scale(1.2);
-    cursor: pointer;
-}
 
 h1 {
     color: black;

styles/style.css

@@ -7,4 +7,27 @@
     margin: 0;
     border: 0;
     font-family: var(--font);
+}
+
+.action-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding: 1.2em;
+    padding-top: 2.1rem;
+    background-color: white;
+    border: 0.2rem solid black;
+    border-radius: 0.5em;
+    font-family: var(--font);
+    font-size: 1.5em;
+    transition: 0.3s;
+}
+
+
+.action-button:hover {
+    background-color: black;
+    color: white;
+    transform: scale(1.2);
+    cursor: pointer;
 }

views/room.html

@@ -62,7 +62,13 @@
       </div>
     </div>
 
-    <button id="start">START</button>
+    <button id="start" class="action-button">Start</button>
+    <script>
+      let button=document.querySelector("#start")
+      button.addEventListener('click', event => {
+          window.location.href = "/views/game.html";
+      }); 
+  </script>
   </section>
 </body>