Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

REST Countries API with color theme switcher solution-pure Javascript

yishak abrham 2,150

@yishak621

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

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-alien

Posted

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:

  1. 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() and localStorage.setItem() to store and retrieve the set theme
  2. The sticky navigation bar doesn't occupy the whole screen width when the screen is wide (eg. 1400px)

Good luck! 🎉

Marked as helpful

1

yishak abrham 2,150

@yishak621

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

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