arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-01-14 12:14:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2024-07-30 23:11:03 +02:00
parent c0bc4ddd78
commit 6a107e1d9c
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/app.config.ts
View File

@@ -1,6 +1,6 @@
export default defineAppConfig({ export default defineAppConfig({
ui: { ui: {
gray: 'neutral', gray: 'zinc',
primary: 'red', primary: 'red',
container: { container: {
constrained: 'max-w-xl', constrained: 'max-w-xl',

34
app/app.vue
View File

@@ -6,19 +6,19 @@ useHead({
title: 'Spanish Learning Process • By Arthur Danjou', title: 'Spanish Learning Process • By Arthur Danjou',
}) })
const { data: verb, refresh: refreshVerb } = await useAsyncData('verb', async () => $fetch('/api/verb')) const { data: verb, refresh: refreshVerbData } = await useAsyncData('verb', async () => $fetch('/api/verb'))
const { data: word, refresh: refreshWord } = await useAsyncData('word', async () => $fetch('/api/word')) const { data: word, refresh: refreshWordData } = await useAsyncData('word', async () => $fetch('/api/word'))
const revealedVerb = ref(false) const revealedVerb = ref(false)
async function revealVerb() { async function refreshVerb() {
revealedVerb.value = false revealedVerb.value = false
await refreshVerb() await refreshVerbData()
} }
const revealedWord = ref(false) const revealedWord = ref(false)
async function revealWord() { async function refreshWord() {
revealedWord.value = false revealedWord.value = false
await refreshWord() await refreshWordData()
} }
</script> </script>
@@ -46,18 +46,18 @@ async function revealWord() {
</div> </div>
<div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true"> <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
<h3 class="text-xl text-neutral-500"> <h3 class="text-xl text-neutral-500">
Traducion: Traduccion:
</h3> </h3>
<h1 class="text-3xl font-bold" :class="revealedVerb ? '' : 'bg-black text-black'"> <h1 class="text-3xl font-bold" :class="revealedVerb ? 'duration-300' : 'bg-black text-black'">
{{ verb.translation }} {{ verb.translation }}
</h1> </h1>
</div> </div>
<UButton <UButton
color="blue" :color="revealedVerb ? 'green' : 'red'"
variant="solid" variant="solid"
label="Reveal Verb" :label="revealedVerb ? 'Change Verb' : 'Reveal Verb'"
:block="true" :block="true"
@click.prevent="revealVerb()" @click.prevent="revealedVerb ? refreshVerb() : revealedVerb = true"
/> />
</div> </div>
<UDivider class="mt-8 mb-4" label="Palabras" /> <UDivider class="mt-8 mb-4" label="Palabras" />
@@ -78,20 +78,20 @@ async function revealWord() {
{{ word.type }} {{ word.type }}
</h1> </h1>
</div> </div>
<div class="flex gap-2 items-end"> <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedWord = true">
<h3 class="text-xl text-neutral-500"> <h3 class="text-xl text-neutral-500">
Tradución: Traducción:
</h3> </h3>
<h1 class="text-3xl font-bold" :class="revealedWord ? '' : 'bg-black text-black'"> <h1 class="text-3xl font-bold" :class="revealedWord ? 'duration-300' : 'bg-black text-black'">
{{ word.translation }} {{ word.translation }}
</h1> </h1>
</div> </div>
<UButton <UButton
color="red" :color="revealedWord ? 'green' : 'blue'"
variant="solid" variant="solid"
label="Reveal Word" :label="revealedWord ? 'Change Word' : 'Reveal Word'"
:block="true" :block="true"
@click.prevent="revealWord()" @click.prevent="revealedWord ? refreshWord() : revealedWord = true"
/> />
</div> </div>
<UDivider class="mt-8 mb-4" label="Ser, Estar, Tener, Haber" /> <UDivider class="mt-8 mb-4" label="Ser, Estar, Tener, Haber" />