https://github.com/gitericsson/rest-countries-api
This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
https://github.com/gitericsson/rest-countries-api
frontend-mentor javascript rest-countries-api sass scss
Last synced: 12 months ago
JSON representation
This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Host: GitHub
- URL: https://github.com/gitericsson/rest-countries-api
- Owner: gitEricsson
- Created: 2024-04-10T01:05:37.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T11:52:17.000Z (over 1 year ago)
- Last Synced: 2025-01-03T19:29:02.117Z (about 1 year ago)
- Topics: frontend-mentor, javascript, rest-countries-api, sass, scss
- Language: JavaScript
- Homepage: https://ericsson-rest-countries-api.netlify.app/
- Size: 567 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Frontend Mentor - REST Countries API with color theme switcher solution
This is a solution to the [REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
## Overview
Integrating with the REST Countries API to pull country data to display it like in the designs.
### The challenge
Users should be able to:
- 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
- See a spinner functionality whilst fetching countries from API
- Interact with a Responsive Web design
### Screenshot
### Links
- Solution URL: [Github Repo here](https://github.com/gitEricsson/REST-Countries-API)
- Live Site URL: [Live site here](https://ericsson-rest-countries-api.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- sass
- Mobile-first workflow
- Vanilla JavaScript
- MVC Architecture
## Author
- Website - [Ericsson Raphael](https://github.com/gitEricsson)
- Frontend Mentor - [@ericsson](https://www.frontendmentor.io/profile/gitEricsson)
- LinkedIn - [@ericsson](www.linkedin.com/in/ericssonraphael)
- Gmail - [@ericsson](ericssonraphael@gmail.com)