Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Sveltekit solution

svelte, vite
Razaq Himawan•70
@razaq-himawan
A solution to the REST Countries API with color theme switcher challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


i still don't know what is the best practice on how to fetch from multiple endpoints, i don't like the look of this. do you guys have any tips?

import { API_ENDPOINT } from '../lib/server/api-endpoint.js';

export async function load({ fetch }) {
const resAllCountries = await fetch(API_ENDPOINT.ALL);
const resAfrica = await fetch(API_ENDPOINT.REGION('africa'));
const resAmericas = await fetch(API_ENDPOINT.REGION('americas'));
const resAsia = await fetch(API_ENDPOINT.REGION('asia'));
const resEurope = await fetch(API_ENDPOINT.REGION('europe'));
const resOceania = await fetch(API_ENDPOINT.REGION('oceania'));

return {
countries: resAllCountries.json(),
africa: resAfrica.json(),
americas: resAmericas.json(),
asia: resAsia.json(),
europe: resEurope.json(),
oceania: resOceania.json(),
};
}

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vercingétorix•130
    @darkseid7
    Posted almost 2 years ago

    You have the endpoint https://restcountries.com/v3.1/region/ to filter countries by regions. You just need to create a Select component with an onChange event that takes the selected value and appends it to the URL for fetching data: https://restcountries.com/v3.1/region/${region}.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub