REST Countries API with color theme switcher solution-pure Javascript
Design comparison
Solution retrospective
heloo community
Even if building a web app is easy with frameworks i used pure Javascript tools to build this webapp. i used module type JS to enable building different components(9) of JS and combining them in to one JS file. crucial components
- formatNum.js/formating population number
- setCountry.js/adding the clicked country name in to local storage(enable to acess it after we are redirected to the single country page)
Cool methods
1 - using ...new Set
method to return the unique values from the data[in these project to grab the unique continents ] instead of using reduce method its easy
2 -format number --recive a number and format it to the thousends formats
function formatNum(number) {
let nf = new Intl.NumberFormat('en-US');
nf = nf.format(number);
return nf;
}
3 - Object.values(objname)[index]
method to grab the first item of object from the teration, even if the property name is not consistent for all of iterable objects
const newnativeName = Object.values(nativeName)[0].official;
finally
i do my best to make it responsive and it looks good for me ....as usual if u have a better way of doing these project please leave a comment ....and also if u have difficulties doing these project u can refer my codes i elaborate details of it as a line comment in JS.. Thank U!
Community feedback
- @yanyan-alienPosted almost 2 years ago
Hi!
Congrats on completing this!👍Cool animations on the theme switcher button and the back button! ✨Also props to you for thinking of having a back to top button on this very long site
These are some of the stuffs I noticed when browsing through your live site:
- After the user sets the page to dark mode and clicks on a particular country detail, the page will be back to light mode. Maybe you can use
localStorage.getItem()
andlocalStorage.setItem()
to store and retrieve the set theme - The sticky navigation bar doesn't occupy the whole screen width when the screen is wide (eg. 1400px)
Good luck! 🎉
Marked as helpful1@yishak621Posted almost 2 years ago@yanyan-alien o thanks for the feedback ..and also i was thinking about how to set a dark theme in the singcountry.html page if the index.html was in the dark mode ..i will use ur recommended local storage methods .....and i will fix the fixed nav bar for wider screen
0 - After the user sets the page to dark mode and clicks on a particular country detail, the page will be back to light mode. Maybe you can use
Please log in to post a comment
Log in with GitHubJoin 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