REST Countries API with color theme switcher solution
Design comparison
Solution retrospective
In this project I am proud of two things:
- Number one is the dark theme switches
- Number two is using Restful API
In this project, I have used an efficient way to make a button that switches between light and dark theme. Most of the time, we use JavaScript for things which are possible by simple HTML and CSS. So, in this project, you will see a light and dark theme toggle button. I have not used any JavaScript for this. I simply used ``````, then on the by using checked pseudo-selector, I was able to switch between themes. You can see my code in GitHub and let me know if you need any help.
The challenge for me was, "How to get information from API and asynchronously save it in a variable, and how to send it to a neighbor component?". This was because I usually make different components to separate the code for reusability purpose.
How I overcome it?
Someone suggested to use context API. But I came up with a better solution. I transferred that data to the parent component and then transferred it to the child component. This helped me a lot because another challenge was that how to get the information of a country when someone clicks on the country info cart on the homepage. The solution was again simple. I just had to get the name of the country and then send the API to get the information about the country and show it using a same component.
You can refer to my code to see a detailed version.
What specific areas of your project would you like help with?Honestly, I got it covered 😁.
Community feedback
- @haquanqPosted 4 months ago
Yo @zohaibxJackie
Well done, it looks good, but you are overusing
divfor everything instead you can just pick more semantic HTML markups such asarticle, section, ul li. Don't usepfor every text, you need a proper heading for each sectionh1-h6.Have a nice day and happy coding!!!!
Marked as helpful0@zohaibxJackiePosted 4 months ago@haquanq thank you for the suggestion. It is always a good idea to use semantic tag for better SEO. I will try better next time.
1 - @dylan-dot-cPosted 4 months ago
Well done, overall it's a good solution and design is good.
What i realized is that the website might not be too accessible, the countryCards are not focusable by keyboard tabbing so you can only tab upto the dropdown list. It seems you might need to use an anchor tag to fix that issue.
Also in terms of routing I see you used '/search-result' for showing the extra details of a country, but I think you could have used dynamic routing so that each country has its own unique link. I think that doing so would also make it perfect to include the anchor tags.
I also realized that when you changed the regions, the cards are no longer clickable, idk why that's so and I wasnt able to inspect your code because you might have uploaded the incorrect github repo url(Rock Papaer Scissors).
In terms of the search feature, you made it so only when the user types in the full spelling of the country can they actually find it, so what if I can spell the country im looking for? I don't remember if it was required but for my solution when you type it changes realtime for all the countries that matches the user's search query. So they wont have to have the full name of the country.
Another issue is that when you have opened the extra details of the country, you should also make the border countries navigable so when a user clicks on it, they can get instantly directed to that countries page.
Finally for the mobile design for the countries details page, it seems like you just centered align everything there so you could also fix that up.
Overall this was a good effort and you did well attempting it.
Have a great day.
0@zohaibxJackiePosted 4 months agoThank you @dylan-dot-c for this detailed analysis. Seems like I don't need QA for this anymore. I have noted all the points that you have mentioned, and I will fix those issues ASAP. Thanks for your time.
0
Please log in to post a comment
Log in with GitHub
Join 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