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.

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: Web

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• VueJS - JS library
• Nuxt.js - VueJS framework
• Vuetify - Material Design Framework

What I learned

I learned more about consuming APIs, css grid, flexbox and more.

Code i'm proud of:

<div v-if="!loading" class="countries">
  <Country
    v-for="country in countries"
    :key="country.name.common"
    :country="country"
    :dark-mode="darkMode"
    class="country"
  />
</div>

.country-card-info {
  display: grid;
  grid-template-areas:
    "one"
    "two"
    "three"
    "four";
  gap: 2rem;
  margin: auto 0;
}

.country-card-info-top {
  grid-area: one;
}
.country-card-info-left {
  grid-area: two;
}
.country-card-info-right {
  grid-area: three;
}
.country-card-info-bottom {
  grid-area: four;
}

@media (min-width: 1000px) {
  .country-card-info {
    grid-template-areas:
      "one one"
      "two three"
      "four four";
  }
}

getCurrencies() {
  let currencies = ""
  const currenciesArr =  Object.values(this.country.currencies)
  currenciesArr.forEach(currency => {
      currencies += currency.name + (currenciesArr.indexOf(currency) < currenciesArr.length - 1 ? ", " : '')
  });
  return currencies
}

Continued development

I want to keep improving my knowledge in CSS GRID , flexbox, media queries, Vue Store, js objects functions and more.

Author

• Website - Henrique Melo