https://github.com/n-ignacio-bouffanais/trivia-vue-ts
This project is a Trivia game build with Vue3 and Typescript. The game consists of 5 categories, anime, video games, math, music and history. The game is in Spanish.
https://github.com/n-ignacio-bouffanais/trivia-vue-ts
dynamic-import firebase-auth firestore-collection sass typescript vue vue3-composition-api vuecomponents vuerouter4
Last synced: 2 days ago
JSON representation
This project is a Trivia game build with Vue3 and Typescript. The game consists of 5 categories, anime, video games, math, music and history. The game is in Spanish.
- Host: GitHub
- URL: https://github.com/n-ignacio-bouffanais/trivia-vue-ts
- Owner: N-Ignacio-Bouffanais
- Created: 2022-11-29T15:13:49.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T23:58:00.000Z (over 2 years ago)
- Last Synced: 2025-02-24T01:18:14.890Z (8 months ago)
- Topics: dynamic-import, firebase-auth, firestore-collection, sass, typescript, vue, vue3-composition-api, vuecomponents, vuerouter4
- Language: Vue
- Homepage: https://trivia-vue-ts.vercel.app/
- Size: 233 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trivia game
## Technologies that I used
- Vue3 Composition api
- Typescript
- Firebase
- Sass
- VScode extension: Vue - Volar
## Screenshot
## Steps
- 1 Build an application that when you enter it will ask you to enter some data
- 2 After that I will be able to choose a category of questions and then it will randomly show questions that are in a question bank with 5 simple answers, but only one is correct
- 3 You must ask me to answer 20 questions, and when you finish the last one, you must give me a congratulations message and add me to the ranking of users who have finished the trivia game
- 4 Finally you must show me the time it took me to finish this trivia
## What I learned
```html
{{ props.alt_two }}
```
```js
import { ref } from "vue";
let picked = ref("");
const props = defineProps<{
answer: string;
alt_one: string;
alt_two: string;
alt_thee: string;
alt_four: string;
}>();
```
## Timer in vue3 setup
```html
{{ Displayminutes }}
:
{{ Displayseconds }}
```
```js
import { ref, onMounted } from "vue";
let Displayminutes = ref();
let Displayseconds = ref();
let loaded = ref(false);
let lowTime = ref(false);
let midTime = ref(false);
let enoughTime = ref(true);
const seconds = 1000;
const minutes = seconds * 60;
const setTime = 300000;
const startTime = Date.now();
const futureTime = startTime + setTime;
const Coutdown = () => {
const timer = setInterval(() => {
const currentTime = Date.now();
const gap = futureTime - currentTime;
if (gap < 0) {
clearInterval(timer);
return;
}
if (gap < 150000) {
enoughTime.value = false;
midTime.value = true;
}
if (gap < 60000) {
lowTime.value = true;
}
const mins = Math.floor(gap / minutes);
const secs = Math.floor((gap % minutes) / seconds);
Displayminutes.value = mins < 10 ? "0" + mins : mins;
Displayseconds.value = secs < 10 ? "0" + secs : secs;
loaded.value = true;
}, 1000);
};
onMounted(() => {
Coutdown();
});
```
```scss
.Timer_container {
color: white;
display: flex;
justify-content: center;
.enoughTime {
color: #00e676;
}
.midTime {
color: yellow;
}
.lowTime {
color: red;
}
p {
font-size: 1.8rem;
}
span {
font-size: 5rem;
}
.displays {
font-size: 6rem;
text-align: center;
}
}
```
## Author
- Website - [Nicolas_Bouffanais](https://nicolas-bouffanais.vercel.app/src/index.html)
- Twitter - [@N_Bouffanais](https://twitter.com/N_Bouffanais)