2022 Gift Search Bar

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.