app v0.1 done

mo-lunfardo/lunfardo.js

@@ -6,10 +6,7 @@ const App = Vue.createApp({
     return {
       placeholder: 'Buscá che...',
       searchQuery: '',
-      wordsJson: {
+      wordsJson: []
-        'word-1':  { "title": "sonamos", "description": "pop. ¡Estamos perdidos!"},
-        'word-2': { "title": "percanta", "description": "(pop.) Mujer (LCV.), amante (LCV.), querida (LCV.), concubina."},
-      }
     }
   },
   methods:{
@@ -34,7 +31,8 @@ const App = Vue.createApp({
       },
       filteredList() {
         if (!this.searchQuery) {
-          return this.listValues;
+          //return this.listValues.slice(0, 10);
+          return this.listValues.slice(0, 5);
         }
 
         return this.listValues

mo-lunfardo/test.html

@@ -20,13 +20,23 @@
             </form>
             <h3 v-if="searchQuery" class="mt-2 mb-0">Estas buscando «{{ searchQuery }}»</h3>
             <div class="row"><div class="col text-right"><span class="badge badge-warning mt-0 text-right">{{ countWords }} palabras</span></div></div>     
+            <div class="lunfardo-info-box" v-if="!searchQuery">
+              <i class="fa fa-info-circle" aria-hidden="true"></i> Ingresá tu búsqueda en cuadro de arriba y encontrala entre mas de {{ countWords }} palabras del lunfardo.
+            </div>           
+            <h2 v-if="!searchQuery">Algunos ejemplos de términos lunfardos</h2> 
             <ul class="mt-4">
               <li v-for="(data, index) in filteredList"><strong>{{ data.title }}</strong>: {{ data.description }}</li>
             </ul>
+
           </div>
           </div>
     </div>
     <style>
+    .lunfardo-info-box{
+      padding: 1rem;
+      background-color: #D0E2FE;
+      border-radius: 10px;
+    }
     .lunfardo-search-bar{ 
         width: 100%;
         margin: 0;