🚡🌔 Checkpoint

./public/script.js:1954897/14033
./public/styles.css:1954897/577
./views/index.html:1954897/45

public/script.js

@@ -30,10 +30,20 @@
         }
     )
 
-    document.addEventListener('word', async function () {
-        let words = (await palabras)
-        console.log(words)
-        wordBank.innerHTML = words.words[~~(Math.random() * words.words.length)].p
+    document.addEventListener('word', function () {
+        fetch('palabras.json')
+            .then(x => x.json())
+            .then(w => w.words)
+            .then(function (words) {
+                // console.log(words)
+                wordBank.innerHTML = ''
+                for (let word of words) {
+                    let b = document.createElement('button')
+                    b.classList.add('chip')
+                    b.innerText = word.p
+                    wordBank.appendChild(b)
+                }
+            })
     })
 
     document.addEventListener('fs', (e) => {

public/styles.css

@@ -105,6 +105,17 @@ input:focus {
   border-bottom-color: var(--accent);
 }
 
+.chip {
+  border: 0;
+  background: 0;
+  color: inherit;
+  background: rgba(255,255,255, .31);
+  border-radius: 16px;
+  font-size: 14px;
+  padding: 6px 12px;
+  margin: 2px;
+}
+
 .graphic {
   width: 100%;
   max-width: 480px;

views/index.html

@@ -68,7 +68,7 @@
                 No se permiten artículos, pronombres, conjunciones ni exclamaciones.
             </p>
             <input type="text" placeholder="p. ej., " id="input">
-            <div class="flex" id="wordBank">&hellip;</div>
+            <div id="wordBank">&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>