It's my first time properly playing with Vue 3's Composition API here.
My own personal TODOs:
-
findProductsimplementation - Debounce
- Loading and error states (I chose to forgoe
alert) - Style it up with some product cards
- Thumbnails
- Price
- Discount sticker
- Star rating
- Load more / pagination
- No results
What I learned:
- composition API basics
referencevsref- SFC
<script setup>
- some TailwindCSS basics
- how to add and extend the colour palette
Forked README below 👇🏻
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