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!
You're tasked with building a debounced search bar for products from DummyJSON's product API. In case you're not familiar with the concept of debouncing, it's a technique that allows one to delay a function's execution until a specific amount of time has elapsed since the last call.
For this challenge, you'll need to add a 300-millisecond delay to the findProducts function. You can make use of readily available debounce implementations, or try writing one yourself.
You'll also need to display a generic loading spinner/message, and if the function executes successfully, place suggested products' names and price tags inside an unordered list. Otherwise, use native alert() to show a generic error message.
If the search term gets reset back to an empty string, clear the search suggestions too.
Maciej Pędzich (Mac):
DummyJSON project by Muhammad Ovi.
Based on a Stackblitz project by tony19