Day 5 - REST Countries API | Forntend Mentor Challenge

Today was my 4rth day and I was given REST Countries API challenge from Frontend Mentor. I am given 3 days to complete this task. So, Today I set a target to complete the full design of the task. This design also has dark mode and light mode theme switch.

Overview

desktop-preview.jpg

Your challenge is to integrate with the REST Countries API to pull country data and display it like in the designs.

You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.

Your 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
  • Toggle the color scheme between light and dark mode (optional)

Work

Today, I replicated the design and also completed 90% of the dark / light theme switcher to get the dark mode button working.

My.jpg

My Design

Today I created the design of the template and for the first time created the light / dark theme switcher. and it was some what hard for me but I learned from Stack-overflow to do it.

Dark.jpg

Dark Mode