trayshmhirk/countries-api-with-color-theme-switcher

A REST Countries API with color theme switcher using HTML, CSS, and JavaScript.

Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - REST Countries API with color theme switcher solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

The challenge

Users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode (optional)

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla Javascript
• Icons - For fontawesome icons
• font family - For Google fonts

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

<!-- country api cards -->
    <section id="countries" class="light-mode dark-mode">
        <div class="container countries-flex">
            <!-- card info constructed in Javacript -->
        </div>
    </section>

document.addEventListener('DOMContentLoaded', () => {
  // search for the country name that has been passed into the url from the previous page, on clicking the cards
  const urlParamsCountry = new URLSearchParams(window.location.search);
  const countryName = urlParamsCountry.get('country');

  // grab the theme passed into the url from the home page
  const urlParamsTheme = new URLSearchParams(window.location.search);
  const currentTheme = urlParamsTheme.get('theme');

  // set the theme of the detail page based on the theme received from the home page
  if (currentTheme === 'dark-mode') {
      switchDarkMode();
  } else {
      switchLightMode();
  }

  // prints the country name as the dom title
  document.title = `${countryName} | Frontend Mentor`;

  // Load the details of the selected country
  detailUI.countriesDetailInfo(countryName);
});


// function to set the event listener on the countries to load another page containing the information of the borders
setBorderEventListener(countryDetails) {
  // loop through the borders to perform the function
  Array.from(countryDetails).forEach(data => {
    // listen for a click event on the border buttons
    data.addEventListener('click', (e) => {
      const borderCountry = e.target.textContent;

      // call the api to load the countries
      countries.loadCountriesAPI()
      .then(countryData => {
        countryData.forEach(country => {
          // validate that the border country selected is the same as the country alphacode to return the country details
          if (borderCountry === country.alpha3Code) {
            // Navigate to the another detail page with the selected country name in the URL and the theme
            const countryName = country.name;
            const currentTheme = localStorage.getItem('theme');
            window.location.href = `detail.html?country=${encodeURIComponent(countryName)}&theme=${currentTheme}`;
          }
        })
      })
    })
  })
}

Continued development

I would like to research better and more efficient ways of setting color themes(light and dark) and ways to save them into the local storage better. Using react would be a better and easier way to complete this project, so i would love to repeat this using reactJS.

Author

• Frontend Mentor - @Trayshmhirk
• Twitter - @TrayShmhirk01