|
@@ -1,24 +1,93 @@
|
1
|
1
|
// select elements
|
2
|
|
-let codeTxt = document.getElementById("codeTxt")
|
|
2
|
+let codeTxtL1 = document.getElementById("codeTxtL1")
|
|
3
|
+let codeTxtL2 = document.getElementById("codeTxtL2")
|
|
4
|
+let button = document.getElementById("buttons")
|
3
|
5
|
|
4
|
|
-let mdp = "Le Mot de Passe"
|
|
6
|
+let mdp = "Le petit chaperon rouge"
|
|
7
|
+let mdpletters = mdp.replace(/ /g,'');
|
|
8
|
+let letters = []
|
|
9
|
+
|
|
10
|
+console.log(mdpletters);
|
5
|
11
|
|
6
|
12
|
// functions
|
|
13
|
+
|
|
14
|
+function fillCases(div){
|
|
15
|
+ var letterCase = document.createElement("input");
|
|
16
|
+ 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;"
|
|
17
|
+ div.appendChild(letterCase)
|
|
18
|
+ letters.push(letterCase)
|
|
19
|
+}
|
|
20
|
+
|
|
21
|
+function fillBlanks(div){
|
|
22
|
+ var spaceCase = document.createElement("div")
|
|
23
|
+ spaceCase.style.cssText = "width:3vw; height:5vh; margin:0vw 0.5vw 0vw 0.5vw; ";
|
|
24
|
+ div.appendChild(spaceCase)
|
|
25
|
+}
|
|
26
|
+
|
7
|
27
|
function styleMdp() {
|
8
|
28
|
for (let i=0;i<mdp.length;i++){
|
9
|
|
- if (mdp[i] === ' '){
|
10
|
|
- var spaceCase = document.createElement("div")
|
11
|
|
- spaceCase.style.cssText = "width:3vw;height:5vh;margin:0vw 0.5vw 0vw 0.5vw;";
|
12
|
|
- codeTxt.appendChild(spaceCase)
|
|
29
|
+
|
|
30
|
+ if (i > 8){
|
|
31
|
+ if (mdp[i] === ' '){
|
|
32
|
+ fillBlanks(codeTxtL2)
|
|
33
|
+ } else {
|
|
34
|
+ fillCases(codeTxtL2)
|
|
35
|
+ }
|
13
|
36
|
} else {
|
14
|
|
- var letterCase = document.createElement("input");
|
15
|
|
- letterCase.style.cssText = "background-color:white;margin:0vw 0.5vw 0vw 0.5vw;width:3vw;height:5vh"
|
16
|
|
- codeTxt.appendChild(letterCase)
|
|
37
|
+ if (mdp[i] === ' '){
|
|
38
|
+ fillBlanks(codeTxtL1)
|
|
39
|
+ } else {
|
|
40
|
+ fillCases(codeTxtL1)
|
|
41
|
+ }
|
17
|
42
|
}
|
18
|
43
|
|
19
|
44
|
}
|
20
|
45
|
}
|
21
|
46
|
|
|
47
|
+function colorLetters(index){
|
|
48
|
+ for (let i=0;i<letters.length;i++){
|
|
49
|
+ if (mdpletters[i] === mdpletters[index]){
|
|
50
|
+ 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;"
|
|
51
|
+ }
|
|
52
|
+}
|
|
53
|
+}
|
|
54
|
+
|
|
55
|
+function decolorLetters(){
|
|
56
|
+ for (let i=0;i<letters.length;i++){
|
|
57
|
+ 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;"
|
|
58
|
+ }
|
|
59
|
+}
|
|
60
|
+
|
|
61
|
+function changeSameLetters(event,index){
|
|
62
|
+ for (let i=0;i<letters.length;i++){
|
|
63
|
+ if (mdpletters[i] === mdpletters[index]){
|
|
64
|
+ letters[i].value = event.target.value
|
|
65
|
+ }
|
|
66
|
+}
|
|
67
|
+}
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+function verif(){
|
|
71
|
+ for (let i=0;i<letters.length;i++){
|
|
72
|
+ if (mdpletters[i] === letters[i].value){
|
|
73
|
+ 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;"
|
|
74
|
+ } else {
|
|
75
|
+ 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;"
|
|
76
|
+ }
|
|
77
|
+ }
|
|
78
|
+}
|
|
79
|
+
|
22
|
80
|
styleMdp()
|
23
|
81
|
|
24
|
82
|
// listeners
|
|
83
|
+for (let i=0;i<letters.length;i++){
|
|
84
|
+ letters[i].addEventListener("focus",function(){
|
|
85
|
+ colorLetters(i)
|
|
86
|
+ })
|
|
87
|
+ letters[i].addEventListener("blur",decolorLetters)
|
|
88
|
+ letters[i].addEventListener("change",function(event){
|
|
89
|
+ changeSameLetters(event,i)
|
|
90
|
+ })
|
|
91
|
+}
|
|
92
|
+
|
|
93
|
+button.addEventListener("click",verif)
|