123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- // select elements
- let codeTxtL1 = document.getElementById("codeTxtL1")
- let codeTxtL2 = document.getElementById("codeTxtL2")
- let button = document.getElementById("buttons")
-
- 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 (i > 8){
- if (mdp[i] === ' '){
- fillBlanks(codeTxtL2)
- } else {
- fillCases(codeTxtL2)
- }
- } else {
- 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)
|