REST Countries API with color theme switcher solution-pure Javascript

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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @yanyan-alien
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 helpful - 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
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