Responsive Where in the World application

Hello everyone!

I should start by saying that I did not aim for pixel-perfect or anything for that matter, I've taken upon the idea, added some extra features, and made it my own in an attempt to have a larger project on my resume.

The goal is to polish everything into its final state, cover the edge cases, and fix the portions of my code where it becomes lengthy, repetitive, and has a certain cramped feeling in multiple instances.

I will go into some of these instances in more detail. If you choose to stick around, bear with me, I know the code might be troublesome to read, but with your help, we can make it that much better.

Thank you for your time :)!

Problems:

• formatPopulation function

const formatPopulation = (population: number) => { return population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); };

This function is responsible for formatting the population number by adding commas as thousand separators. Used in several pages/components(located in LibraryPage, LibraryItemPage, QuizResults, Challenges), and is being declared each time. What would be the right way of declaring the function once and calling it from a global scope?

• working with SVGS

This one is related to CSS and occurs in the Challenges component and LibraryItemPage page, the svgs that I am referring to are the displayed flags in corresponding pages(gotten from restcountries API). The objective was to get the aspect ratio of an svg and display it with perfect resolution without cutting any part of the svg. I was able to achieve the desired look in most of them where their aspect ratio was 1 to 1.5, but in rare cases such as the country Nepal, its flag svg aspect ratio is around 0.8, which takes way too much height and makes the scrollbar appear. How could I limit the height in such cases without disrupting the aspect ratio and keeping it whole? Here is a snippet of CSS(from Challenges):

.imgContainer {
border-radius: 4px;

position: relative;

width: 100%;
height: auto;

padding-bottom: calc(100% / var(--aspect-ratio));
}

.imgContainer img {
height: 100%;
width: 100%;

border-radius: 4px;

object-fit: cover;
object-position: center;

top: 0;
left: 0;
bottom: 0;
right: 0;

position: absolute;
}

• Quiz functionality

Ahh... The tough one... Don't even know how to start with this one, because I genuinely think that this entire section needs a complete revamp. I am referring to QuizPage and the entirety of its components used. I chained it up heavily, and I am super unhappy with the quality of the code that's there. Yet, I couldn't find an appealing approach to make the structure of the quiz. I will not go too deep into this one, I'll just simply ask to glimpse over the QuizPage and you're bound to see something faulty(if you can afford the time that is).

• Everything

If you glance over something I did not specify, please let me know, in the end, all helpful critique is welcome. Even if you don't know the right solution, putting me on the right path would be huge!