{"id":25869592,"url":"https://github.com/pasek108/fm-whereintheworld","last_synced_at":"2025-03-02T05:18:58.069Z","repository":{"id":167660182,"uuid":"535053854","full_name":"Pasek108/FM-WhereInTheWorld","owner":"Pasek108","description":"Frontend mentor challange - REST Countries API with theme switcher + countries guessing game and countries sort","archived":false,"fork":false,"pushed_at":"2025-02-19T20:29:07.000Z","size":935,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T20:32:58.387Z","etag":null,"topics":["challenge","countries-api","frontend-mentor","guessing-game","theme"],"latest_commit_sha":null,"homepage":"https://pasek108.github.io/FM-WhereInTheWorld/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pasek108.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-10T16:26:34.000Z","updated_at":"2025-02-19T20:29:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"98a740e9-82db-4a47-985a-450c742c9dad","html_url":"https://github.com/Pasek108/FM-WhereInTheWorld","commit_stats":null,"previous_names":["pasek108/fm-whereintheworld"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-WhereInTheWorld","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-WhereInTheWorld/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-WhereInTheWorld/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-WhereInTheWorld/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pasek108","download_url":"https://codeload.github.com/Pasek108/FM-WhereInTheWorld/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241460795,"owners_count":19966633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["challenge","countries-api","frontend-mentor","guessing-game","theme"],"created_at":"2025-03-02T05:18:57.505Z","updated_at":"2025-03-02T05:18:58.063Z","avatar_url":"https://github.com/Pasek108.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eFM-WhereInTheWorld - Readme\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    My solution to the \u003ca href=\"https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca\" target=\"_blank\"\u003eFrontend Mentor \"REST Countries API with color theme switcher\" challenge\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.frontendmentor.io/home\"\u003e\n    \u003cimg src=\"_for_readme/banner.jpg?\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003e [!CAUTION]  \n\u003e \u003ch4\u003ePlease, don't look at my solutions until you have completed it yourself.\u003c/h4\u003e\n\u003e Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach.  \n\u003e 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.\n\n\u003cbr\u003e\n\n# Table of Contents\n* [FrontendMentor :thinking:](#frontendmentor-thinking)\n  * [What is it](#what-is-it)\n  * [Is it worth doing](#is-it-worth-doing)\n* [Overview :sparkles:](#overview-sparkles)\n  * [About](#about)\n  * [Features](#features)\n  * [Technologies](#technologies)\n  * [Setup](#setup)\n  * [Copyright](#copyright-copyright)\n* [Details :scroll:](#details-scroll)\n  * [User interface](#user-interface)\n  * [Performance](#performance)\n\n\u003cbr\u003e\n\n# FrontendMentor :thinking:\n\n## What is it\n[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.  \n\n## Is it worth doing\nFrontend 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.  \n\n\u003cbr\u003e\n\n# Overview :sparkles:\n\n## About\nMy 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.\n\nCheck 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).\n\n\u003cbr\u003e\n\n![preview](/_for_readme/preview.png)\n\n## Technologies\nLanguages:\n- JavaScript\n- HTML\n- CSS\n\nLibraries and frameworks:\n- [LESS](https://lesscss.org)\n- [FontAwesome](https://fontawesome.com) 6.2.0\n- [GoogleFonts](https://fonts.google.com)\n  \nPrograms:\n- [VSCode](https://code.visualstudio.com)\n- [Prepros](https://prepros.io)\n- [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/)\n- [ShareX](https://getsharex.com)\n- [GIMP](https://www.gimp.org)\n\n## Features\n### Challenge requirements\n- ✅ See all countries from the API on the homepage\n- ✅ Search for a country using an `input` field\n- ✅ Filter countries by region\n- ✅ Click on a country to see more detailed information on a separate page\n- ✅ Click through to the border countries on the detail page\n- ✅ Toggle the color scheme between light and dark mode \n\n### Additions\n- Remember color scheme\n- Sorting coutries by name \n- Sorting coutries population\n- Countries guessing game: \n  - Name by flag\n  - Name by capital\n  - Flag by name\n  - Flag by capital\n  - Capital by name\n  - Capital by flag\n\n## Setup\n- Use [live version](https://pasek108.github.io/FM-WhereInTheWorld/).\n\n- Download this repository and:\n  - Open project in VSCode\n  - Run [VSCode live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n  - Or open project in Prepros\n\n## Copyright :copyright:\nI 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.\n\n\u003cbr\u003e\n\n# Details :scroll:\n\n## User interface\n### Header  \n![header](/_for_readme/UI/header.png)  \nThe header contains the logo on the left and buttons on the right.\n\nThe buttons are:  \n- **Game** – Starts a country guessing game.  \n- **Light/Dark mode** – Switches the page's color scheme.\n\n---\n\n### Countries Overview  \n![filtering](/_for_readme/UI/filtering.png)  \nAt 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.\n\n\u003cbr\u003e\n\n![countries](/_for_readme/UI/countries.png)  \n\n![countries](/_for_readme/UI/countries-light-theme.png)  \nBelow, a list of all countries that meet the selected filter criteria is displayed.\n\nCountries are shown as cards containing:  \n- Flag  \n- Name  \n- Population  \n- Region  \n- Capital  \n\nClicking on a country's name navigates the user to the country's details page.\n\n---\n\n### Country Details  \n![country details](/_for_readme/UI/country-details.png)  \nThe country details page includes:  \n- Flag  \n- Name  \n- Native Name  \n- Population  \n- Region  \n- Subregion  \n- Capital  \n- Top-Level Domain  \n- Currencies  \n- Languages  \n- Border Countries  \n\nClicking on a border country navigates the user to that country's details page.\n\n---\n\n### Game  \n![game select](/_for_readme/UI/game-select.png)  \nClicking the \"Game\" button in the header opens the game selection menu.\n\nThe menu displays a points counter, as well as counters for correct and incorrect answers. Below, users can select a game mode:\n\n- **Name by Flag**  \n\n  ![name by flag](/_for_readme/UI/name-by-flag.png)  \n\n- **Name by Capital**  \n\n  ![name by capital](/_for_readme/UI/name-by-capital.png)  \n\n- **Flag by Name**  \n\n  ![flag by name](/_for_readme/UI/flag-by-name.png)  \n\n- **Flag by Capital**  \n\n  ![flag by capital](/_for_readme/UI/flag-by-capital.png)  \n\n- **Capital by Name**  \n\n  ![capital by name](/_for_readme/UI/capital-by-name.png)  \n\n- **Capital by Flag**  \n\n  ![capital by flag](/_for_readme/UI/capital-by-flag.png)  \n\nUsers must answer the question by selecting one of four available options.  \n- If the answer is **incorrect**, a wrong sound plays, the chosen answer is marked in red, and the correct answer is highlighted in green.  \n- If the answer is **correct**, a correct sound plays, and the selected option is marked in green. The next question is then unlocked.  \n\n## Performance\n\n### Desktop\n![desktop performance](/_for_readme/desktop-performance.png)\n\n### Mobile\n![mobile performance](/_for_readme/mobile-performance.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpasek108%2Ffm-whereintheworld","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpasek108%2Ffm-whereintheworld","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpasek108%2Ffm-whereintheworld/lists"}