Second version cypto_seul

CSS/crypto_seul.css

             }
 
             #codeBlock{
+                opacity:0;
+                animation: fade 2s forwards 1s;
                 display:flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-around;
                 margin-top:5vh;
+                width:80vw;
+                height:20vh;
             }
 
-                #codeTxt{
+                #codeTxtL1{
+                    display:flex;
+                    justify-content: center;
+                    align-items: center;
+
+                }
+
+                #codeTxtL2{
                     display:flex;
+                    justify-content: center;
+                    align-items: center;
                 }
 
             @keyframes fade {
                 justify-content: space-around;
                 margin-top:5vh;
                 opacity:0;
+                animation: fade 2s forwards 2s;
             }
 
             .button {
                 outline: none;
                 border:0.2vw solid #b9b9b9;
                 border-radius: 4vw;
-                width:20vw;
+                width:15vw;
                 padding: 1vw 1.2vw 1vw 1.2vw;
                 color: black;
                 font-family: 'Special Elite', cursive;
                 font-size: 1.5vw;
-                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
+                background-image: linear-gradient(to top, black -50%, #057B26 80%);
                 cursor : pointer;
                 display: flex;
                 justify-content: center;
             }
 
             .button:active {
-                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
+                background-image: linear-gradient(to top, #057B26 20%, black 150%);
             }
 
     footer{

CSS/etrange_decouverte.css

     display:flex;
     flex-direction: column;
     opacity:0;
+    z-index:-1;
 }
 
 

HTML/crypto_seul.html

             <article id="text">
                 <p id="p1">A vous de deviner le mot de passe !</p>
                 <div id="codeBlock">
-                    <div id="codeTxt"></div>
+                    <div id="codeTxtL1"></div>
+                    <div id="codeTxtL2"></div>
                 </div>
             </article>
             <div id="buttons">

HTML/menu.html

     <main>
         <section>
             <article id="logoBlock">
-                <img id="logo" src="../Images/Logo.png" alt="Logo"/>
+                <img id="logo" src="../Images/BigLogo.png" alt="Logo"/>
             </article>
             <article>
                 <span>

JAVASCRIPT/crypto_seul.js

 // select elements
-let codeTxt = document.getElementById("codeTxt")
+let codeTxtL1 = document.getElementById("codeTxtL1")
+let codeTxtL2 = document.getElementById("codeTxtL2")
+let button = document.getElementById("buttons")
 
-let mdp = "Le Mot de Passe"
+let mdp = "Le petit chaperon rouge"
+let mdpletters = mdp.replace(/ /g,'');
+let letters = []
+
+console.log(mdpletters);
 
 // functions
+
+function fillCases(div){
+    var letterCase = document.createElement("input");
+    letterCase.style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
+    div.appendChild(letterCase)
+    letters.push(letterCase)
+}
+
+function fillBlanks(div){
+    var spaceCase = document.createElement("div")
+    spaceCase.style.cssText = "width:3vw; height:5vh; margin:0vw 0.5vw 0vw 0.5vw; ";
+    div.appendChild(spaceCase)
+}
+
 function styleMdp() {
     for (let i=0;i<mdp.length;i++){
-        if (mdp[i] === ' '){
-            var spaceCase = document.createElement("div")
-            spaceCase.style.cssText = "width:3vw;height:5vh;margin:0vw 0.5vw 0vw 0.5vw;";
-            codeTxt.appendChild(spaceCase)
+
+        if (i > 8){
+            if (mdp[i] === ' '){
+                fillBlanks(codeTxtL2)
+            } else {
+                fillCases(codeTxtL2)
+            }
         } else {
-            var letterCase = document.createElement("input");
-            letterCase.style.cssText = "background-color:white;margin:0vw 0.5vw 0vw 0.5vw;width:3vw;height:5vh"
-            codeTxt.appendChild(letterCase)
+            if (mdp[i] === ' '){
+                fillBlanks(codeTxtL1)
+            } else {
+                fillCases(codeTxtL1)
+            }
         }
         
     }
 }
 
+function colorLetters(index){
+    for (let i=0;i<letters.length;i++){
+        if (mdpletters[i] === mdpletters[index]){
+            letters[i].style.cssText = "background-color:#014bac; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
+        }
+}
+}
+
+function decolorLetters(){
+    for (let i=0;i<letters.length;i++){
+            letters[i].style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
+    }
+}
+
+function changeSameLetters(event,index){
+    for (let i=0;i<letters.length;i++){
+        if (mdpletters[i] === mdpletters[index]){
+            letters[i].value = event.target.value
+        }
+}
+}
+
+
+function verif(){
+    for (let i=0;i<letters.length;i++){
+        if (mdpletters[i] === letters[i].value){
+            letters[i].style.cssText = "background-color:#057B26; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
+        } else {
+            letters[i].style.cssText = "background-color:#BF0909; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
+        }
+    }
+}
+
 styleMdp()
 
 // listeners
+for (let i=0;i<letters.length;i++){
+    letters[i].addEventListener("focus",function(){
+        colorLetters(i)
+    })
+    letters[i].addEventListener("blur",decolorLetters)
+    letters[i].addEventListener("change",function(event){
+        changeSameLetters(event,i)
+    })
+}
+
+button.addEventListener("click",verif)