1// Grid layout: 2 cols x 4 rows (left-to-right, top-down)
 2// Braille dots: 1 4
 3//               2 5
 4//               3 6
 5//               7 8
 6const dotOrder = [1, 4, 2, 5, 3, 6, 7, 8];
 7
 8// checkboxes updates
 9const checkboxes = Array.from(document.querySelectorAll('.dot'));
10const charBtn = document.getElementById('charBtn');
11const codePointSpan = document.getElementById('codePoint');
12
13checkboxes.forEach(cb => cb.addEventListener('change', updateBraille))
14function updateBraille() {
15  let value = 0;
16  checkboxes.forEach((cb, i) => {
17    if (cb.checked) {
18      value |= (1 << (dotOrder[i] -1));
19    }	
20  });
21  const codePoint = 0x2800 + value;
22  charBtn.textContent = String.fromCodePoint(codePoint);
23  codePointSpan.textContent = 'U+' + codePoint.toString(16).toUpperCase().padStart(4, '0');
24}
25
26updateBraille(); 
27
28charBtn.addEventListener('click', () => {
29	const char = charBtn.textContent;
30	const original = charBtn.textContent;
31	navigator.clipboard.writeText(char).then(() => {
32		charBtn.textContent = '✅';
33		setTimeout(() => charBtn.textContent = original, 1000);
34	}).catch(err => {
35		charBtn.textContent = '❌';
36		console.error("copying char to clipboard");
37		setTimeout(() => coppyCharBtn.textContent = original, 1000);
38	});
39});