Submitted over 1 year ago

REST Countries API with neumorphism design and Leaflet Maps

#fetch#sass/scss

Mateusz• 180

@userMatMik

Preview site View code

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello FM Community! This is my first upload here so dont be harsh ;)

I've made this project using Vanila JS because I felt that this will be a great opportunity to use some more advanced JS features for example: JS Routing and Promise.all()

I didnt follow FM Design i went more in neumorphism style and I've added few things from me like Leaflets maps ( dark and light mode) and preferred color scheme.

I'm not sure if I used Promise.all() properly so I will be very greatfull is somone can take a look at it. The function is called getBorderCountrysName () and it's in app.js file.

Take care guys :)

Community feedback

Luis Castillo• 380

@lipe11

Posted over 1 year ago

Very nice!. I wish I knew about leaflet maps when I did mine, looks pretty good and clean.

Regading Promise.all, I think you could omit one of the calls if you get the json in the same promise... like so:

const promises = borders.map(async (borderCountryCode) => {
  const result = await fetch(url)
  return result.json()
})
const finalData = await Promise.all(promises)

cheers.

Marked as helpful

Mateusz• 180

@userMatMik

Posted over 1 year ago

@lipe11

Ty Luis for nice words and for your advice. I will try your solution. Have a great weekend :)

Josh• 560

@jkellerman

Posted over 1 year ago

Very nice, especially the addition of leaflet maps.

Mateusz• 180

@userMatMik

Posted over 1 year ago

@jkellerman TY for your kind words :)

Please log in to post a comment

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