Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

REST Countries API with color theme switcher solution-pure Javascript

sass/scss
yishak abrham•2,150
@yishak621
A solution to the REST Countries API with color theme switcher challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on yishak abrham's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License