reset okay without keyboard

script.js

@@ -1,9 +1,13 @@
 var reponse = "";
 var word ="";
-const good_letter_color = "#8dc689";
-const bad_letter_color = "#e57373";
-const mid_letter_color = "#e3e466";
+const good_letter_color = "#98D98B";
+const good_letter_text_color = "#284D32";
+const bad_letter_color = "#EB9181";
+const bad_letter_text_color = "#52201A";
+const mid_letter_color = "#F8EEA0";
+const mid_letter_text_color = "#665B26";
 const base_letter_color = "#f3d7c7" ;
+const base_letter_text_color = "#632D17" ;
 var free_box = [1,1];
 let arrWords;
 readTextFile("words.txt");
@@ -12,23 +16,30 @@ aleatoire();
 setMyKeyDownListener();
 
 function change_color_good_letter(coord){
+    var case_div = document.getElementById(coord);
+    case_div.style.color = good_letter_text_color;
     coord = "case".concat(coord)
     console.log(coord)
-    var case_div = document.getElementById(coord);
+    case_div = document.getElementById(coord);
     case_div.style.backgroundColor = good_letter_color;
 }
 
+
 function change_color_bad_letter(coord){
+    var case_div = document.getElementById(coord);
+    case_div.style.color = bad_letter_text_color;
     coord = "case".concat(coord)
     console.log(coord)
-    var case_div = document.getElementById(coord);
+    case_div = document.getElementById(coord);
     case_div.style.backgroundColor = bad_letter_color;
 }
 
 function change_color_mid_letter(coord){
+    var case_div = document.getElementById(coord);
+    case_div.style.color = mid_letter_text_color;
     coord = "case".concat(coord)
     console.log(coord)
-    var case_div = document.getElementById(coord);
+    case_div = document.getElementById(coord);
     case_div.style.backgroundColor = mid_letter_color;
 }
 
@@ -87,10 +98,7 @@ function Enter() {
     if (verifWord() && free_box[0]==6) {
         write_result(verifLettres(word));
         if(word != reponse){
-            //afficher dans p
-            if (false){
-                recommencer();
-            }
+            document.getElementById("info").innerHTML=("The correct word was <b> "+ reponse +"</b>. <button style=\"width:100px;\" type=\"button Z\" onclick=\"recommencer()\">Start Over</button>");
         }
     }
 }
@@ -130,7 +138,7 @@ function write_result(verif){
         }
     }
     if (good_letter == 5){
-        //afficher dans p
+        document.getElementById("info").innerHTML=("Congratulations! The correct word was <b> "+ reponse +"</b>. <button style=\"width:100px;\" type=\"button Z\" onclick=\"recommencer()\">Start Over</button>");
     }
 }
 
@@ -139,13 +147,15 @@ function recommencer (){
     let coord;
     for (let i=1; i<6; i++){
         for (let j=1; j<7; j++){
-            coord = j.toString().concat(i.toString());
-            var case_div = document.getElementById(coord);
-            console.log(coord);
+            coord = (j.toString() + i.toString());
             document.getElementById(coord).innerHTML = "";
+            var case_div = document.getElementById("case" +coord);
             case_div.style.backgroundColor = base_letter_color;
+            case_div = document.getElementById(coord);
+            case_div.style.color = base_letter_text_color;
         }
     }
+    document.getElementById("info").innerHTML=("");
     aleatoire();
     free_box = [1,1];
 }

styles.css

@@ -2,14 +2,13 @@
     margin: 0;
     padding: 0;
     font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    
+    color:rgb(99, 45, 23);
 }
 header{ /* Apparence de l'en-tete */
     background-color: white;
     text-align: center;
     padding-top: 5px;
     font-size: 35px;
-    color:rgb(99, 45, 23);
     font-weight: bold;
 }
 
@@ -23,6 +22,7 @@ section{ /* Alignement du tableau de jeu */
 }
 .grille_haut { /* Alignement du tableau de jeu */
     display: flex;
+    padding-top: 5%;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -74,7 +74,7 @@ footer div {
     padding-bottom: 5px;
 }
 
-.clavier div button { /* Apparence touches clavier */
+button { /* Apparence touches clavier */
     padding-bottom: 5px;
     width: 45px;
     height: 45px;
@@ -86,7 +86,7 @@ footer div {
     border:none;
 }
 
-.clavier div button:hover{ /* Apparence touches clavier quand suvolées */
+button:hover{ /* Apparence touches clavier quand suvolées */
     background-color:rgb(75, 24, 15);
     color : rgb(245, 230, 230);
 }