My solution to the Frontend Mentor "REST Countries API with color theme switcher" challenge
Caution
Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach. If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a defeat.FrontendMentor is a platform that provides real-world front-end coding challenges to help developers improve their skills. It offers projects ranging from simple layouts to complex web applications, allowing users to practice HTML, CSS, and JavaScript by building solutions that closely resemble professional work.
Frontend Mentor is a great resource for developers looking to gain hands-on experience by working on practical projects. The challenges help reinforce best practices, improve design implementation skills, and build a portfolio. However, since there is no automated grading system, feedback depends on community reviews, making it essential to engage with others for constructive criticism.
My solution to the Frontend Mentor "REST Countries API with color theme switcher" challenge. This project was built using pure JavaScript and LESS. The challenge required integrating the REST Countries API to retrieve country data. It was a great opportunity to practice JavaScript.
Check out the live version of this project, as well as my Frontend Mentor profile.
Languages:
- JavaScript
- HTML
- CSS
Libraries and frameworks:
- LESS
- FontAwesome 6.2.0
- GoogleFonts
Programs:
- ✅ 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
- Remember color scheme
- Sorting coutries by name
- Sorting coutries population
- Countries guessing game:
- Name by flag
- Name by capital
- Flag by name
- Flag by capital
- Capital by name
- Capital by flag
-
Use live version.
-
Download this repository and:
- Open project in VSCode
- Run VSCode live server extension
- Or open project in Prepros
I do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.
The header contains the logo on the left and buttons on the right.
The buttons are:
- Game – Starts a country guessing game.
- Light/Dark mode – Switches the page's color scheme.
At the top, there is a filtering section. Users can search for text within country data, sort countries by name or population, and filter them by region.
Below, a list of all countries that meet the selected filter criteria is displayed.
Countries are shown as cards containing:
- Flag
- Name
- Population
- Region
- Capital
Clicking on a country's name navigates the user to the country's details page.
The country details page includes:
- Flag
- Name
- Native Name
- Population
- Region
- Subregion
- Capital
- Top-Level Domain
- Currencies
- Languages
- Border Countries
Clicking on a border country navigates the user to that country's details page.
Clicking the "Game" button in the header opens the game selection menu.
The menu displays a points counter, as well as counters for correct and incorrect answers. Below, users can select a game mode:
-
Name by Flag
-
Name by Capital
-
Flag by Name
-
Flag by Capital
-
Capital by Name
-
Capital by Flag
Users must answer the question by selecting one of four available options.
- If the answer is incorrect, a wrong sound plays, the chosen answer is marked in red, and the correct answer is highlighted in green.
- If the answer is correct, a correct sound plays, and the selected option is marked in green. The next question is then unlocked.
