Responsive Country web using grid, flexbox, React and Typescript

Hello Alejandro,

I loved this one too. Pretty challenging though. I'm not an expert, but I'll try to help :D (I mean, you used React, and I know so little about it).

For the dark mode, I used the localStorage option!

Here is my way:

When the dark mode button is triggered, I check for the dark mode value in the localStorage. If it doesn't exist, I'll save the dark mode value to the localStorage.

When the light mode is triggered, I check if the dark mode exists in the localStorage. If it does, I'll remove it.

I added a DOMContentLoaded event to check if the dark mode exists in the localStorage to decide which color mode the page will use. Perhaps there are some gurus here to correct or validate this method.

// Set dark mode in the localStorage
localStorage.setItem("theme-mode", "darkmode")

// Get the dark mode item
localStorage.getItem("theme-mode")

// Remove the dark mode
checkDarkmodeExist() && localStorage.removeItem("theme-mode")

Hopefully, I could help.

Regarding the global considerations:

In the desktop view, you need to use a maximum of 4 cards in a single row. If the cards have more width, the flags are going to render much better.

Keep up the good work and take care though ;)