Where in the world?

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor .

Github Live Site URL · Frontend Mentor Solution URL

Table of contents

• Features
• Screenshot
• Built with
• Getting Started
  • Prerequisites
  • Installation
• Acknowledgments
• Author

Features

• 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
• Responsive web design
• Scroll to top

⬆︎ BACK TO TOP

Screenshot

Home	Detail
Home RWD	Detail RWD

GIF

Home	Detail
Theme Switcher

⬆︎ BACK TO TOP

Built with

• Mobile-first workflow
• Vue 3: JavaScript Framework
• Vue Router 4: Official router for Vue
• Pinia 2: Store library for Vue
• Vite 4: Build tool
• Axios 1: Promise based HTTP client for the browser and node.js

⬆︎ BACK TO TOP

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Node.js version 16.0 or higher

Installation

1. Clone the repo

   git clone https://github.com/yuna9068/country-information.git

2. Install NPM packages

   npm install

3. Compile and Hot-Reload for Development

   npm run dev

⬆︎ BACK TO TOP

Acknowledgments

• Frontend Mentor
• REST Countries API
• Photo of white and red globe under blue sky during daytime by Lucas George Wendt on Unsplash
• Theme Switcher
  • 實作網頁深色模式及淺色模式的切換 by Mark
  • Dark Theme Switcher in Vue.js by yestellar
• Typewriter text animation
  • CSS-only typewriter text animation by Alvaro Montoro
  • 小tips: 纯CSS实现打字动画效果 by 张鑫旭
• Loading animation
  • Star Particles | CSS Only Animation Effects by Online Tutorials
• Best-README-Template by othneildrew

⬆︎ BACK TO TOP

Author

• GitHub - Yuna
• Frontend Mentor - @yuna9068

⬆︎ BACK TO TOP