-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
122 lines (91 loc) · 2.92 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
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
/* used a class to have all the features here, easy to handle manage and update */
class Color {
constructor (hex, element){
this.hex = hex;
this.element = element;
this.locked = false;
}
setHex (hex) {
this.hex = hex;
this.element.style.backgroundColor = hex;
this.element.querySelector('.color-input').value = hex;
/* changes the value of the color */
}
setLocked (locked) {
this.locked = locked;
/* checks if locked,*/
if (locked){
/* if unlocked, locks the color */
this.element.classList.add('locked');
/* changes the icon */
this.element.querySelector('img').src = 'icons/lock-closed.svg'
} else {
/* if locked, unlocks the color */
this.element.classList.remove('locked');
/* changes the icon */
this.element.querySelector('img').src = 'icons/lock-open.svg'
}
}
toggleLocked () {
this.setLocked(!this.locked);
}
generateHex () {
if (this.locked){
return;
}
const chars = '0123456789ABCDEF';
let hex = '#';
for (let i = 0; i < 6; i++){
hex += chars[Math.floor(Math.random() * 16)];
}
this.setHex(hex);
}
copyToClipboard(){
const input = this.element.querySelector('.color-input');
input.select();
document.execCommand('copy');
input.blur();
this.element.classList.add('copied');
setTimeout(() => {
this.element.classList.remove('copied');
}, 1000);
}
}
const color_elements = document.querySelectorAll('.colors .color');
/* preparing empty array for colors push */
const colors = [];
/* actually generating color with a for cycle */
for (let i = 0; i < color_elements.length; i++){
const color_element = color_elements[i];
const input = color_element.querySelector('.color-input');
const lock_toggle = color_element.querySelector('.lock-toggle');
const copy_hex = color_element.querySelector('.copy-hex');
const hex = input.value;
/* declare new color */
const color = new Color(hex, color_element);
/* anytime we change anything a new value is set*/
input.addEventListener('input', ()=> color.setHex(e.target.value));
/* uses the toggle func to lock/unlock */
lock_toggle.addEventListener('click', ()=> color.toggleLocked());
/* copy to clipboard function */
copy_hex.addEventListener('click', ()=> color.copyToClipboard());
/* new color is generated */
color.generateHex();
colors.push(color);
}
/* SOME MORE M A G I C */
/* see also = making things work */
document.querySelector('.generator-button').addEventListener('click', () => {
/* event listener for the button, generates new colors */
for (let i = 0; i < colors.length; i++){
colors[i].generateHex();
}
});
document.addEventListener('keypress', (e)=> {
/* event listener for the space-bar, generates new colors */
if (e.code.toLowerCase() === 'space'){
for (let i = 0; i < colors.length; i++){
colors[i].generateHex();
}
}
});