-
Notifications
You must be signed in to change notification settings - Fork 2
/
main.js
89 lines (73 loc) · 1.91 KB
/
main.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
let grid = document.querySelector('.main')
function createMiniDiv(x , y) {
let mini_div = document.createElement('div')
mini_div.classList.add('mini_div')
mini_div.classList.add('mini-div-' + x + '-' + y)
return mini_div
}
function createGrid() {
for (let x = 0; x < 7; x++) {
for (let y = 0; y < 5; y++) {
let mini_div = createMiniDiv(x, y)
grid.appendChild(mini_div)
}
}
}
createGrid()
let clicked_divs = []
for(let i = 0 ; i < 7 ; i++){
let y_val = [] ;
for(let j = 0 ; j < 5 ; j++){
y_val.push(0) ;
}
clicked_divs.push(y_val) ;
}
grid.addEventListener('click', function(e) {
if(e.target.classList.contains('mini_div')){
let class_name = e.target.classList[1]
console.log(class_name);
let x = class_name.split('-')[2]
let y = class_name.split('-')[3]
if(clicked_divs[x][y] === 0){
e.target.style.backgroundColor = 'red'
clicked_divs[x][y] = 1
} else {
e.target.style.backgroundColor = '#00000000'
clicked_divs[x][y] = 0
}
console.log(clicked_divs);
}
})
let reset = document.querySelector('.reset')
reset.addEventListener('click', function(){
for(let i = 0 ; i < 7 ; i++){
for(let j = 0 ; j < 5 ; j++){
clicked_divs[i][j] = 0
let class_name = '.mini-div-' + i + '-' + j
let div = document.querySelector(class_name)
div.style.backgroundColor = '#00000000'
}
}
})
let strings = [] ;
document.querySelector('.show_code').addEventListener('click', function(){
for(let i = 0 ; i < 5 ; i++){
let str = '' ;
for(let j = 0 ; j < 7 ; j++){
if(clicked_divs[j][i] === 1){
str += '1' ;
}
else{
str += '0' ;
}
}
str = '0' + str.split('').reverse().join('') + 'b'
strings.push(str) ;
}
console.log(strings) ;
let disp = document.querySelector('.display_code>p')
disp.innerHTML = `
DB ${strings.join(", ")}
`
strings = [] ;
})