https://github.com/balakrish001/visit-countries-reactjs

The app displays a list of countries, allowing users to mark countries as visited or remove them from the visited list. It dynamically updates the view based on user actions, including showing a "No Visited Countries" message when all visited countries are removed.
https://github.com/balakrish001/visit-countries-reactjs

html-css-javascript reactjs

Last synced: 4 days ago
JSON representation

The app displays a list of countries, allowing users to mark countries as visited or remove them from the visited list. It dynamically updates the view based on user actions, including showing a "No Visited Countries" message when all visited countries are removed.

• Host: GitHub
• URL: https://github.com/balakrish001/visit-countries-reactjs
• Owner: Balakrish001
• Created: 2024-09-17T08:07:22.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T08:12:59.000Z (4 months ago)
• Last Synced: 2024-11-13T11:41:07.756Z (2 months ago)
• Topics: html-css-javascript, reactjs
• Language: JavaScript
• Homepage:
• Size: 184 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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)](https://assets.ccbp.in/frontend/content/react-js/visit-countries-lg-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Visited Countries View](https://assets.ccbp.in/frontend/content/react-js/visit-countries-no-visited-countries-lg-output.png)

### 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](https://assets.ccbp.in/frontend/content/react-js/visit-countries-no-visited-countries-lg-output.png) 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