Design comparison
SolutionDesign
Solution retrospective
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
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 (optional)
Links
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vue - JS library
- Vue Ruter - JS library
What I learned
How to setup router in vue in navigate between them.
To see how you can add code snippets, see below:
<RouterLink to="/">Where in the world</RouterLink>
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/country/:id',
name: 'country',
component: () => import('@/views/CountryView.vue')
}
]
})
export default router
Author
- Website - Abolfaz
- Frontend Mentor - @duniandewon
- Twitter - @duniandewon
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord