Overview

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. The challenge for this specific day is to build a debounced search bar for products from DummyJSON's product API. The debouncing technique allows delaying the execution of a function until a specific amount of time has elapsed since the last call. The solution should include adding a 300-millisecond delay to the findProducts function, displaying a loading spinner/message, and showing the suggested products' names and price tags in an unordered list if the function executes successfully. If there is an error, a generic error message should be shown using native alert(). If the search term is reset to an empty string, the search suggestions should also be cleared.

Features

Debounced search bar for products from DummyJSON's product API
300-millisecond delay for the findProducts function
Loading spinner/message display
Suggested products' names and price tags displayed in an unordered list
Error handling with a generic error message using native alert()
Search suggestions cleared when search term is reset to empty string

Summary

Advent Of Vue is a daily coding challenge series that includes a variety of Vue challenges. This specific challenge focuses on building a debounced search bar for products from DummyJSON's product API. The challenge requires implementing a 300-millisecond delay for the search function, displaying a loading message/spinner, and handling error cases. Overall, the challenge aims to enhance the participant's understanding of Vue.js and its related concepts.

Advent Of Vue

2022 Gift Search Bar