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.
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)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- CSS Keyframes
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Framer-motion - React Library
I mirrored Chakra UI's SimpleGrid component to create the SimpleGrid
Component.
I could easily have used a flexbox but I wanted a customizable component.
SimpleGrid Component:
<SimpleGrid row={5} column={2} columnGap={10} rowGap={5}>
// Component character data here
</SimpleGrid>
- upmostyly - The
useMediaQuery
hook is based on this article. I really liked this pattern and will use it going forward.
- Frontend Mentor - @frank1003A
- Twitter - @FrankEzene