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)
- Solution URL: REST Countries API
- Live Site URL: REST Countries API
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Tailwindcss - For styles
This actually my first project working with react router dom. Started learning react not long ago and it was a fun experience. I learned how to use the "Link" component to navigate to other pages. And also learned to use the 'useParams' hook to get the route name for data filtering and API calls.
const { paramName } = useParams();
fetch(`https://www.example-api.com/name/${paramName}`)
.then((result) => result.data)
.catch((error) => console.log(error))
Continue developing with react router dom. I still have not had a complete grasp on the library. I am going to be developing multi-page sites to help me get a full grasp on the library.
- Frontend Mentor - @wuzgood98
- Twitter - @wuz_goood