Mng 89 clicking start should render choose pokemon screen

index.html

@@ -32,17 +32,17 @@
                     <p class="gameTitle">Pokemon Fight</p>
                     <p class="startInstruction">Enter yours names to start the Fight!</p>
                     <div id="enter-name-area">
-                        <input id="enter-player1-name" class="playerNameInput" placeholder="Player 1"/>
-                        <input id="enter-player2-name" class="playerNameInput" placeholder="Player 2"/>
+                        <input id="enter-player1-name" class="playerNameInput" placeholder="Player 1" maxlength="8"/>
+                        <input id="enter-player2-name" class="playerNameInput" placeholder="Player 2" maxlength="8"/>
                     </div>
                 </div>
             </div>
             <div id="start-game-border">
                 <div id="start-game-bg1">
                     <div id="start-game-bg2">
-                        <div id="start-game-button" class="button-disabled">
+                        <button id="start-game-button" class="button-disabled" disabled>
                             Start
-                        </div>
+                        </button>
                     </div>
                 </div>
             </div>

src/activateStart.ts

@@ -1,7 +1,10 @@
-export const activateStart = (name1Input: HTMLInputElement, name2Input: HTMLInputElement, startButton: HTMLDivElement) => {
-    if (name1Input.value.length > 0 && name2Input.value.length > 0) {
+export const activateStart = (name1Input: HTMLInputElement, name2Input: HTMLInputElement, startButton: HTMLButtonElement) => {
+    if (name1Input.value.length > 0 && name2Input.value.length > 0 && name1Input.value.length <= 8 && name2Input.value.length <= 8) {
         startButton.className = 'button-enabled'
+        startButton.disabled = false;
     } else {
         startButton.className = 'button-disabled'
+        startButton.disabled = true;
     }
-}
+}
+

src/index.ts

@@ -31,7 +31,7 @@ const createHowToPlayButton = () => {
 const activateStartButton = () => {
   const player1NameInput = document.querySelector('#enter-player1-name') as HTMLInputElement;
   const player2NameInput = document.querySelector('#enter-player2-name') as HTMLInputElement;
-  const startButton = document.querySelector("#start-game-button") as HTMLDivElement;
+  const startButton = document.querySelector("#start-game-button") as HTMLButtonElement;
   player1NameInput.addEventListener("keyup", () => {
       activateStart(player1NameInput, player2NameInput, startButton)
   })
@@ -43,7 +43,7 @@ const activateStartButton = () => {
 const renderChoosePokemonScreen = (appDiv: HTMLDivElement) => {
   const playButton = document.querySelector(
     "#start-game-button"
-  ) as HTMLDivElement;
+  ) as HTMLButtonElement;
   playButton?.addEventListener("click", () => {
     const player1NameInput = (document.querySelector('#enter-player1-name') as HTMLInputElement).value;
     const player2NameInput = (document.querySelector('#enter-player2-name') as HTMLInputElement).value;

styles/SASS/_start-view.scss

@@ -97,7 +97,6 @@
                     text-align: center;
                     font-family: 'Pokemon Solid';
                     font-size: 1em;
-                    padding-top: 15%;
 
                     &:hover {
                         @include dropshadow