This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.
Users should be able to:
- See all countries from the API on the homepage
- Search for a country using an
inputfield - 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
- Toggle the color scheme between light and dark mode (optional)
| Function | Description |
|---|---|
| Light & Dark Theme | User can toggle the color scheme between light and dark mode. |
| Sticky Navbar | Navbar becomes sticky when user scrolls down. |
| Scroll To Top Button | User can scroll to the top of page immediately. |
| CSS Loader | A loading animation is shown when fetching data from the api. |
| Search | User can search any country using the search bar. |
| Filter by Region | User can filter countries by region (Africa, Americas, Europe, Asia, Oceania) using the dropdown menu. |
| Filter by First Letter | User can filter countries by first letter of country name by clicking the designated letter of their choice. |
| Tools | Description | Link |
|---|---|---|
| Font Awesome | Icon elements | https://fontawesome.com/ |
| Google Fonts | Font Family | https://fonts.google.com/ |
| REST Countries | Country details api | https://restcountries.com/ |