Commit 8219d31
Changed files (3)
braille.js
@@ -0,0 +1,39 @@
+// Grid layout: 2 cols x 4 rows (left-to-right, top-down)
+// Braille dots: 1 4
+// 2 5
+// 3 6
+// 7 8
+const dotOrder = [1, 4, 2, 5, 3, 6, 7, 8];
+
+// checkboxes updates
+const checkboxes = Array.from(document.querySelectorAll('.dot'));
+const charBtn = document.getElementById('charBtn');
+const codePointSpan = document.getElementById('codePoint');
+
+checkboxes.forEach(cb => cb.addEventListener('change', updateBraille))
+function updateBraille() {
+ let value = 0;
+ checkboxes.forEach((cb, i) => {
+ if (cb.checked) {
+ value |= (1 << (dotOrder[i] -1));
+ }
+ });
+ const codePoint = 0x2800 + value;
+ charBtn.textContent = String.fromCodePoint(codePoint);
+ codePointSpan.textContent = 'U+' + codePoint.toString(16).toUpperCase().padStart(4, '0');
+}
+
+updateBraille();
+
+charBtn.addEventListener('click', () => {
+ const char = charBtn.textContent;
+ const original = charBtn.textContent;
+ navigator.clipboard.writeText(char).then(() => {
+ charBtn.textContent = '✅';
+ setTimeout(() => charBtn.textContent = original, 1000);
+ }).catch(err => {
+ charBtn.textContent = '❌';
+ console.error("copying char to clipboard");
+ setTimeout(() => coppyCharBtn.textContent = original, 1000);
+ });
+});
index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Braille Dot Generator</title>
+ <link href="style.css" rel="stylesheet">
+</head>
+<body>
+ <div id="brailleGrid" class="grid">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ <input type="checkbox" class="dot">
+ </div>
+ <div class="result">
+ <div>Copy: <button id="charBtn" class="btnText" >⠿</button></div>
+ <div>Code Point: <span id="codePoint">U+28FF</span></div>
+ </div>
+ <script src="braille.js"></script>
+</body>
+</html>
+
style.css
@@ -0,0 +1,24 @@
+body {
+ font-family: sans-serif;
+ display: flex;
+ align-items: center;
+ padding: 2em;
+ gap: 3em;
+}
+.grid {
+ display: grid;
+ grid-template-columns: repeat(2, 40px);
+ grid-template-rows: repeat(4, 40px);
+ gap: 10px;
+}
+.result {
+ font-size: 1.5em;
+ line-height: 1.8em;
+}
+.btnText {
+ font-size: 2em;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ font-family: inherit;
+}