Skip to content

A single-page application that displays information about all the countries of the world by integrating with a REST API.

Notifications You must be signed in to change notification settings

SyedZawwarAhmed/Countries-of-the-World

Repository files navigation

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

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

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • JavaScript

What I learned

While making this project, the most important thing which I learned is the fetch API which is also the foundation of this website.

One other thing which I also learned is the local storage which I used for saving the user preference for theme (light/dark).

Here is the snippet of the fetch API I used in this project

fetch("https://restcountries.eu/rest/v2/all")
  .then((res) => res.json())
  .then((data) => {
    countries = data;
    countries.forEach((country) => {
      main.innerHTML += `<div class="country"><div class="flag-container"><img class="flag" src=${country.flag}></div><div class="country-details"><h2 class="country-name">${country.name}</h2><span><strong>Population: </strong>${country.population}</span><br><span><strong>Region: </strong>${country.region}</span><br><span><strong>Capital: </strong>${country.capital}</span></div></div>`;
    });
  });

Useful resources

  • Stack Overflow - As always, when I got stuck, stackoverflow helped me get through.
  • w3Schools - In my opinion, this is the best website for documentation with easily understandable code examples.

Author

About

A single-page application that displays information about all the countries of the world by integrating with a REST API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published