Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24.
It's easy - to practice and practice Vue :)
Get some insight about these puzzles here. Lets start!
Needed to build a debounced search bar. Debounce good to delay functions. This is specially useful when we search. We dont want to send request at every single keydown. We want to send a request after the user pause and stop writing. Debounce can help with that.
I knew I need to use setTimeOut, but I actually have not met with the concept of debounce. After search on the net I found this article to help me out.
My solution is not perfect, as if the search bar is empty, the previous result is still listed... Any idea what I am missing?
This was a nice, cute, pretty easy puzzle :) I loved the jokes :D
Never made countdown, therefor I needed to check a little, so setInterval() became my friend :) I also learnt there is a Transition and TransitionGroup built-in component in Vue, where can help to work with animation on a reactive element. So I made a countdown, where the numbers are fading away.
This was a hard one. I am not really familiar with recursive functions. I needed to actually check the solution, but at least I understand now why it needed to be done that way.
This was a nice and easy challenge, practicing v-model :)
This was a hard one.. It started good, then I was a little confused with the select options. But I understood based on the given solution why and how needs to be done. Next challenge was the comparison part, as I used values which were not available in the beginning. Here I mean, that I compare 2 items in an array which has not been selected. So I got a errors that these values are undefined. But it took me some tme to realize, the problem is not the fetch, but that these items have not been selected. Still... v-if needed to be add.. and voilá :D
I was always amazed with Drag and Drop effect, but I have not get a chance (or time?) to actually check out. Luckily Advent of Vue made sure about it to get a closer look. It was really new and again needed to check the solution, but I am planning to do try it with some "easier" thing like list items.
It was my own mini project to get extra practice. There were 3 puzzles which were harder because they were new to me: Recursive Tree, Count down, Drag and Drop. So I tried to put all these 3 things together. :)
This puzzle required a i18n library, I was not familiar with. I am going to be honest, I mostly needed to check the solution. To practice a little more I added 3 other language.
This puzzle made me practice array.sort, computed properties and toggle.
Gonna be honest, I found another advent of type challenge, which feels more suitable for me. It's called Advent of Js. Here you get a starter files with style and basic html markdown. You just need to add some JS. I started to do this challenge in Vue. So AOV had a pretty open challenge what I dislike, so I started this AOJS. I made a stop watch - again setInterval and clearInterval was the main focus.
X-mas tree lights challenge was a little similar to the recursive tree. I also chose a smaller challenge as extra, the Piano challenge. In every piano key different audio file is playing. It was a great way to learn more about audio.
This was a hard one again. :S
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent