-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
255 lines (250 loc) · 12.7 KB
/
app.js
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
let b1 = document.getElementById('b1');
let b2 = document.getElementById('b2');
let b3 = document.getElementById('b3');
let b4 = document.getElementById('b4');
let b5 = document.getElementById('b5');
let b6 = document.getElementById('b6');
let b7 = document.getElementById('b7');
let b8 = document.getElementById('b8');
let b9 = document.getElementById('b9');
let h2 = document.getElementById('h2');
let outerbox = document.getElementById('outerbox');
let start = document.getElementById('start');
let div = document.getElementById('box');
let flag =1;
start.addEventListener("click",()=>{
let b1 = document.createElement("button");
let b2 = document.createElement("button");
let h3 = document.createElement("h3");
h3.textContent="which is your favourite ?"
b1.textContent="X";
b2.textContent="O";
h3.setAttribute('class','h3');
b1.setAttribute('class','start1');
b2.setAttribute('class','start2');
div.appendChild(h3);
div.appendChild(b1);
div.appendChild(b2);
b1.addEventListener("click",()=>{
let x = "X";
let y = "O";
show(x,y);
outerbox.removeChild(div);
})
b2.addEventListener("click",()=>{
let x = "X";
let y = "O";
show(y,x);
outerbox.removeChild(div);
})
})
function show(x,y){
b1.addEventListener('click',() =>{
if(flag===1)
{
b1.textContent=x;
flag=-1;
}
else{
b1.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b2.addEventListener('click',() =>{
if(flag===1)
{
b2.textContent=x;
flag=-1;
}
else{
b2.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b3.addEventListener('click',() =>{
if(flag===1)
{
b3.textContent=x;
flag=-1;
}
else{
b3.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b4.addEventListener('click',() =>{
if(flag===1)
{
b4.textContent=x;
flag=-1;
}
else{
b4.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b5.addEventListener('click',() =>{
if(flag===1)
{
b5.textContent=x;
flag=-1;
}
else{
b5.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b6.addEventListener('click',() =>{
if(flag===1)
{
b6.textContent=x;
flag=-1;
}
else{
b6.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b7.addEventListener('click',() =>{
if(flag===1)
{
b7.textContent=x;
flag=-1;
}
else{
b7.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b8.addEventListener('click',() =>{
if(flag===1)
{
b8.textContent=x;
flag=-1;
}
else{
b8.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
b9.addEventListener('click',() =>{
if(flag===1)
{
b9.textContent=x;
flag=-1;
}
else{
b9.textContent=y;
flag=1;
}
if((b1.textContent==x&&b2.textContent==x&&b3.textContent==x)||(b4.textContent==x&&b5.textContent==x&&b6.textContent==x)||(b7.textContent==x&&b8.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b4.textContent==x&&b7.textContent==x)||(b2.textContent==x&&b5.textContent==x&&b8.textContent==x)||(b3.textContent==x&&b6.textContent==x&&b9.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==x&&b5.textContent==x&&b9.textContent==x)||(b3.textContent==x&&b5.textContent==x&&b7.textContent==x))
h2.textContent="X wins";
else if((b1.textContent==y&&b2.textContent==y&&b3.textContent==y)||(b4.textContent==y&&b5.textContent==y&&b6.textContent==y)||(b7.textContent==y&&b8.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b4.textContent==y&&b7.textContent==y)||(b2.textContent==y&&b5.textContent==y&&b8.textContent==y)||(b3.textContent==y&&b6.textContent==y&&b9.textContent==y))
h2.textContent="O wins";
else if((b1.textContent==y&&b5.textContent==y&&b9.textContent==y)||(b3.textContent==y&&b5.textContent==y&&b7.textContent==y))
h2.textContent="O wins";
});
}
// }