bug

index.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="text-reverse.css"/>
+    <script defer src="word.js"></script>
     <script defer src="text-reverse.js"></script>
     <link rel="icon" href="icone.png" type="image/png">
     <link rel="icon" type="image/svg+xml" href="icone.svg">
@@ -22,9 +23,9 @@
         <input class="input" type="text" placeholder="Remettez les lettres dans l'ordre..." maxlength="25">
         <button class="btn bg" id="btnValider">Valider</button>
         <div class="timer bg">Temps restant: 10</div>
+        <div class="score bg">Score: 0</div>
+        <div class="scoreBest bg">Meilleur score: 0</div>
       </div>
-      <div class="score bg">Score: 0</div>
-      <div class="scoreBest bg">Meilleur score: 0</div>
       <a class="footer bg" href="https://github.com/Vital-Vuillaume">ⓒ 2024 - Vital production</a>
     </div>
   </body>

text-reverse.css

@@ -41,6 +41,7 @@ body {
     padding: 7px;
     position: absolute;
     width: max-content;
+    transition: 1.2s;
 
 }
 
@@ -68,13 +69,14 @@ body {
     text-align: center;
     bottom: 325px;
     height: max-content;
+    border-radius: 0px;
+    transition: 1.2s;
 
 }
 
 .btn {
 
     border: none;
-    transition: 1.2s;
     cursor: pointer;
     font-size: 1em;
 
@@ -171,4 +173,27 @@ body {
         height: 90vh;
 
     }
+
+    .input:focus {
+
+        bottom: 100px;
+
+    }
+
+    .input:focus ~ .score {
+        display: none;
+    }
+
+    .input:focus ~ .scoreBest {
+        display: none;
+    }    
+
+    .input:focus ~ .btn:nth-child(2) {
+        bottom: 70px;
+    }
+
+    .input:focus ~ .timer {
+        bottom: 70px;
+        left: 110px;
+    }
 }

text-reverse.js

@@ -15,25 +15,6 @@ const scoreBestTxt = document.querySelector(".scoreBest");
 const popup = document.querySelector(".popup");
 const popupBtn = document.getElementById("btnOk");
 
-const words = `
-bournmouth
-plage
-école
-éduactionfirst
-unionhouse
-lunch
-subway
-papajones
-ririburger
-skyline
-picadili
-cantine
-cash
-bitcoin
-crypto
-avion
-`;
-
 const wordArray = words.trim().split('\n');
 
 let score = 0;

word.js

@@ -0,0 +1,18 @@
+const words = `
+bournmouth
+plage
+école
+éduactionfirst
+unionhouse
+lunch
+subway
+papajones
+ririburger
+skyline
+picadili
+cantine
+cash
+bitcoin
+crypto
+avion
+`;