responsive design, mucho js, template strings, css grid responsivo

When the user selects a region from the drop-down the list does not show an option has been selected. The countries seem to update but there is no conformation that the user selected the correct region

Hey, great work on this one. The layout is different, it contains more country cards, but hey, it is still fine. The mobile layout seems fine as well.

Some suggestions would be:

• The colormode toggler in the header could have used a input type="radio" since that toggler is a selection of color, and radio buttons are great for those. Using p tag is not really accessible. You can look at my solution on how I structured my colormode toggler. It is wrapped in a fieldset along with the legend. This creates accessible feature, since if a user navigated through it using screen reader, it will announce what are those radio buttons are for.
• Your main should have a h1 element, this could be a screen reader only text.
• The input for the screen reader could have used a visual indicator like an outline in their focus-visible state. It is always advisable to add visual indicators in an interactive element.
• The search bar as well is not functioning properly. I tried searching ph but other countries appeared even though they don't have those letters.
• It would be good as well to make the x button on the search bar, reset the input overall, so that when I click on it, the countries would go back to the original.
• The filter by region could have used a select element, this is much great than using div alone without accessibility feature used in the javascript. You can take a look on my solution above, I implemented the filter bar using listbox along with javascript to create more ease navigation.
• Just a quick tip, if you are coding a web, try to use the tab on the keyboard to check if your desired interactive element are being focused, that is really important.
• On the main page, the information of each country could have used ul element, since those are list of information about the country.

Visited country page:

• The back link should only used a tag. Do not nest button element it. Style the a alone with an aria-label like aria-label="back to homepage".
• The name of the country could have been the h1on the visited page.
• The information could have used ul since those are list of information.
• The border countries should have been using a tag rather than button, because those are supposed link to the country name.
• The colormode is not working on the visited page, you might want to look at that one out.

Also, a bug of overflow I think. If you click the dropdown, then hover on the country below it, the country overlaps the dropdown.

On the mobile layout, it would be great to only use the hover selector, on the desktop layout. Since you don't use mouse in mobile, the hover won't fire.

Aside from those, you did good in here.