-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (118 loc) · 4.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="memoryGame.css">
</head>
<body>
<script>
//document.getElementById("cardone").innerHTML = "New text!";
</script>
<h1 class="header"> Match the Letters !</h1>
<div class="container">
<div class="card" id="card1">J</div>
<div class="card">A</div>
<div class="card">Mycard3</div>
<div class="card">Mycard4</div>
<div class="card">Mycard5</div>
<div class="card">Mycard6</div>
<div class="card">Mycard7</div>
<div class="card">Mycard8</div>
<div class="card">Mycard9</div>
<div class="card">Mycard10</div>
<div class="card">Mycard11</div>
<div class="card">Mycard12</div>
</div>
// sound below courtesy of Rentalmar from www.freesounds.org
<audio id="audio" src="sounds\264981__renatalmar__sfx-magic (1).wav" autostart="false" ></audio>
<script>
document.getElementById("card1").innerHTML = "B";
//CREATE AN ARRAY OF 12 LETTERS
let letters =['J','A','K','E','J','A','K','E','B','B','H','H'];
//Test it
console.log(letters.length);
//print array contents
for (i = 0; i < 12; i++) {
console.log(letters[i]);
}
//shuffle the position of letters in the arrray
letters.sort(function(a,b){return 0.5 -Math.random()});
//check new array order in console
for (i = 0; i < 12; i++) {
console.log(`Array Position is ${i}` + `contains the letter ${letters[i]}`);
}
// Get all the element with the claas Name Card and then save them into a variable (a collection) called allCardElements
var allCardElements = document.getElementsByClassName("card");
//iterate throgh all card elements and then populate the inner html with the letter G.
for (i = 0; i < 12; i++) {
allCardElements[i].innerHTML ='G';
}
//iterate throgh all card elements and then populate the inner html with a letter from the shuffled array of letters.
for (i = 0; i < 12; i++) {
allCardElements[i].innerHTML =letters[i];
}
// use the get elements by class name to return a htmlcollection with every class name "container"
let containerVariable = document.getElementsByClassName("container");
// confirm the type of ContainerVariable in the console
console.log(containerVariable.toString());
//use the HTMLCollection.item(index) to get the single element , the container div from the collection
containerVariable = containerVariable.item(0);
//confirm thats what I've got
console.log(containerVariable.toString());
//variable to count number of selections and variable to store card clicked for comparison, had to move the initial setting of it out of the event listener becuase it was reinitialising it each time.
let count = 0;
//variables to store the string i.e letter from the selected card
let firstCard;
let secondCard;
//check function to check if the letters match
const check = function check () {
if (firstCard.innerHTML === secondCard.innerHTML) {
var correctSound = document.getElementById('audio');
correctSound.play();
window.alert("MATCHED PAIRS");
let selected = document.querySelectorAll('.selected');
selected.forEach(card => {
card.classList.remove('selected');
card.innerHTML = '✔';
});
}
else {
window.alert("NO MATCH");
let selected = document.querySelectorAll('.selected');
selected.forEach(card => {
card.classList.remove('selected');
});
}
}
const resetcount = function resetcount () {
count = 0;
};
containerVariable.addEventListener('click', function (event) {
//debug window.alert("Container Class Clicked");
console.log(event.toString());
let clicked = event.target;
console.log( clicked.toString());
console.log(clicked.innerHTML);
// debug window.alert(clicked.className);
// check if the clicked item was a card or a container
//Log the class name of the clicked element.
console.log (clicked.className);
if (clicked.className === 'container' | clicked.className === 'card selected') {
return;
}
clicked.classList.add('selected');
console.log(clicked.classList);
count = count + 1;
// debug to check count increment window.alert(count);
// debug to check count == 1 ?
//window.alert("count is one"): window.alert("count is two");
count == 1 ?
firstCard = clicked:
secondCard = clicked;
if (count == 2) {
resetcount();
check();
}
});
</script>
</body>
</html>