Learn Countries - React app
Introduction
Welcome to my Learn Countries project. It was always amazing to me to know about countries' flags and their capital. I was trying to build a new project, scrolling Frontendmentors, and I found this project. Fortunately, I got a chance to introduce countries' information to more people in one place.
Frontendmentor provided me with the design material and the API. So I tried to adhere to their instructions to clone the design as much as I can.
I built the project for smaller screens then I scaled it up to bigger ones. This method ensures a better way to design a responsive website. Starting small made me focus on the flow of content to make it look logical. This also ensures that any content on the screen has a purpose to be displayed, not only filling spaces.
Challenge
One of the hardest challenges I faced is applying dark/light mode. This challenge actually made me understand React more clearly and how it works.
The problem was that I couldn’t select any element to change its color theme. After some research, I understood that I can’t select a Dom element in a React component by the JS method “querySelector()” because the HTML element is not rendered yet on the screen.
Solution
So, I tried to manipulate the CSS instead of HTML. I used CSS variables And manipulated those variables depending on the user preferences. Whenever the user changes the theme, React changes the CSS variables values and stores the favorite theme in the local storage for future visits.
This way ensures that all themes, styles, layout, and CSS rules are in one file, the CSS file itself. Also, Using CSS variables makes it easy to change color pallets in the future.
