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. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots / gifs
    • Mobile
    • Desktop
  • Links
• My process
  • Built with
  • What I learned
• How to run
• Author

Overview

The challenge

Users should be able to:

-[x] See all countries from the API on the homepage -[x] Search for a country using an input field -[x] 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)

Screenshots

Mobile:

Desktop:

(Not taken)

Links

• Solution URL: You can see the development flow here
• Live Site URL: Angular countries vercel live

My process

Built with

• This project was generated with Angular CLI version 9.1.13.
• Consuming REST countries API
• Semantic HTML5 markup
• SCSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

(I'll explain after finish)

How to run

• Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

• Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

• Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

• Running unit tests

Run ng test to execute the unit tests via Karma.

• Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Author

• Website - PhilipeX
• Frontend Mentor - @PhilipeeX