bksp

2 files changed, 28 insertions, 27 deletions

diff --git a/index.html b/index.html
index bc3f2db..ebd1e1d 100644
--- a/index.html
+++ b/index.html
@@ -60,36 +60,37 @@
     </div>
         <div class="keyboard">
             <div class="kbrow">
-                <div class="key">Q</div>
-                <div class="key">W</div>
-                <div class="key">E</div>
-                <div class="key">R</div>
-                <div class="key">T</div>
-                <div class="key">Y</div>
-                <div class="key">U</div>
-                <div class="key">I</div>
-                <div class="key">O</div>
-                <div class="key">P</div>
+                <div class="key" data-key="Q">Q</div>
+                <div class="key" data-key="W">W</div>
+                <div class="key" data-key="E">E</div>
+                <div class="key" data-key="R">R</div>
+                <div class="key" data-key="T">T</div>
+                <div class="key" data-key="Y">Y</div>
+                <div class="key" data-key="U">U</div>
+                <div class="key" data-key="I">I</div>
+                <div class="key" data-key="O">O</div>
+                <div class="key" data-key="P">P</div>
             </div>
             <div class="kbrow">
-                <div class="key">A</div>
-                <div class="key">S</div>
-                <div class="key">D</div>
-                <div class="key">F</div>
-                <div class="key">G</div>
-                <div class="key">H</div>
-                <div class="key">J</div>
-                <div class="key">K</div>
-                <div class="key">L</div>
+                <div class="key" data-key="A">A</div>
+                <div class="key" data-key="S">S</div>
+                <div class="key" data-key="D">D</div>
+                <div class="key" data-key="F">F</div>
+                <div class="key" data-key="G">G</div>
+                <div class="key" data-key="H">H</div>
+                <div class="key" data-key="J">J</div>
+                <div class="key" data-key="K">K</div>
+                <div class="key" data-key="L">L</div>
             </div>
             <div class="kbrow">
-                <div class="key">Z</div>
-                <div class="key">X</div>
-                <div class="key">C</div>
-                <div class="key">V</div>
-                <div class="key">B</div>
-                <div class="key">N</div>
-                <div class="key">M</div>
+                <div class="key" data-key="Z">Z</div>
+                <div class="key" data-key="X">X</div>
+                <div class="key" data-key="C">C</div>
+                <div class="key" data-key="V">V</div>
+                <div class="key" data-key="B">B</div>
+                <div class="key" data-key="N">N</div>
+                <div class="key" data-key="M">M</div>
+                <div class="key" data-key="Backspace">⇤</div>
             </div>
         </div>
     <script src="/prosodyle/static/poems.js"></script>
diff --git a/static/script.js b/static/script.js
index 6a52d3e..9692f36 100644
--- a/static/script.js
+++ b/static/script.js
@@ -201,7 +201,7 @@ document.addEventListener('mousedown', function(e) {
         focus(e.target);
     } else if (Array.from(e.target.classList).includes('key')) {
         e.preventDefault();
-        var k = e.target.innerText
+        var k = e.target.getAttribute('data-key')
         keyHandler(k)
     }
 })