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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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: https://github.com/andresgrdn/rest-countries-api-with-color-theme-switcher
• Live Site URL: https://flags-finder.netlify.app/

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• For the styles I used pure CSS

What I learned

By making the seek bar I learned how to iterate over objects and arrays. It's something really cool, first we must understand very well the object that we get from the api; that's the tricky part, but when I knew what the country array looked like inside, I used array and object methods to separate the data for each country and create a unique card.

function getCards(countries = []) {
  const cards = [];
  for (const country of countries) {
    const { name, flags, population, region, capital } = country;
    const cardElement = document.createElement('div');
    <!--clipped code--> // card dom creation from api data
    cards.push(cardElement);
  }
  return cards;
}

This was a tricky part.

 const langNames = Object.entries(languages);
  const langArray = [];
  langNames.forEach(langName => {
    langArray.push(`<span>${langName[0]} ${langName[1]}</span>`);
  })
  languagesElement.innerHTML = `Languages: ${langArray.join(', ')}`;

Finally, the key part in this project was to separate the code into different parts. It makes code easier to read and much easier to think of new answers to new problems.

Useful resources

• Select element | WhatWC website
• Select element | MDN website
• Other option to the select element | MDN website

Author

• Website - andresgrdn.github.io
• Frontend Mentor - @andresgrdn
• Twitter - @andresgrdn