ravikiran8844 / visit-countries Goto Github PK

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Visited Countries View

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

The app must have the following functionalities

• Initially, the list of given countries should be displayed.

  • If the country is not visited, it should be displayed with the Visit button.
  • If the country is visited, it should be displayed with the text Visited and also should be displayed in the visited countries.

• When a Visit button of the country is clicked,

  • The country should be added in the visited countries.
  • The Visit button of a respective country should be replaced with the text Visited.

• When a Remove button in one of the visited countries is clicked,

  • The respective visited country should be removed from the visited countries.
  • The Visited text of a respective visited country should be replaced with a Visit button.

• When all the visited countries are removed, then No Visited Countries View should be displayed.

• The App component consists of the initialCountriesList. It consists of a list of countries with the following properties in each country object.

  key	DataType
  id	String
  name	String
  imageUrl	String
  isVisited	Boolean

The following instruction is required for the tests to pass

• The image of each visited country should have the alt attribute value as thumbnail.

• Roboto