NRNagaphanideep / visitCountries

The goal of this coding exam is to quickly get you off the ground with Lists and Keys in React JS.

Refer to the image below:

Design Files

Click to view

• 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

Set Up Instructions

Click to view

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

Completion Instructions

Functionality to be added

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

Important Note

Click to view

The following instruction is required for the tests to pass

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

Resources

Colors

Hex: #161624

Hex: #f8fafc

Hex: #334155

Hex: #1f1f2f

Hex: #f1f5f9

Hex: #ffffff

Hex: #3b82f6

Hex: #94a3b8

Hex: #cbd5e1

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code