app v0.1 done

This commit is contained in:
minimo-io 2022-10-19 14:50:31 -03:00
parent baf37b7c66
commit 7374f1c83b
2 changed files with 16 additions and 8 deletions

View File

@ -6,10 +6,7 @@ const App = Vue.createApp({
return {
placeholder: 'Buscá che...',
searchQuery: '',
wordsJson: {
'word-1': { "title": "sonamos", "description": "pop. ¡Estamos perdidos!"},
'word-2': { "title": "percanta", "description": "(pop.) Mujer (LCV.), amante (LCV.), querida (LCV.), concubina."},
}
wordsJson: []
}
},
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

View File

@ -10,7 +10,7 @@
<body>
<div class="lunfardo-app card card bg-light mb-3">
<div class="card-body">
<div class="card-body">
<div id="app">
<form @submit.prevent="searchLunfardo">
<div class="search-wrapper form-group mb-0">
@ -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>
</div>
<style>
.lunfardo-info-box{
padding: 1rem;
background-color: #D0E2FE;
border-radius: 10px;
}
.lunfardo-search-bar{
width: 100%;
margin: 0;