- See all countries from the API on the homepage
- Search for a country using an input field
- Filter countries by region
- Click on a country to see more detailed information on a - separate page
- Click through to the border countries on the detail page
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Toggle the color scheme between light and dark mode
- Filter alternating between all countries globally and countries recognised by the UN.
https://raeef-rest-countries-api.netlify.app
By completing this project I learned about:
- How to integrate with APIs using async and promises
- How to display data based on a JSON File
- CSS animations and transitions
- The HTML select tag used to pick options in a form
- Filtered Searches