waseem496 / destinationsearch-reactjs Goto Github PK

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

• Download dependencies by running npm install
• Start up the app using npm start

The app must have the following functionalities

• Initially, all destinations in the destinationsList should be displayed

• When a value is provided in the search input, only the destinations whose names contain the value provided in the search input should be displayed irrespective of the case

• The DestinationSearch component receives the destinationsList as a prop. It consists of a list of destination objects with the following properties in each destination object

  Key	Data Type
  id	Number
  name	String
  imgUrl	String

Use these files to complete the implementation:

• src/components/DestinationSearch/index.js
• src/components/DestinationSearch/index.css
• src/components/DestinationItem/index.js
• src/components/DestinationItem/index.css

The following instructions are required for the tests to pass

• The search for the destination should be case insensitive. You can use the toLowerCase method to convert a string into lower case letters.

  const text = 'Learn JavaScript'
  console.log(text.toLowerCase()); // learn javascript

• Each DestinationItem should have an HTML image element with alt attribute value as the value of the key name in destinationsList

• https://assets.ccbp.in/frontend/react-js/destinations-search-icon-img.png alt should be search icon

• Roboto
• Open Sans