Advent of Vue 2022 ~ Memory game
If you didn't get here from an email, read this section! Skip it otherwise.
Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!
What is already done ℹ️
I've already installed a few packages for this exercise:
- js-confetti when the game is won
- unplugin-vue-components so that you don't need to import any
.vuecomponents - unplugin-icons + the corresponding iconify pack to have a cute X-mas set of icons (+ their correspoding import in
icons.js) - vue-use for a handy
useTimeoutcomposable
There is also a basic ESlint + Prettier configuration in case you want to run this challenge locally.
The Vite configuration is also ready to be used, no need to do that yourself.
The markup is also also ready, you may change it to adapt to your liking. The purpose is to be able to use some hardcoded data to build the game (given in the comments) in case you have a hard time.
CSS? I'm sure you're amazing with it already. That's why I didn't wanted to make you the affront of asking such task. BOOM, done too! 🎨
Problem description
We want to make a memory game, like when you deploy your app on Netlify and wait patiently while it builds. The game consists of making pairs of cards.
You want to see how it looks in action? Here you go! 🎁
Steps to achieve that one:
- follow the 8 todos located in
/src/App.vue - use some packages/components imported at the beginning of the file for the exercise, be curious!
- some parts are already done for you, so can just enjoy! 🏖️🍸☀️
Hints
The hardest part (todo #6) in /src/hint.js. ☘️
Author
Hello dear challenger! 👋
My name is kissu aka Konstantin BIFERT. 🍉
I love to help people daily on Stackoverflow, creating challenges for you folks 😋 and also trying to get into the YouTube game. 🎥
I'm on Twitter and on Mastodon, otherwise you can check my work in progress portfolio too. 🙈