-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (73 loc) · 2.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project: Etch-a-Sketch</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<!-- <script src="js/app.js"></script> -->
<script>
function makeSketch(){
//create button make sketch
const body = document.querySelector('body');
const btnCreateSquare = document.createElement('button');
btnCreateSquare.textContent = 'Create Sketch';
btnCreateSquare.classList.add('make-square');
body.appendChild(btnCreateSquare);
const btnReset = document.createElement('button');
btnReset.classList.add('reset');
btnReset.textContent = 'RESET';
//change color randomly
const changeColor = ()=> {
const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const randomColor = Math.floor(Math.random() * rainbow.length);
// event.target.style.backgroundColor = rainbow[randomColor];
event.target.style.backgroundColor = '#f3f3f3';
};
const makeGrid = ()=> {
const numberOfSquare = prompt('Enter of Square', '..max 100');
//validate
if (!(isNaN(numberOfSquare) || numberOfSquare > 100 || numberOfSquare <= 0)) {
//make container
const container = document.createElement('div');
container.classList.add('container');
container.style.gridTemplateColumns = `repeat(${numberOfSquare}, 1fr)`;
body.appendChild(container);
body.appendChild(btnReset);
for (i = 0; i < +numberOfSquare * +numberOfSquare; i++){
const square = document.createElement('div');
square.setAttribute('class', `square sq${i}`);
container.appendChild(square);
//darken color ever hover
const darkenSquare = () => {
let currentBrightness = square.dataset.brightness || 100;
currentBrightness = parseInt(currentBrightness) - 10;
if (currentBrightness >= 0) {
square.style.filter = `brightness(${currentBrightness}%)`;
square.dataset.brightness = currentBrightness;
}
}; //
square.addEventListener('mouseover', darkenSquare);
btnReset.addEventListener('click', ()=> {
square.style.backgroundColor = 'white';
})
}
}
};
//Create button action
btnCreateSquare.addEventListener('click', ()=> {
const chkContainer = document.querySelector('.container');
if (chkContainer !==null) {
chkContainer.remove();
makeGrid();
} else {
makeGrid();
}
});
}
makeSketch();
</script>
</body>
</html>