NxtWave ReactJS Coding Practice 7 Part-2 (Google Search Suggestion)

(Google Search Suggestion) #nxtwave #solution

First---------Static Web Page with Logic for Google Search Suggestion

The app must have the following functionalities:
1) Initially, all suggestions in the suggestionsList should be displayed.
2) When a value is provided in the search input, then display the suggestions which includes the search input irrespective of case.
3) When the arrow of a suggestion is clicked, then the value of the search input should be updated with the respective suggestion clicked.
4) The GoogleSuggestions component receives the suggestionsList as a prop. It consists of a list of suggestion objects with the following properties in each suggestion object.

Second-----Then Design Web Page with Responsive
1) You can use the box-shadow CSS property to apply the box-shadow effect to containers.
2) You can use the cursor CSS property to specify the mouse cursor to be displayed when pointing over an element.
3) You can use the below outline CSS property for buttons and input elements to remove the highlighting when the elements are clicked.

Music by AlanFrijns from Pixabay