https://github.com/pasek108/fm-whereintheworld
Frontend mentor challange - REST Countries API with theme switcher + countries guessing game and countries sort
https://github.com/pasek108/fm-whereintheworld
challenge countries-api frontend-mentor guessing-game theme
Last synced: over 1 year ago
JSON representation
Frontend mentor challange - REST Countries API with theme switcher + countries guessing game and countries sort
- Host: GitHub
- URL: https://github.com/pasek108/fm-whereintheworld
- Owner: Pasek108
- Created: 2022-09-10T16:26:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-19T20:29:07.000Z (over 1 year ago)
- Last Synced: 2025-02-19T20:32:58.387Z (over 1 year ago)
- Topics: challenge, countries-api, frontend-mentor, guessing-game, theme
- Language: CSS
- Homepage: https://pasek108.github.io/FM-WhereInTheWorld/
- Size: 913 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FM-WhereInTheWorld - Readme
My solution to the Frontend Mentor "REST Countries API with color theme switcher" challenge
> [!CAUTION]
>
Please, don't look at my solutions until you have completed it yourself.
> 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.
# Table of Contents
* [FrontendMentor :thinking:](#frontendmentor-thinking)
* [What is it](#what-is-it)
* [Is it worth doing](#is-it-worth-doing)
* [Overview :sparkles:](#overview-sparkles)
* [About](#about)
* [Features](#features)
* [Technologies](#technologies)
* [Setup](#setup)
* [Copyright](#copyright-copyright)
* [Details :scroll:](#details-scroll)
* [User interface](#user-interface)
* [Performance](#performance)
# FrontendMentor :thinking:
## What is it
[FrontendMentor](https://www.frontendmentor.io/home) 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.
## Is it worth doing
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.
# Overview :sparkles:
## About
My solution to the [Frontend Mentor "REST Countries API with color theme switcher" challenge](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). This project was built using pure JavaScript and LESS. The challenge required integrating the [REST Countries API](https://restcountries.com/v3.1/all) to retrieve country data. It was a great opportunity to practice JavaScript.
Check out the [live version](https://pasek108.github.io/FM-WhereInTheWorld/) of this project, as well as my [Frontend Mentor profile](https://www.frontendmentor.io/profile/Pasek108).
## Technologies
Languages:
- JavaScript
- HTML
- CSS
Libraries and frameworks:
- [LESS](https://lesscss.org)
- [FontAwesome](https://fontawesome.com) 6.2.0
- [GoogleFonts](https://fonts.google.com)
Programs:
- [VSCode](https://code.visualstudio.com)
- [Prepros](https://prepros.io)
- [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/)
- [ShareX](https://getsharex.com)
- [GIMP](https://www.gimp.org)
## Features
### Challenge requirements
- ✅ 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
- ✅ Toggle the color scheme between light and dark mode
### Additions
- 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
## Setup
- Use [live version](https://pasek108.github.io/FM-WhereInTheWorld/).
- Download this repository and:
- Open project in VSCode
- Run [VSCode live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- Or open project in Prepros
## Copyright :copyright:
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.
# Details :scroll:
## User interface
### Header
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.
---
### Countries Overview
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.
---
### Country Details
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.
---
### Game
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.
## Performance
### Desktop
### Mobile
