🍧🎓 Checkpoint

./public/styles.css:1954897/100
./views/index.html:1954897/37487
./public/script.js:1954897/13888

public/script.js

@@ -20,11 +20,20 @@
             }
             prev = iam
         })
+        if (btns[i].dataset.fire) {
+            btns[i].addEventListener('click', function (e) {
+                console.log(this, e)
+                document.dispatchEvent(new Event(this.dataset.fire))
+            });
+        }
     }
 
-    const fs = document.getElementById('fs')
 
-    fs.addEventListener('click', e => {
+    document.addEventListener('word', (e) => {
+        console.log('Word dispatched')
+    });
+
+    document.addEventListener('fs', (e) => {
         if (!screen.orientation.lock) return
         document
             .documentElement

public/styles.css

@@ -82,7 +82,8 @@ body {
 .btn:active {
   background: rgba(255,255,255, 0.12)
 }
-
+.btn-row { text-align: right; }
+.btn-row .btn { display: inline-block; }
 
 input {
   display: block;

views/index.html

@@ -47,7 +47,9 @@
         </div>
         <div class="container middle" id="view1" hidden>
             <h1 class="h4 center">Dale el celular a la persona a&nbsp;tu&nbsp;izquierda.</h1>
-            <button class="btn right" data-open="view2">¡Listo!</button>
+            <div class="btn-row">
+                <button class="btn" data-open="view2" data-fire="word">¡Listo!</button>
+            </div>
         </div>
         <div class="container" id="view2" hidden>
             <h1 class="h4">Escribe una palabra</h1>
@@ -56,11 +58,11 @@
                 sustantivo, verbo, adjetivo, adverbio o frase común.
                 No se permiten artículos, pronombres, conjunciones ni exclamaciones.
             </p>
-            <input type="text" placeholder="p. ej., " id="">
-            <div class="flex" id="">&hellip;</div>
-            <div class="">
-                <button class="btn" id="refresh">Más palabras</button>
-                <button class="btn" data-open="view3" id="fs">¡Listo!</button>
+            <input type="text" placeholder="p. ej., " id="in">
+            <div class="flex" id="wordBank">&hellip;</div>
+            <div class="btn-row">
+                <button class="btn" data-dispatch="word">Más palabras</button>
+                <button class="btn" data-open="view3" data-fire="fs" disabled>¡Listo!</button>
             </div>
         </div>
         <div class="container middle" id="view3" hidden>