🚎🍜 Checkpoint

./views/index.html:1954897/17146
./public/script.js:1954897/18008
./views/order-confirmed.svg:1954897/18089

public/script.js

@@ -2,6 +2,7 @@
     'use strict'
     const wordBank = document.getElementById('wordBank')
     ,     input    = document.getElementById('input')
+    ,     listo    = document.getElementById('listo')
     let prev = null
     let palabras = fetch('palabras.json').then(x => x.json())
 
@@ -41,13 +42,16 @@
                     let b = document.createElement('button')
                     b.classList.add('chip')
                     b.innerText = word.p
-                    b.onclick = function () { input.value = this.innerText }
+                    b.onclick = function () {
+                        input.value = this.innerText;
+                        input.dispatchEvent(new Event('input'))
+                    }
                     wordBank.appendChild(b)
                 }
             })
     })
 
-    document.addEventListener('fs', (e) => {
+    document.addEventListener('fs', e => {
         if (!screen.orientation.lock) return
         document
             .documentElement
@@ -59,5 +63,9 @@
             })
     })
 
+    input.addEventListener('input', e => {
+        listo.disabled = !input.value.trim()
+    });
+
 
 }());

views/index.html

@@ -71,10 +71,17 @@
             <div id="wordBank" class="bump">&hellip;</div>
             <div class="btn-row">
                 <button class="btn" data-fire="word">Más palabras</button>
-                <button class="btn" data-open="view3" data-fire="fs" disabled>¡Listo!</button>
+                <button class="btn" data-open="view3" id="listo" disabled>¡Listo!</button>
             </div>
         </div>
         <div class="container middle" id="view3" hidden>
+            <h1 class="h4 center">¿Ya&nbsp;terminaste? Regrésale el&nbsp;celular.</h1>
+            <img src="order-confirmed.svg" class="graphic" alt="">
+            <div class="btn-row">
+                <button class="btn" data-fire="fs" data-open="view4">Okay</button>
+            </div>
+        </div>
+        <div class="container middle" id="view4" hidden>
             <h1 class="h4">Coloca el teléfono sobre la frente</h1>
             <p>Toca la pantalla cuando estés listo.</p>
         </div>