css-codes/script.js at main · AkhilsaiSammeta/css-codes · GitHub

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
// // // document.querySelector('.color-picker').addEventListener('mousemove', function(event) {
// // //     const rect = event.target.getBoundingClientRect();
// // //     const x = event.clientX - rect.left;
// // //     const y = event.clientY - rect.top;
// // //     const r = Math.floor(x / rect.width * 255);
// // //     const g = Math.floor(y / rect.height * 255);
// // //     const b = Math.floor((r + g) / 2);
// // //     const rgb = `rgb(${r}, ${g}, ${b})`;
// // //     event.target.style.backgroundColor = rgb;
// // //     document.getElementById('red').textContent = `R: ${r}`;
// // //     document.getElementById('green').textContent = `G: ${g}`;
// // //     document.getElementById('blue').textContent = `B: ${b}`;
// // // });
// // document.querySelector('.color-picker').addEventListener('mousemove', function(event) {
// //   const rect = event.target.getBoundingClientRect();
// //   const x = event.clientX - rect.left;
// //   const y = event.clientY - rect.top;
// //   const r = Math.floor(x / rect.width * 255);
// //   const g = Math.floor(y / rect.height * 255);
// //   const b = Math.floor((r + g) / 2);
// //   const rgb = `rgb ${r},${g},${b}`;
// //   event.target.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
// //   document.getElementById('color-code').textContent = rgb;
// // });

// let isColorSelected = false;

// document.querySelector('.color-picker').addEventListener('mousemove', function(event) {
//   if (!isColorSelected) {
//     const rect = event.target.getBoundingClientRect();
//     const x = event.clientX - rect.left;
//     const y = event.clientY - rect.top;
//     const r = Math.floor(x / rect.width * 255);
//     const g = Math.floor(y / rect.height * 255);
//     const b = Math.floor((r + g) / 2);
//     const rgb = `rgb(${r},${g},${b})`;
//     event.target.style.backgroundColor = rgb;
//     document.getElementById('color-code').textContent = rgb;
//   }
// });

// document.querySelector('.color-picker').addEventListener('click', function(event) {
//   if (isColorSelected) {
//     isColorSelected = false;
//     event.target.style.backgroundColor = selectedColor;
//   } else {
//     isColorSelected = true;
//     selectedColor = event.target.style.backgroundColor;
//     document.getElementById('color-code').textContent = rgb;
//   }
// });
let selectedColor = '';
let isColorSelected = false;

document.querySelector('.color-picker').addEventListener('mousemove', function(event) {
  if (!isColorSelected) {
    const rect = event.target.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const r = Math.floor(x / rect.width * 255);
    const g = Math.floor(y / rect.height * 255);
    const b = Math.floor((r + g) / 2);
    const rgb = `rgb(${r},${g},${b})`;
    event.target.style.backgroundColor = rgb;
    document.getElementById('color-code').textContent = rgb;
  }
});

document.querySelector('.color-picker').addEventListener('click', function(event) {
  if (isColorSelected) {
    isColorSelected = false;
    event.target.style.backgroundColor = selectedColor;
  } else {
    isColorSelected = true;
    selectedColor = event.target.style.backgroundColor;
    document.getElementById('color-code').textContent = selectedColor;
  }
});

// Copy color code to clipboard when copy button is clicked
document.getElementById('copy-button').addEventListener('click', function() {
  const colorCode = document.getElementById('color-code').textContent;
  navigator.clipboard.writeText(colorCode).then(function() {
    alert('Color code copied to clipboard: ' + colorCode);
  }, function(err) {
    console.error('Failed to copy color code: ', err);
  });
});