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 VANILLA JS!! (✌゚∀゚)☞ (No React App Used)

de-sipher 160

@de-sipher

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


Two things; 1) Managing multiple CSS/ JS files for different HTML files is quite difficult and I need to find a more scalable way to approach this problem. 2) Speed. The fetching and loading takes a considerable amount of time which I need to find a way to reduce. The images, the filtering and the querying are the major culprits. My best guess is to take all the data from the API and store it as a local object or in a custom asset folder which will be updated every now and then.

Community feedback

Arsh Goyal 940

@arshGoyalDev

Posted

It's great but a few fixes would make it better:

  • Title in the navbar should be a link to the home page.
  • There are no commas in the population number that make it hard to read you could use regex to fix it
1

de-sipher 160

@de-sipher

Posted

@arshWebDev Made some changes. Thank you for your suggestion.

Regarding your comment on commas, how can one go about doing so with regex? Can you perhaps show me an example?

I used Intl.NumberFormat to add commas to the population like so;

    return new Intl.NumberFormat('en-EN').format(population)

and this little trick for adding commas to the different languages.

    if(index != value.length){
            languageList.innerHTML+=','
    }
1
Arsh Goyal 940

@arshGoyalDev

Posted

@de-sipher Great, I used this regex to solve this issue

data.population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

And there is an issue like when there is no native name for a country it shows "undefined" you could put a little if check there for undefined cases.

Marked as helpful

0
de-sipher 160

@de-sipher

Posted

@arshWebDev Thanks for the code. It's really going to help me since I have to put commas in a lot of websites and I always felt that my way of doing it was a bit cookie-cutter.

As for the undefined error. I did notice it but I just didn't do anything about it yet. I have been debugging this website for several hours every day now and fixed most of the bugs from which I have noticed that, funny enough, debugging was more strenuous and time consuming than implementing the website itself XD. I'll get to it asap though.

Thanks again for the heads-up!

1
Arsh Goyal 940

@arshGoyalDev

Posted

@de-sipher That's great, yes debugging takes a lot more time than just making the website.

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