Webpage using Tailwind Animations and Variants

What are you most proud of, and what would you do differently next time?

I liked working on this solution. I think I will redo this challenge use a framework. When rendering a country's detail on the country page, I found myself implementing dynamic rendering. This is shown below

      
        
          Border Countries:
        
        
          ${(function () {
            let innerHtml = ""

            for(let i = 0; i != country.borderCountries.length; ++i){
              innerHtml +=
              `
                
                  ${country.borderCountries[i]}
                
              `
            }

            return innerHtml
          })()}
        
      

What challenges did you encounter, and how did you overcome them?

1. I could not line up the country flags and country details on the countries page without distorting some of the flag images as shown in the design files. The reason for this is because the images of the flags have different aspect ratios. Forcing them to fill equal sized image containers would distort all of them except for those that have the same aspect ratio and size as that of the container. I solved this by allowing the larger images to decide the size of the grid cells on their rows. The other country cards with smaller images then fill the grid cell. I then applied flex column and justify between to the country details card.

What specific areas of your project would you like help with?

I know this is not the best solution for this challenge so if you can spare some time, please point out some design mistakes I made and possible improvements.

Thank you