REST Countries API with color theme switcher using Vanilla JavaScript

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  • It would also be great to show a spinner when the page loads, or to display country loading messages

  • instead of duplicating variables, you could create a base address and add paths. And it is better to make them constants, because you do not change them.

  let baseApiLink = "https://restcountries.com/v2/all";
  let regionQuery = `https://restcountries.com/v2/region/`;
  let nameQuery = `https://restcountries.com/v2/name/`;
  let alphaQuery = `https://restcountries.com/v2/alpha/`;
  

  • Code duplicating

     if (light) {
        darkMode(switchBtnText, switchBtnIcon);
        light = false;
      } else {
        lightMode(switchBtnText, switchBtnIcon);
        light = true;
      }
  

  • One of the possible optimization methods:

        darkMode(switchBtnText, switchBtnIcon);
        light = !light;
  
  

  • It is also better to optimize the function to enable themes:

  function chanegMode(text, icon, mode) {
    let iconClasses = `fa-regular theme-icon ${mode === 'dark' ? 'fa-sun-bright' : 'fa-moon'}`;
    text.textContent = mode === 'dark' ? 'light mode' : 'dark mode';
    icon.className = iconClasses;
   mode === 'dark' 
   ? document.body.classList.add("dark-theme")
  : document.body.classList.remove("dark-theme")
  }
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  1