Skip to content
Submitted about 2 years ago

REST Countries API with neumorphism design and Leaflet Maps

Mateusz•180
@userMatMik
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

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
    @lipe11Posted about 2 years 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
    0
    Mateusz•180
    @userMatMikPosted about 2 years ago

    @lipe11

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

    0
  • Josh•560
    @jkellermanPosted about 2 years ago

    Very nice, especially the addition of leaflet maps.

    0
    Mateusz•180
    @userMatMikPosted about 2 years ago

    @jkellerman TY for your kind words :)

    0

Please log in to post a comment

Log in with GitHub

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